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

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

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

Файлы obj и связанные файлы с файлом obj: https://ufile.io/e3oplk29 Параметры экспорта файла 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.info( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },

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

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

render();

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
58
1
Перейти к ответу Данный вопрос помечен как решенный

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

https://threejs.org/examples/webgl_loader_obj_mtl

three.js R 104

Другие вопросы по теме