actually i given to my cube a cubecamera to render the reflection but it seems working but there is some problem which is its not perpendicular the reflection with the globe someone could tell me what i am doing wrong. here is my code what i tried
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../js/three.js"></script>
<script src="../js/OrbitControls.js"></script>
<script>
var camera, scene, renderer;
var cube, slight;
var cubecamera, globe;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set(10,0,10);
scene = new THREE.Scene();
scene.background = new THREE.TextureLoader().load('./models/tex/wood_floor_by_gnrbishop.jpg');
//
slight = new THREE.SpotLight(0xffffff, 2, 90, 0.5, 0.41, 2);
slight.position.set(-10, 25, 0);
slight.castShadow = true;
scene.add(slight);
//
slight.shadow.mapSize.width = 512;
slight.shadow.mapSize.height = 512;
slight.shadow.camera.near = 0.5;
slight.shadow.camera.far = 5000;
var alight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(alight);
var texture = new THREE.TextureLoader().load('./models/tex/metal.jpg');
var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
var material = new THREE.MeshStandardMaterial({ map: texture });
var tex = new THREE.TextureLoader().load("./models/tex/room.jpg", function () {
//console.log("finished");
});
tex.mapping = THREE.SphericalReflectionMapping;
// dynamic camera
cubeCamera = new THREE.CubeCamera(0.5, 100, 512);
cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
scene.add(cubeCamera);
// cube
var geometry = new THREE.BoxBufferGeometry(5, 5, 5);
var material = new THREE.MeshPhongMaterial({ map: texture, envMap: cubeCamera.renderTarget.texture, reflectivity: 1, opacity: 0.1, refractionRatio: 0.95, });
cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 2.5, -5);
cube.name = "cube";
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);
// globe
var texture1 = new THREE.TextureLoader().load('./models/tex/wood _texture33.jpg');
var geometry1 = new THREE.SphereGeometry(0.5, 32, 32);
var material1 = new THREE.MeshPhongMaterial({ map: texture1, shininess: 50, specular: 0xcd6363 });
globe = new THREE.Mesh(geometry1, material1);
globe.position.set(0, 0.5, 0);
globe.name = "globe";
globe.castShadow = true;
globe.receiveShadow = true;
scene.add(globe);
/* plane */
var texture = new THREE.TextureLoader().load('../img/glass.jpg');
var geometry = new THREE.PlaneGeometry(40, 40, 32, 32);
var material = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide });
plane = new THREE.Mesh(geometry, material);
plane.position.set(0, 0, 0);
plane.rotation.x = THREE.Math.degToRad(90);
plane.name = "plane";
plane.castshadow = true;
plane.receiveShadow = true;
scene.add(plane);
renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
var controls = new THREE.OrbitControls(camera, renderer.domElement);
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
cube.visible = false;
cubeCamera.position.copy(cube.position);
cubeCamera.updateCubeMap(renderer, scene);
cube.visible = true;
render();
}
/* render method */
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>