Cube Camera Reflection Bug
Cube Camera Reflection Bug
HTML
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
// a basic three.js scene
var container, renderer, scene, camera, cubeCamera, floor, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer({
antialias: false
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xccccff);
container = document.createElement('div');
document.body.appendChild(container);
container.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0xFFFFFF));
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 10, 10);
camera.lookAt(scene.position);
// (camera) controls
// mouse controls: left button to rotate,
// mouse wheel to zoom, right button to pan
controls = new THREE.OrbitControls(camera, renderer.domElement);
var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 512, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
cubeCamera = new THREE.CubeCamera( 0.1, 5000, cubeRenderTarget );
scene.add( cubeCamera );
var loader = new THREE.TextureLoader();
loader.crossOrigin = "anonymous"
var sphere = new THREE.Mesh( new THREE.SphereGeometry( 2, 32, 32 ), new THREE.MeshBasicMaterial( { map: loader.load( "https://i.imgur.com/Ip19PQt.jpg" ) } ) );
sphere.position.set(0, +2, 0);
scene.add(sphere);
var floorMaterial = /*new THREE.MeshBasicMaterial( { envMap: cubeRenderTarget.texture, side:THREE.DoubleSide, reflectivity: 0.5 } )*/ new THREE.MeshPhongMaterial( { envMap: cubeRenderTarget.texture, side:THREE.DoubleSide, reflectivity: 0.5 } );
var floorGeometry = new THREE.PlaneGeometry(10, 10);
floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = Math.PI / 2;
scene.add(floor);
// events
window.addEventListener('resize', onWindowResize,...