OBJ Loader THREE.JS問題

Question

我在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);
}

你能幫助我嗎？

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 Loader THREE.JS問題

問題描述

2 個解決方案

解決方案1
1 已采納 2014-06-14 22:06:32

解決方案2
1 2014-06-16 05:18:52

OBJ Loader THREE.JS問題

問題描述

2 個解決方案

解決方案1 1 已采納 2014-06-14 22:06:32

解決方案2 1 2014-06-16 05:18:52

解決方案1
1 已采納 2014-06-14 22:06:32

解決方案2
1 2014-06-16 05:18:52