Блог

Я пытаюсь показать 3D-модель с текстурой на веб-сайте (используя three.js чтобы загрузить файл .obj и .mtl). Но модель не появляется. Я пытаюсь распечатать obj и получил этот код obj. Кто-нибудь знает, что случилось? В консоли больше нет других ошибок. Экран отображается черным основным цветом, но без модели. Буду признателен, если вы поможете. Огромное спасибо

         let container, stats;

        let camera, cameraTarget, scene, renderer;

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
            camera.position.set( 0, 0, 0 );

            cameraTarget = new THREE.Vector3( 0, 0, 0 );

            scene = new THREE.Scene();

            var OBJFile = '/program fixture.obj';
            var MTLFile = '/program fixture.mtl';
            const manager = new THREE.LoadingManager();
            manager.addHandler( /.dds$/i, new DDSLoader() );
            
            new MTLLoader(manager).load(MTLFile, function ( materials ) {
                materials.preload();
                new OBJLoader ( manager ).setMaterials( materials ).load(OBJFile, function ( object ) {
                    console.log(object);
                    scene.add( object );
                });
            });
            

            camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );
            scene.add(camera);

            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.outputEncoding = THREE.sRGBEncoding;

            renderer.shadowMap.enabled = true;
            
            container.appendChild( renderer.domElement );
            const controls = new OrbitControls(camera, renderer.domElement)
            controls.enableDamping = true
            controls.target.set(0, 1, 0)

            // stats

            stats = new Stats();
            container.appendChild( stats.dom );

            window.addEventListener( 'resize', onWindowResize );

        }


        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );
            render();
            stats.update();

        }

        function render() {

            camera.lookAt( cameraTarget );

            renderer.render( scene, camera );

        }
 

В вашем коде есть несколько проблем.

• Вы используете OrbitControls , но затем вызываете lookAt() цикл анимации. Не делай этого. Давайте OrbitControls сосредоточимся на цели.
• Если вы включите демпфирование, вам придется вызвать controls.update() цикл анимации.
• Не устанавливайте камеру в исходное положение. Камера, вероятно, находится «внутри» загруженного ресурса и, следовательно, не может его видеть. Также увеличьте far значение камеры. Попробуйте это с:

 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 100 );
 

• Также добавьте немного света в свою сцену, иначе ваши загруженные ресурсы будут казаться черными. Попробуйте это с:

 const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.6 );
hemiLight.position.set( 0, 20, 0 );
.add( hemiLight );

const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
dirLight.position.set( 0, 100, 100 );
scene.add( dirLight );