Question

我在THREE.JS中遇到OBJ Loader的问题我写了以下代码：

   //Scene
scene = new THREE.Scene();

//Camera
camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);

//Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth-5,window.innerHeight-5);
document.getElementById('container').appendChild(renderer.domElement);


//loader
loader = new THREE.OBJLoader();
loader.load('../disk.obj',function(object){
   scene.add(object);
});
//Main loop
function init() {
   renderer.render(camera,scene);
}

你能帮助我吗？

Answer 1

假设你的javascript在另一个文件中，你永远不会调用init方法。执行此操作时，请确保使用window.onload行加载文档。你的场景中没有任何灯光，所以它当然都是黑色的。确保包含js / examples文件夹中的OBJLoader。还要确保您的目标文件足够大或者相机正在查看它。

您的HTML应该是这样的

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - loaders - OBJ loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  </head>
  <body>
    <script src="three.js/build/three.min.js"></script>
    <script src="three.js/examples/js/loaders/OBJLoader.js"></script>
    <script src="main.js"></script>
    <div id="container"></div>
  </body>
</html>

你的javascript文件（main.js）应该是这样的。替换当然

window.onload=function(){
  init();
  animate();
}

function init() {

  container = document.getElementById( 'container' );
  console.log(container)
  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  camera.position.z = 100;

  scene = new THREE.Scene();

  var ambient = new THREE.AmbientLight( 0x101030 );
  scene.add( ambient );

  var directionalLight = new THREE.DirectionalLight( 0xffeedd );
  directionalLight.position.set( 0, 0, 1 );
  scene.add( directionalLight );

  var loader = new THREE.OBJLoader();
  loader.load( 'three.js/examples/obj/male02/male02.obj', function ( object ) {
    console.log(object);
    scene.add( object );
  } );

  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  container.appendChild( renderer.domElement );

}

function animate() {

  requestAnimationFrame( animate );
  render();

}

function render() {

  renderer.render( scene, camera );

}

Answer 2

在你的加载回调试试这个

loader.load('', function( geom ){
    mesh = new THREE.Mesh( geom, yourmaterial);
    scene.add(mesh);
});

OBJ装载机THREE.JS问题

2 个答案: