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

下面是该示例的链接。从源代码中可以看到，几何体是在代码中创建的。你会如何把你自己的模型放进去

对JS和webGL来说非常陌生，所以要温柔。提前谢谢

编辑：

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

//地板

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

抱歉，如果这是一个非常明显的问题，但如果您能提供帮助，那就太好了。

您应该使用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。有许多其他的方法以不同的方式实现这一点；如果你陷入困境，谷歌搜索的将有所帮助

如果您在开发过程中试图在没有服务器的情况下运行此程序，请确保您已经签出了。它在使用外部文件时非常有用

编辑：我忘记在我的示例中包含经理定义。现在包括在内。我有一个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 ); 

---

实际上，您需要做的唯一一件事就是用正确的路径替换您的文件。如果在尝试加载模型时遇到奇怪的permission-y错误，请确保查看上面的链接。

我正在使用本地主机测试代码。不过，在实施您建议的更改时，我似乎遇到了一些问题。我已经复制了pointerlock示例中的源代码，但不知道将上面建议的代码放在文件中的什么位置。如果删除代码中渲染的几何体并将其替换为我的模型，它将中断。我确保包含relivent加载程序：我已经对代码进行了一些更新。如果不行，请告诉我。编辑问题以包含代码的相关部分可能有助于诊断问题。对于运行我的代码：确保您的场景被称为scene，或者更改我的示例以修复它。另外，请确保在实例化和设置场景后运行此程序。我添加了一些代码，可以帮助您了解我遇到的问题：child.material.map=my_material，Uncaught TypeError:无法设置属性“map”的未定义属性

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