three.js 加载对象/模型，然后操作子部件/子项答案

【问题标题】：three.js load object/model and then manipulate sub-parts/childrenthree.js 加载对象/模型，然后操作子部件/子项
【发布时间】：2013-09-20 20:44:27
【问题描述】：

我有一个机器人手臂的 3D 模型，我想在浏览器中显示和操作它。

我的问题是：如何将模型加载到three.js中，这样我就可以操纵机械臂的所有子部分了。

例如，我在 Inventor 中有一个旋转电机和一个轴作为组件连接。图片：http://i.stack.imgur.com/custz.png

这被导出为一个 stl 文件，并使用 STLLoader.js 在 Three.js 中导入。图片：http://i.stack.imgur.com/nLmBe.png

我想知道如何操纵轴转动到指定的角度。

我已经使用以下代码加载了模型：

<div id="container"></div>

    <script src="three.js\build\three.min.js"></script>
    <script src="js\STLLoader.js"></script>

    <script>
        // Set size variables
        var SIZE_x = 400, SIZE_y = 400;

        // Set three main THREE variables
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, SIZE_x/SIZE_y, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();

        // Set renderer options
        renderer.setSize(SIZE_x, SIZE_y);
        renderer.setClearColor(0xEEEEEE, 1.0);
        renderer.clear();

        // Append to HTML Dom
        //document.body.appendChild(renderer.domElement);
        $('#container').append(renderer.domElement);

        // Create light
        var pointLight = new THREE.PointLight(0xFFFFFF);
        pointLight.position.x = 10;
        pointLight.position.y = 50;
        pointLight.position.z = 130;            
        scene.add(pointLight);

        // Move camera
        camera.position.x = 0;
        camera.position.y = 20;
        camera.position.z = 20;



        var loader = new THREE.STLLoader();
        loader.addEventListener( 'load', function ( event ) {
            var geometry = event.content;

            var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533 } );
            var mesh = new THREE.Mesh( geometry, material );

            scene.add( mesh );

            mesh.traverse(function ( child ) {
                //if ( child instanceof THREE.Mesh ) {
                    console.log("Hej: " + child);
                //}
            });
            //scene.add( new THREE.Mesh( geometry ) );
            console.log('Loaded');
        } );
        loader.load( 'models/AssemblySimple1.stl' );

        // Render loop
        var render = function () {
            requestAnimationFrame(render);

            camera.lookAt(scene.position);
            renderer.render(scene, camera);
        };

        render();
    </script>

欢迎任何观点和提示。此外，如果有首选的导出文件格式。我可以使用 SolidWorks 和 Inventor。或者，如果我对问题采取了完全错误的方法，请告诉我其他方法。

谢谢

【问题讨论】：

你有没有想出一些合理的方法来与程序集交互？我还没有看到真正好的浏览器 3D 模型工具。

标签： javascript model 3d load three.js

【解决方案1】：

三个js有一个叫做THREE.STLLoader()的函数。这个可以用来加载stl文件。这是它的加载方式

    var loader = new THREE.STLLoader();
        var group = new THREE.Object3D();
    loader.load("../lib/SolidFz.stl", function (geometry) {
        console.log(geometry);
        var mat = new THREE.MeshLambertMaterial({color: 0x7777ff});
        group = new THREE.Mesh(geometry, mat);
        group.rotation.x = -0.5 * Math.PI;
        group.scale.set(0.6, 0.6, 0.6);
        scene.add(group);
    });

这里的场景

 var scene new THREE.Scene();

之后，您创建了一个 3d 对象并将其加载到该 3d 对象中。然后您可以根据需要控制该 3d 对象。根据这种方式，您可以加载多个零件并使用它做您想做的事情

【讨论】：