three js cube camera ok

by pab_uk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.157.0/three.min.js"></script>

JavaScript

THREE.ColorManagement.enabled = false;

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);

const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10000);
camera.position.set(1.75, 1.75, 7);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;

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, {
  generateMipmaps: true,
  minFilter: THREE.LinearMipmapLinearFilter,
});
const cubeRenderTarget2 = new THREE.WebGLCubeRenderTarget(128, {
  generateMipmaps: true,
  minFilter: THREE.LinearMipmapLinearFilter,
});
const cubeRenderTarget3 = new THREE.WebGLCubeRenderTarget(128, {
  generateMipmaps: true,
  minFilter: THREE.LinearMipmapLinearFilter,
});

const cubeCamera1 = new THREE.CubeCamera(0.1, 10000, cubeRenderTarget1);
const cubeCamera2 = new THREE.CubeCamera(0.1, 10000, cubeRenderTarget2);
const cubeCamera3 = new THREE.CubeCamera(0.1, 10000, 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({
  envMap: cubeRenderTarget1.texture,
  color: 0xff4444,
  reflectivity: 1,
  shininess: 1
});
const material2 = new THREE.MeshPhongMaterial({
  envMap: cubeRenderTarget2.texture,
  color: 0x44ff44,
});
const material3 = new THREE.MeshPhongMaterial({
  envMap: cubeRenderTarget3.texture,
  color: 0x7777ff,
});

const ball1 = new THREE.Mesh(new...