Question

我刚刚发现了three.js的世界并且令人惊叹。我下载了这些示例，并开始检查其中的一些。

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

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

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

        }

希望有所帮助！：）

使用自定义网格而不是在three.js中生成一个

1 个答案:

编辑，添加