スタートページ＞ Javascript＞ CANVAS＞ WebGL

WebGL Three.js 　複数のオブジェクト

複数のオブジェクトを作成します。
ここでは、立方体(box)と球体(sphere)の位置と大きさとを与えて、カメラを動かし、どのように見えるかを動画にします。
カメラは常に原点に向いています。（物体が原点から離れているので、カメラとの距離が変化し、大きさが変わります。）

立方体　位置 bx= by= bz= 辺長 br=
球体　　位置 sx= sy= sz= 半径 sr=
カメラの回転軸（1:回転, 0:固定) cx= cy= cz=

初期位置でのケース
　　立方体が手前にあり、重なる部分がない場合　　
　　球体が手前にあり、重なる部分がない場合　　　
　　重なる（同一空間に２つの物体がある）場合　　

複数のオブジェクトの作成

    // ====================== 立方体の作成
    var geometry = new THREE.BoxGeometry(br, br, br); // 立方体の形状
    var material = new THREE.MeshNormalMaterial();
    var box = new THREE.Mesh(geometry, material);     // 立法体を box と命名
    box.position.set(bx, by, bz);                     // box の位置
    scene.add(box);                                   // box の登録
    // ====================== 球体の作成
    var geometry = new THREE.SphereGeometry(sr);
    var material = new THREE.MeshNormalMaterial();
    var sphere = new THREE.Mesh(geometry, material);
    sphere.position.set(sx, sy, sz);
    scene.add(sphere);

個々のオブジェクトを独立して作成すればよいのです。
このとき、変数 geometry や material は固定値ではないので、const ではなく var で指定するか、boxGeometry, sphereGeometry のように異なる変数を用います。
立方体、球体の定義順序は任意です。位置がカメラから手前のほうが見え、後ろになる部分は隠れます。
二つのオブジェクトの一部が重なる（同一空間を占める）ことがあっても、そこに２つのオブジェクトがあると理解します。手前のオブジェクトが表示され、後ろのオブジェクトの重なる部分は見えません。