如何使用three.js將3d框放置在另一個3d框內？

Question

我正在從事貨物管理項目。 我需要在3d圖像中渲染包裝訂單，我是初學者來使用THREE.js 。 我有容器內對象的位置（x，y，z軸）和大小以及容器的大小。 現在，我需要在3d圖像中進行渲染。

我學會了分別渲染容器和對象，但是不知道如何將對象放置在容器內。

請幫我學習如何做。

在這里，我嘗試了這樣的事情。

       init();
       animate();

         function init() {

            var aspect = window.innerWidth / window.innerHeight;
            camera = new THREE.PerspectiveCamera(55, innerWidth / innerHeight, 1, 6000);
            camera.position.x = radius * Math.sin(THREE.Math.degToRad(theta));
            camera.position.y = radius * Math.sin(THREE.Math.degToRad(theta));
            camera.position.z = radius * Math.cos(THREE.Math.degToRad(theta));
            scene.add(camera);

            var geometry = new THREE.BoxBufferGeometry(2000, 2150, 5600, 1, 1, 1);               
            var material = new THREE.MeshPhongMaterial({ color: 0x000000, wireframe:true });

            container = new THREE.Mesh(geometry, material);
            container.position.x = 100;
            container.position.y = 100;
            container.position.z = 100;
            container.scale.x = 2000;
            container.scale.y = 2150;
            container.scale.z = 5600;
            scene.add(container);
            var geometry = new THREE.BoxBufferGeometry(20, 20, 20);

            for (var i = 0; i < 20; i++) {
                var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
                object.position.x = Math.random() * 800 - 400;
                object.position.y = Math.random() * 800 - 400;
                object.position.z = Math.random() * 800 - 400;
                object.scale.x = Math.random() + 5;
                object.scale.y = Math.random() + 5;
                object.scale.z = Math.random() + 5;
                scene.add(object);
                container.add(object);
            }
        }

        function animate()
        {
            renderer.render(scene, camera);
        }

但是它沒有顯示結果，也沒有錯誤。

Answer 1

您必須將對象添加為容器的子代，然后設置對象的位置。

// first add the container in the scene
var geometry = new THREE.BoxGeometry(container_width, container_height, container_depth);
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var container = new THREE.Mesh(geometry, material);
scene.add(container);

// then add objects as the child of container
var geometry_obj = new THREE.BoxGeometry(object_width, object_height, object_depth);
var material_obj = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var object = new THREE.Mesh(geometry_obj, material_obj);
// you can set the object's position in the container
object.position.set(object_position.x, object_position.y, object_position.z)
container.add(object);