如何使用ThreeJS加载.OBJ和.MTL？ （HTML）

Question

我正在尝试使用ThreeJS脚本将3D地球加载到我的HTML网站中（如下所示）但它与来自其他来源的代码拼接在一起，这意味着相机已映射到MouseX和{{1}职位。我希望对象以简单的慢速旋转坐在页面的中心，但每次我尝试实现这一点时，对象都会消失。

Javascript：

MouseY

Answer 1

您需要稍微更改一下代码，

在＆＃39; init＆＃39;函数，更改对象加载逻辑如下

var mtlLoader = new THREE.MTLLoader();
var objLoader = new THREE.OBJLoader();
mtlLoader.load( 'planet.mtl', function(materials) {
    materials.preload();
    objLoader.setMaterials(materials);
    objLoader.load( 'planet.obj', function( object ){
        object.position.set( 0, 0, 0 ); // set the position as (0,0,0)
        globe = object; // globe is the object to be added to the scene
        scene.add(globe);
        animate(); //call the animate function only after the object is loaded
    }, onProgress, onError);
} );

并更改渲染方法

function render() {
    globe.rotation.y += 0.01; // this will rotate the object
    camera.lookAt( scene.position );
    renderer.render( scene, camera );
}