How to make multiple objects in Three.js?

Question

I need to make multiple objects fall from the top.

I have tried to duplicate code but it did not work.

HERE is my code:

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 want to make many objects to fall from the sky. How can I do this with three.js because it did not appear?

I am a beginner to three.js so kindly help me! Note: not javascript beginner

Please Help Thanks in Advance! (i have been stuck on this)

Answer 1

The following live example is an enhanced version of your code. The basic idea is to use an array to manage individual objects in your scene:

for ( var i = 0; i < count; i ++ ) {

    var mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);
    objects.push(mesh);

    // initial individual transformation

    mesh.position.set(- 1000 + Math.random() * 2000, 2000 * Math.random(), -1000 + Math.random() * 2000 );
    mesh.rotation.x += Math.PI * Math.random();
    mesh.rotation.y += Math.PI * Math.random();

}

You then use the same approach to update these objects in your animation loop.

Demo: https://jsfiddle.net/6bzfLag2/1/

However, be aware that this approach requires one draw call per object so it is not very performant for a large amount of objects. You should consider to use InstancedMesh which was recently introduced in the engine. Study the following example to see how you can use it to transform individual objects but render them with a single draw call.

https://threejs.org/examples/webgl_instancing_suzanne

three.js R110