Hello! I am currently working on a project using three.js. My goal is to create four cubes and achieve the following tasks: (1) apply a texture from another image onto one cube, (2) make light reflect off of a specific cube, and (3) make one cube transparent. I have been facing some challenges with loading the texture onto the cube and understanding how to make the light reflect properly. However, I believe I have successfully achieved the transparency effect. Any help or guidance on this would be greatly appreciated.
Below is the code that I have written so far:
//declare variables
var scene;
var renderer;
var mesh, newMesh;
init();
animate();
//function to create 4 cubes
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.CubeGeometry( 10, 10, 10);
var material = new THREE.MeshLambertMaterial({color: 0x0033ff , transparent: true, opacity: 0.5});
// position the cubes and add textures
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
newMesh = mesh.clone();
newMesh.material =new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 70} );
newMesh.position.x = 50;
scene.add(newMesh);
newMesh2 = mesh.clone();
newMesh2.material =new THREE.MeshLambertMaterial({color: 0x0033ff});
newMesh2.position.y = -25;
scene.add(newMesh2);
newMesh3 = mesh.clone();
var loader = new THREE.TextureLoader();
// loader.load("http://www.photoshoptextures.com/sky-textures/blue-sky-texture.jpg",, function(texture) {
// newMesh3.material = new THREE.MeshLambertMaterial({map: texture});
newMesh3.position.x =30 ;
scene.add(newMesh3) ;
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
// rotation animation for better view
function animate() {
mesh.rotation.x += .04;
mesh.rotation.y += .02;
newMesh.rotation.y += .04;
newMesh.rotation.z += .02;
newMesh2.rotation.y += .04;
newMesh2.rotation.z += .02;
newMesh3.rotation.y += .04;
newMesh3.rotation.z += .02;
render();
requestAnimationFrame( animate );
}
// rendering function
function render() {
renderer.render( scene, camera );
}
// adjust camera for window resize
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}