OBJ文件在threejs中沒有正確渲染

某些面從obj文件中沒有正確渲染時丟失。灰色部分顯示在online viewer中查看的相同對象，其中所有面部/零件均正確呈現。 OBJ文件在threejs中沒有正確渲染

下面的圖像是我想要在本地主機渲染的圖像。使用THREE.js obj加載器。

的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.x = 100; 
 
    camera.position.y = 50; 
 
    camera.position.z = 70; 
 

 
    scene = new THREE.Scene(); 
 
    var ambient = new THREE.AmbientLight(0xffff , 4); 
 
    scene.add(ambient); 
 

 
    var directionalLight = new THREE.DirectionalLight(0xffffff ,0.5); 
 
    directionalLight.position.set(0, 0, 1000); 
 
    scene.add(directionalLight); 
 

 
    
 

 
    controls = new THREE.TrackballControls(camera); 
 
     controls.rotateSpeed = 5.0; 
 
     controls.zoomSpeed = 2; 
 
     controls.panSpeed = 1; 
 
     controls.noZoom = false; 
 
     controls.noPan = false; 
 
     controls.staticMoving = true; 
 
     controls.dynamicDampingFactor = 0.5; 
 
     controls.keys = [ 65, 83, 68 ]; 
 
     controls.addEventListener('change', render); 
 

 

 
    // texture 
 
      var manager = new THREE.LoadingManager(); 
 
      manager.onProgress = function (item, loaded, total) { 
 
       console.log(item, loaded, total); 
 
      }; 
 
      var texture = new THREE.Texture(); 
 
      var onProgress = function (xhr) { 
 
       if (xhr.lengthComputable) { 
 
        var percentComplete = xhr.loaded/xhr.total * 100; 
 
        console.log(Math.round(percentComplete, 2) + '% downloaded'); 
 
       } 
 
      }; 
 
      var onError = function (xhr) { 
 
      }; 
 
      var loader = new THREE.ImageLoader(manager); 
 
       loader.load('textures/GreenWall.jpg', function (image) { 
 
       texture.image = image; 
 
       texture.needsUpdate = true; 
 
      }); 
 
      var loader = new THREE.OBJLoader(manager); 
 
      loader.load('./obj/male02/feder.jt.obj', function (object) {      
 
       object.traverse(function (child) { 
 
        if (child instanceof THREE.Mesh) { 
 
         child.material.map = texture; 
 
        } 
 
       }); 
 
       scene.add(object); 
 
      }, onProgress, onError); 
 

 
    renderer = new THREE.WebGLRenderer(); 
 
    renderer.setClearColor(0xdddddd); 
 
    renderer.setSize(window.innerWidth/1.5 , window.innerHeight/1.5); 
 
    container.appendChild(renderer.domElement ); 
 
} 
 

 
function animate() { 
 
    requestAnimationFrame(animate); 
 
    render(); 
 
    controls.update(); 
 
} 
 

 
function render() { 
 
    //camera.lookAt(scene.position); 
 
    renderer.render(scene, camera); 
 

 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    
 
    <title>three.js webgl - loaders - OBJ loader</title> 
 
    <meta charset="utf-8"> 
 
    <meta io ="view" name="viewport" content="width=device-width, height=device-height user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
 
    </head> 
 
    <body> 
 
    <script src="./build/three.js"></script> 
 
    <script src="./build/Detector.js"></script> 
 
    <script src="./build/three.min.js"></script> 
 
    <script src="./loaders/OBJLoader.js"></script> 
 
    <script src="main.js"></script> 
 
    <script src= "Controls/TrackballControls.js"></script> 
 
    <div id="container" ></div> 
 
    </body> 
 
</html>

來源

2017-04-14 santhosh.r

嘗試添加'child.material.side = THREE.DoubleSide;' – gaitat

謝謝，它的工作，有沒有辦法將對象居中到世界中心？因爲如果我旋轉它，它會在一個最終點上旋轉。 –

通過添加child.material.side = THREE.DoubleSide;裝載機裏面，它的工作完美。

來源

2017-04-27 13:26:01

OBJ文件在threejs中沒有正確渲染

回答

相關問題