I am struggling to create a scenario where multiple objects fall from the top in my project.
My attempt at duplicating the code has not been successful.
Below is the code snippet I have been working on:
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x00ff00);
renderer.setClearColor( 0xffffff, 0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// CAMERA!
var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
// SCENE!
var scene = new THREE.Scene();
// LIGHTS!
var light = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(light);
var light1 = new THREE.PointLight(0xffffff, 0.5)
scene.add(light1);
// TYPE OF 3D SHAPE!
var geometry = new THREE.BoxGeometry( 100, 100, 20 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationZ( Math.PI / 4 ) );
geometry.applyMatrix( new THREE.Matrix4().makeScale( .6, 0.9, .6 ) ); // MATERIALs!
var material = new THREE.MeshLambertMaterial({color: 0xF3FFE2});
var mesh = new THREE.Mesh(geometry, material);
var mesh1 = new THREE.Mesh(geometry, material);
mesh.position.set(100, 500, -1000);
mesh1.position.set(200, 500, -1000);
scene.add(mesh);
scene.add(mesh1);
// RENDER LOOP
color = '0x'+(Math.random()*0xFFFFFF<<0).toString(16);
requestAnimationFrame(render);
function render() {
move = Math.floor((Math.random() * 2) + 1);
mesh.translateZ(-10)
mesh.translateY(-10)
if (move == 1){
mesh.material.color.setHex(color);
}
mesh.rotation.x += 0.005; //MOVE SHAPE
mesh.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
scene.add(mesh)
}
I am aiming to have several objects falling from above within the three.js environment, but I can't seem to make it work as intended. Can someone provide guidance on how to achieve this using three.js?
I am relatively new to three.js and would greatly appreciate any assistance! Please note that I am not new to JavaScript.
Your help is highly appreciated! Thank you in advance for your support as I have been stuck on this particular issue for some time.