OBJ 文件无法在threejs 中正确呈现答案

【问题标题】：OBJ file not rendering properly in threejsOBJ 文件无法在threejs 中正确呈现
【发布时间】：2017-09-10 14:16:56
【问题描述】：

obj 文件中缺少某些未正确渲染的面。灰色部分显示在online viewer 中查看的同一对象，其中所有面部/部分都正确渲染。

下面的图像是我试图在 localhost 中呈现的图像。使用 THREE.js obj loader。

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>

【问题讨论】：

尝试添加child.material.side = THREE.DoubleSide;
谢谢，它成功了，有没有办法将对象居中到世界中心？？因为，如果我旋转它，它会在一个偏移点上旋转。

标签： javascript three.js .obj

【解决方案1】：

通过在加载器中添加child.material.side = THREE.DoubleSide;，它可以完美运行。

【讨论】：