Question

以下是示例http://threejs.org/examples/#misc_controls_pointerlock的链接。从我在源代码中看到的几何是在代码中创建的。你会如何将自己的模型放在那里？

（JS和webGL很新，所以要温柔）。提前谢谢。

编辑：

在示例中，在地板上生成立方体。我也想让我的模特坐在地板上。他们就是这样做的：

// floor

            geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
            geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

            for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {

                var vertex = geometry.vertices[ i ];
                vertex.x += Math.random() * 20 - 10;
                vertex.y += Math.random() * 2;
                vertex.z += Math.random() * 20 - 10;

            }

            for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {

                var face = geometry.faces[ i ];
                face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );

            }

            material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );

            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            // objects, creates one cube

            geometry = new THREE.BoxGeometry( 20, 20, 20 );             

            material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );

            var mesh = new THREE.Mesh( geometry, material );
            mesh.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
            mesh.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
            mesh.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
            scene.add( mesh );              

            objects.push( mesh );           

            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor( 0xffffff );
            renderer.setSize( window.innerWidth, window.innerHeight );

            document.body.appendChild( renderer.domElement );

我已经包含相关的文章，并按照您的建议调用了场景scene。如果我从// objects, creates one cube删除代码并将其替换为我自己的模型，那么楼层将被删除，我的模型不会显示：

             var manager = new THREE.LoadingManager();
            manager.onProgress = function ( item, loaded, total ) {
                console.log( item, loaded, total );
            };

            var loader = new THREE.OBJLoader( manager );
            loader.load( 'obj/springCastle.obj', 'obj/springCastle.mtl', function ( object ) {

                //set properties of object (i.e. position, rotation, etc);                  
                object.position.y = - 80;
                scene.add( object );

            } );

对不起，如果它有一些令人眼花缭乱的东西，但如果你能提供帮助，那就太好了。

Answer 1

您应该使用THREE.OBJLoader从.obj源添加自定义几何体。加载.obj的简短示例如下：

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
};

var yourMaterialHere = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

var loader = new THREE.OBJLoader( manager );
loader.load( 'PATH_TO_YOUR_FILE', function ( object ) {
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.material.map = yourMaterialHere;
        }
    } );
    //set properties of object (i.e. position, rotation, etc);
    scene.add( object );
} );

这几乎直接来自Three.js WebGL OBJ loader example。还有许多其他examples以不同的方式实现这一点;如果您遇到问题，谷歌搜索"load OBJ three.js"会有所帮助。

如果您在开发过程中尝试在没有服务器的情况下运行此操作，请务必查看How To Run Things Locally（如果您还没有）。使用外部文件时非常有用。

编辑：我忘了在我的示例中包含manager定义。它现在包括在内。我有一个yourMaterialHere变量，以便您可以定义自己的材料，但我现在也包含了一个已定义的示例。

更新：以下是它应该如何集成到您的代码中：

// floor

geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {

    var vertex = geometry.vertices[ i ];
    vertex.x += Math.random() * 20 - 10;
    vertex.y += Math.random() * 2;
    vertex.z += Math.random() * 20 - 10;

}

for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {

    var face = geometry.faces[ i ];
    face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
    face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
    face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );

}

material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

// objects, loads an OBJ           

material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
};

var loader = new THREE.OBJLoader( manager );
loader.load( 'PATH_TO_YOUR_FILE', function ( object ) {
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.material.map = material;
        }
    } );
    object.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
    object.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
    object.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
    scene.add( object );
    //objects.push( object); //This will most likely work, I just commented it out because it isn't strictly necessary to load the model
} );             



renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff );
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

您唯一需要做的就是用正确的路径替换PATH_TO_YOUR_FILE。如果您在尝试加载模型时遇到奇怪的权限错误，请务必查看上面的链接。

如何将我的obj模型添加到three.js场景？

1 个答案: