javascript - 使用自定义网格而不是生成三分之一的.js

Question

我刚刚发现了 Three.js 的世界，它太神奇了。我下载了示例，并开始检查其中的一些示例。

我从来没有用 JavaScript 编码，所以我想知道是否有人可以帮助我编辑示例文件之一 (misc_controls_trackball.html)。我想知道是否可以只包含一个已经制作的网格(例如来自 3 studio max)，而不是生成的几何图形(mesh.position.x =(Math.random() - 0.5)...)？

我认为这是生成网格的代码部分:

            // world

            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

            var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
            var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );

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

                var mesh = new THREE.Mesh( geometry, material );
                mesh.position.x = ( Math.random() - 0.5 ) * 1000;
                mesh.position.y = ( Math.random() - 0.5 ) * 1000;
                mesh.position.z = ( Math.random() - 0.5 ) * 1000;
                mesh.updateMatrix();
                mesh.matrixAutoUpdate = false;
                scene.add( mesh );

            }

应该以什么方式更改它，以便我可以导入外部网格(以 .3ds、.obj、.dae 的形式，没关系)？

谢谢。

这是misc_controls_trackball.html example file along with "js" folder .

Answer 1

尝试过这个吗？

http://threejs.org/examples/webgl_loader_collada

这是 Collada 的示例，但对于其他格式，概念是相同的，只是使用不同的加载器。

var loader = new THREE.ColladaLoader();

// Depending on how you created your model, you may need to
loader.options.convertUpAxis = true;

// Then load it:
loader.load( './models/collada/monster/monster.dae', function ( collada ) {
    // All this will happen asynchronously

    dae = collada.scene;

    // Before displaying it, you can tweak it as necessary
    dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
    dae.updateMatrix();

    scene.add(dae);
    // At the next frame, you`ll have your model loaded.
} );

编辑，补充

首先您需要正确的库的链接，包括 ColladaLoader

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
    <script src="js/loaders/ColladaLoader.js"></script>

然后，代码中需要修复许多问题。- 场景对象丢失
- 模型已加载，但要放大一点
- animate 函数中没有调用 render()，因此没有动画。
- 雾声明被打破了......最好花一些时间在基础知识上，首先......

        function init() {

            // Create your scene first
            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 500;

            controls = new THREE.TrackballControls( camera );

            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;

            controls.noZoom = false;
            controls.noPan = false;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            controls.addEventListener( 'change', render );

            // world

            var loader = new THREE.ColladaLoader();

            // Depending on how you created your model, you may need to
            loader.options.convertUpAxis = true;

            // Then load it:
            //loader.load( './models/collada/monster/monster.dae', function ( collada ) {
            loader.load( 'models/monster.dae', function ( collada ) {
                // All this will happen asynchronously

                dae = collada.scene;

                // Give it a decent scale
                dae.scale.x = dae.scale.y = dae.scale.z = 1;
                dae.updateMatrix();

                scene.add(dae);
                // At the next frame, you`ll have your model loaded.
            } );


            // lights

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 1, 1, 1 );
            scene.add( light );

            light = new THREE.DirectionalLight( 0x002288 );
            light.position.set( -1, -1, -1 );
            scene.add( light );

            light = new THREE.AmbientLight( 0x222222 );
            scene.add( light );


            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: false } );
            //renderer.setClearColor( scene.fog.color, 1 );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.zIndex = 100;
            container.appendChild( stats.domElement );

            //

            window.addEventListener( 'resize', onWindowResize, false );

            // The following is not necessary at this stage, as you`ll call it
            // from animate later down (if you want to do an animation, of course,
            // which I guess you do)
            render();

        }

动画函数应该如下所示

        function animate() {

            requestAnimationFrame( animate );
            controls.update();
            render();

        }

希望有帮助! :)