OBJ Loader THREE.JS问题

debugcn 发表于 Dev

用户名

我在THREE.JS中的OBJ加载程序有问题。
我编写了以下代码：

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

你能帮助我吗？

03公民

假设您的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 );

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。