Не вижу 3d объективаМодель при загрузке с THREE.js - PullRequest
Новая
       30

Не вижу 3d объективаМодель при загрузке с THREE.js

0 голосов
/ 13 мая 2019

Я загружаю файл obj с внешнего ресурса с помощью three.js.Из функции обратного вызова onProgress я вижу, что объект загружается без ошибок.Однако я не вижу объекта на экране.Я пробовал разные текстуры и различные положения камеры, но все еще не вижу объект.Интересно, что файл obj можно легко увидеть с помощью Windows Object Vİewer без каких-либо настроек.

Здесь я использовал файл boj и настройки программы CAD при экспорте obj:

Файлы Obj и связанные файлы с файлом obj: https://ufile.io/e3oplk29 Параметры экспорта файла Obj в программе 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();

Любая идея приветствуется.Спасибо

1 Ответ

1 голос
/ 13 мая 2019

Кажется, геометрия вашего объекта переведена. Поскольку ресурс состоит из нескольких сеток, я предлагаю следующий код для центрирования вашего 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() для OBJLoader в следующем официальном примере и смог увидеть объект (воротник рубашки).

https://threejs.org/examples/webgl_loader_obj_mtl

enter image description here

three.js R 104

...