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

Question

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

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

Obj 文件及与 obj 文件相关的文件：https://ufile.io/e3oplk29 CAD 程序上的 Obj 文件导出选项：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 );

我在下面的官方示例中 OBJLoader 的 onLoad() 回调中添加了这段代码，并且能够看到对象（衬衫领子）。

https://threejs.org/examples/webgl_loader_obj_mtl

three.js R 104

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

Can Not See 3d Obj. Model When Loaded With THREE.js

3d

textures

three.js