Hi friends. There is an example of using a cube camera for Three js objects https://sbcode.net/threejs/cubecamera/. But I want to use gltf loaded objects instead of balls. How can I attach an individual cube camera (with its own reflection) to each gltf object as in the example. Here is my code (but reflection for gltf objects doesn’t work):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>salunMagia1</title>
<linc rel="stylesheet" href="css/styles.css">
</head>
<body>
<script type="module">
import * as THREE from './build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import Stats from './jsm/libs/stats.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb);
const ambientLight = new THREE.AmbientLight(0xaaaaaa);
scene.add(ambientLight);
const light1 = new THREE.PointLight();
light1.position.set(10, 10, 10);
light1.castShadow = true;
light1.shadow.bias = -0.0002;
light1.shadow.mapSize.height = 1024;
light1.shadow.mapSize.width = 1024;
scene.add(light1);
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.01,
100
);
camera.position.set(1.75, 1.75, 3.5);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.enableDamping = true;
const planeGeometry = new THREE.PlaneGeometry(25, 25);
const texture = new THREE.TextureLoader().load('js/textures/parket.jpg');//
const plane = new THREE.Mesh(
planeGeometry,
new THREE.MeshPhongMaterial({ map: texture })
);
plane.rotateX(-Math.PI / 2);
plane.receiveShadow = true;
scene.add(plane);
window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
};
const cubeRenderTarget1 = new THREE.WebGLCubeRenderTarget(128, {
format: THREE.RGBFormat,
generateMipmaps: true,
minFilter: THREE.LinearMipmapLinearFilter
});
const cubeRenderTarget2 = new THREE.WebGLCubeRenderTarget(128, {
format: THREE.RGBFormat,
generateMipmaps: true,
minFilter: THREE.LinearMipmapLinearFilter
});
const cubeRenderTarget3 = new THREE.WebGLCubeRenderTarget(128, {
format: THREE.RGBFormat,
generateMipmaps: true,
minFilter: THREE.LinearMipmapLinearFilter
});
const cubeCamera1 = new THREE.CubeCamera(
0.1,
1000,
cubeRenderTarget1
);
const cubeCamera2 = new THREE.CubeCamera(
0.1,
1000,
cubeRenderTarget2
);
const cubeCamera3 = new THREE.CubeCamera(
0.1,
1000,
cubeRenderTarget3
);
const pivot1 = new THREE.Object3D();
scene.add(pivot1);
const pivot2 = new THREE.Object3D();
scene.add(pivot2);
const pivot3 = new THREE.Object3D();
scene.add(pivot3);
const material1 = new THREE.MeshPhongMaterial({
shininess: 100,
color: 0xffffff,
specular: 0xffaa00,
reflectivity: 0.9,
envMap: cubeRenderTarget1.texture
});
const ball1 = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material1)
ball1.position.set(1, 1.1, 0)
ball1.castShadow = true
ball1.receiveShadow = true
ball1.add(cubeCamera1)
pivot1.add(ball1)
const Door27 = new GLTFLoader();
Door27.load('models/door27.gltf', function(ball2){
ball2.scene;
var door27Bbox = new THREE.Box3();
door27Bbox.setFromObject(ball2.scene);
var bboxDoor27Center = door27Bbox.getCenter().clone();
bboxDoor27Center.multiplyScalar(-1);
ball2.scene.traverse(function(child){
if (child.isMesh) {
child.material.envMap = cubeRenderTarget2.texture;
}
child.castShadow = true;
child.receiveShadow = true;
if (child instanceof THREE.Mesh){
child.geometry.translate(bboxDoor27Center.x, bboxDoor27Center.y, bboxDoor27Center.z); ;
}
});
door27Bbox.setFromObject(ball2.scene);
pivot2.add(ball2.scene);
ball2.scene.position.set(5.2, 0.5, 0);
ball2.scene.add(cubeCamera2);
});
const Door28 = new GLTFLoader();
Door28.load('models/door28.gltf', function(ball3){
ball3.scene;
var door28Bbox = new THREE.Box3();
door28Bbox.setFromObject(ball3.scene);
var bboxDoor28Center = door28Bbox.getCenter().clone();
bboxDoor28Center.multiplyScalar(-1);
ball3.scene.traverse(function(child){
if (child.isMesh) {
child.material.envMap = cubeRenderTarget3.texture;
}
child.castShadow = true;
child.receiveShadow = true;
if (child instanceof THREE.Mesh){
child.geometry.translate(bboxDoor28Center.x, bboxDoor28Center.y, bboxDoor28Center.z); ;
}
});
door28Bbox.setFromObject(ball3.scene);
pivot3.add(ball3.scene);
ball3.scene.position.set(3.1, 1.1, 0);
ball3.scene.add(cubeCamera3);
});
const stats = Stats();
document.body.appendChild(stats.dom);
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
ball1.rotateY(-0.2 * delta);
pivot1.rotateY(0.2 * delta);
pivot2.rotateY(0.3 * delta);
pivot3.rotateY(0.4 * delta);
orbitControls.update();
render();
stats.update();
};
function render() {
ball1.visible = false;
cubeCamera1.update(renderer, scene);
ball1.visible = true;
cubeCamera2.update(renderer, scene);
cubeCamera3.update(renderer, scene);
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>