Currently, I am exploring three.js on my own and experimenting with different materials applied to cubes. My goal is to place 3 cubes in a scene, each with a distinct material, so that I can compare their differences side by side.
The problem I am encountering is that only cube1 is rendering correctly, while the other two cubes are not visible in the browser. Any assistance in resolving this issue would be highly appreciated.
<body>
<script src="../three.js-master/build/three.min.js"></script>
<script src="../three.js-master/examples/js/controls/OrbitControls.js"></script>
<script>
var camera, scene, renderer;
var controls;
var cube1, cube2, cube3;
init();
animate();
function init() {
//Renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
//Create Cubes
//Normal
var cube1Geometry = new THREE.BoxGeometry(2, 1, 1);
var cube1Material = new THREE.MeshNormalMaterial();
cube1 = new THREE.Mesh(cube1Geometry, cube1Material);
cube1.position.set(0, 0, 0);
scene.add(cube1);
//Lambert
var cube2Geometry = new THREE.BoxGeometry(1, 2, 1);
var cube2Material = new THREE.MeshLambertMaterial({ color: 0xff0000, transparent: true, opacity: 05 });
cube2 = new THREE.Mesh(cube2Geometry, cube2Material);
cube2.position.set(-10, 0, 0);
scene.add(cube2);
//Phong
var cube3Geometry = new THREE.BoxGeometry(1, 1, 2);
var cube3Material = new THREE.MeshPhongMaterial({ shininess: 1 });
cube3 = new THREE.Mesh(cube3Geometry, cube3Material);
cube3.position.set(10, 0, 0);
scene.add(cube3);
//Create Camera
camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(new THREE.Vector3(0, 0, 0));
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function animate() {
controls.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
</body>