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

Question

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

我

从来没有用过JavaScript编码，所以我想知道是否有人可以帮助我编辑其中一个示例文件（misc_controls_trackball.html）。而不是生成的几何图形（mesh.position.x = （ Math.random（） - 0.5 ） ...我想知道我是否可以包含一个已经制作的网格（例如，最多 3 个工作室）？

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

            // 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示例文件以及"js"文件夹。

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

希望对您有所帮助！ :)