14
Янв
2022

Как импортировать текстуры в three.js?

Пытаюсь импортировать на сайт 3D модель авто, но почему то не импортируются дополнительные текстуры с моделькой, и у меня не отображаются почему то стекла и материал с отражением имитация "Хрома"(Использую модельку формата FBX). Подскажите пожалуйста, я может что-то делаю не так или выбрал не тот формат 3D модели, что у меня не отображаются некоторые материалы и текстуры. Пробовал конвертировать в формат GLTF, все работает, но модель выглядит пластмассово по сравнению с форматом FBX.

Картинка на сайте (FBX): Недоработка Картинка в Cinema 4D: Картинка Cinema 4D

Мой код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        * {margin:0;padding:0;}
        .container {width: 100%; height: 100vh;}
    </style>
    <div class="container"></div>
    <script src="three.js"></script>
    <script type="module">

        import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js'
        import { FBXLoader } from './three.js-master/examples/jsm/loaders/FBXLoader.js'

        let scene;
        let camera;
        let renderer;

        function init() {
            let container = document.querySelector('.container');

            //Scene
            scene = new THREE.Scene()
            scene.background = new THREE.Color(0xFFDC73);

            //Camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 20000);
            camera.position.z = 200;
            camera.position.y = 50;
            camera.position.x = 0;

            //render
            renderer = new THREE.WebGLRenderer({antialias: true})
            renderer.setSize(window.innerWidth, window.innerHeight)
            container.appendChild(renderer.domElement)

            //OrbitControls
            const controls = new OrbitControls(camera, renderer.domElement);
            controls.update();
            controls.enableDamping = true;
            controls.minDistance = 40;

            //light
            const ambient = new THREE.AmbientLight(0x000000, 1);
            scene.add(ambient)

            //model
            const loader = new FBXLoader();
            loader.load('./model/Car.fbx', fbx => {
                scene.add(fbx);
            }, 
                function (error) {
                    console.log('Error: ' + error)
                }
            )

            //Resize
            window.addEventListener('resize', onWindowResize, false)
            
            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

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

            function animate() {
                requestAnimationFrame(animate)
                controls.update();
                renderer.render(scene, camera)
            }
            animate()
        }
        init()
    </script>
</body>
</html>

Источник: https://ru.stackoverflow.com/questions/1371411/%D0%9A%D0%B0%D0%BA-%D0%B8%D0%BC%D0%BF%D0%BE%D1%80%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D1%83%D1%80%D1%8B-%D0%B2-three-js

Тебе может это понравится...

Добавить комментарий