看不到3d对象。使用THREE.js加载时的模型

Question

我使用three.js从外部资源加载obj文件。从onProgress回调函数中，我可以看到该对象已加载，没有任何错误。但是我看不到屏幕上的对象。 我尝试了不同的纹理和不同的相机位置，但仍然看不到对象。 有趣的是，无需任何设置即可使用Windows ObjectVİewer轻松查看obj文件。

在导出obj时，这里是我使用的boj文件和CAD程序设置：

obj文件和包含obj文件的相关文件：https://ufile.io/e3oplk29 CAD程序上的对象文件导出选项：https://pasteboard.co/Ieu9226.jpg

这是我使用的代码：

////************HERE LIGHT AND SCENE AND CAMERA****************////
var directionalLightIntensity = 1;
var ambientLightIntensity = 0.05;
var ambiColor = "#ffffff";
var metalValue = 0;
var roughValue = 1;
var kumas = "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/';?>"+"kumas/kumas9.jpg";
var kumasNormal = "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/';?>"+"kumas/kumas9_NORMAL.jpg";
var container = document.getElementById('cloth-container');

if(window.innerWidth > 767 ){
    var render_height = document.documentElement.clientHeight - 8;
    var render_width = document.documentElement.clientWidth - 130;
}else{
    var render_height = document.documentElement.clientHeight - 95;
    var render_width = document.documentElement.clientWidth;
}

const scene = new THREE.Scene();

var light = new THREE.DirectionalLight('#ffffff', directionalLightIntensity);
var ambientLight = new THREE.AmbientLight(ambiColor, ambientLightIntensity);
light.position.set(0,0,1);
scene.add(light);
scene.add(ambientLight);

const camera = new THREE.PerspectiveCamera(75, render_width/render_height,0.1,1000);
camera.position.z =  1.8 ;
camera.position.y =  1.2;
camera.position.x =  0;
camera.lookAt( 0,1.2,0);

const renderer = new THREE.WebGLRenderer({ alpha: true , antialias:true });
renderer.setSize(render_width, render_height);
renderer.setClearColor( 0xffffff, 0);
container.appendChild(renderer.domElement);

const objLoader = new THREE.OBJLoader();

const mtlLoader = new THREE.MTLLoader();
mtlLoader.setMaterialOptions({side:THREE.DoubleSide});

////************HERE OBJ LOAD WITH THREE.JS****************////
mtlLoader.load( "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/yaka6-n4/';?>"+'yaka6-n4.mtl', function( materials ) {
    materials.preload();

    objLoader.setMaterials( materials );
    objLoader.load( "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/yaka6-n4/';?>"+'yaka6-n4.obj', function ( obj ) {
        collar_obj = obj;
        obj.position.set( obj_pos_x, obj_pos_y, obj_pos_z );
        obj.rotation.y = 0;

        // texture
        texture = textureLoader.load(kumas);
        textureNormal= textureLoader.load(kumasNormal);
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        textureNormal.wrapS = textureNormal.wrapT = THREE.RepeatWrapping;
        texture.repeat.x = textureXRepeat;
        texture.repeat.y = textureYRepeat;
        textureNormal.repeat.x = textureXRepeat;
        textureNormal.repeat.y = textureYRepeat;

        obj.traverse( function ( child ) {
            //if ( child.isMesh ) child.material.map = texture;
            if ( child.isMesh ) child.material = new THREE.MeshStandardMaterial({
                //color:     0x996633,
                //specular:  0x050505,
                //shininess: my_shine_value,
                metalness: metalValue,
                roughness: roughValue,
                map:       texture,
                normalMap: textureNormal,
                //side:      THREE.DoubleSide
            });
        });

        scene.add( obj );
    },
    // onProgress callback
    function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },

    // onError callback
    function ( err ) {
        console.log( 'An error happened' );
    });
});

////************HERE RENDERER****************////
function render(){
    requestAnimationFrame(render);
    renderer.render(scene,camera);
}

render();

任何想法都值得赞赏。 谢谢

Answer 1

似乎对象的几何图形已平移。由于资产由多个网格组成，因此建议使用以下代码将OBJ居中。

const box = new THREE.Box3().setFromObject( object );
const center = box.getCenter( new THREE.Vector3() );

object.position.x += ( object.position.x - center.x );
object.position.y += ( object.position.y - center.y );
object.position.z += ( object.position.z - center.z );

我在以下官方示例的onLoad()的{​​{1}}回调中添加了此代码，并且能够看到对象（衬衫领）。

https://threejs.org/examples/webgl_loader_obj_mtl

OBJLoader