Hello , i need to make very basic scene like this : https://threejs.org/examples/webgl_materials_envmaps.html
this my code but it wont work :
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial();
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var cube2 = new THREE.Mesh(geometry, material);
scene.add(cube2);
cube2.position.x = 3;
var ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);
var r = 'obj/';
var urls = [r + "px.jpg", r + "nx.jpg",
r + "py.jpg", r + "ny.jpg",
r + "pz.jpg", r + "nz.jpg"
];
var textureCube = new THREE.CubeTextureLoader().load(urls);
textureCube.format = THREE.RGBFormat;
cube.envMap = textureCube;
cube2.envMap = textureCube;
scene.background = textureCube;
camera.position.z = 5;
var animate = function() {
requestAnimationFrame(animate);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
Also i dont understand what is the difference between use the Cubemap , and create a spherical geomettry and give it a texture. It is the same ? we can have the same reflexion with both methode ?
Thanks a lot !