Question

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

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

javascript file-main.js

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

通过在加载器中添加child.material.side = THREE.DoubleSide;，它可以很好地工作。

OBJ文件无法在threejs

1 个答案: