使用自定義網格代替三分之一生成

Question

我剛剛發現了three.js的世界，這真是太神奇了。 我下載了示例，並開始檢查其中一些示例。

我從來沒有用JavaScript編寫過代碼，所以我想知道是否有人可以幫助我編輯示例文件之一（misc_controls_trackball.html）。 而不是生成的幾何體（mesh.position.x =（Math.random（）-0.5）...）我想知道是否可以僅包含一個已經制作好的網格物體（例如，最大3個Studio）？

我認為這是生成網格的代碼的一部分：

            // 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>

然后，需要在代碼中修復許多問題。 -場景對象丟失
-加載了模型，但要按比例放大
-在動畫函數中未調用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();

        }

希望有幫助！ :)