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);

如何使用three.js将3d框放入另一个3d框内？

1 个答案: