Three js выводит белый контейнер

Question

Пытаюсь загрузить модель на сцену следуя уроку на habr (https://habr.com/ru/post/433876/), модель скачал отсюда (https://www.cgtrader.com/items/2663635/download-page) и получаю абсолютно белый контейнер canvas

Вот листинг скрипта:

let SCENE;
let CAMERA;
let RENDERER;
let LOADING_MANAGER;
let IMAGE_LOADER;
let OBJ_LOADER;
let CONTROLS;
let MOUSE;

let TEXTURE;
let OBJECT;

function initScene() {
    SCENE = new THREE.Scene();

    // initLights();
    initCamera();
    initRenderer();
    initLoaders();
    // initControls();
    loadModel('./Audi_RS_6_Avant.obj', {x: .3, y: .3, z: .3})
    animate();
    document.getElementById("scene").appendChild(RENDERER.domElement);
    // render();
}

function initLights() {
    const ambient = new THREE.AmbientLight(0xffffff, 0.1);
    SCENE.add(ambient);

    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(0, 2, 1);
    SCENE.add(directionalLight);
}

function initCamera() {
    CAMERA = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200);
    CAMERA.position.z = -10;
}

function initRenderer() {
    RENDERER = new THREE.WebGLRenderer({ alpha: true });
    RENDERER.setPixelRatio(window.devicePixelRatio);
    RENDERER.setSize(window.innerWidth, window.innerHeight);
}

function initLoaders() {
    LOADING_MANAGER = new THREE.LoadingManager();
    IMAGE_LOADER = new THREE.ImageLoader(LOADING_MANAGER);
    OBJ_LOADER = new THREE.OBJLoader(LOADING_MANAGER);
}

function initControls() {
    CONTROLS = new THREE.OrbitControls(CAMERA);
    CONTROLS.minPolarAngle = Math.PI * (1 / 4);
    CONTROLS.maxPolarAngle = Math.PI * (3 / 4);
    CONTROLS.update();
}

function loadModel(model, position) {
    OBJ_LOADER.load(model, (object) => {
        // object.scale.x = position.x;
        // object.scale.y = position.y;
        // object.scale.z = position.z;
        object.rotation.x = -Math.PI / 2;
        object.position.y = -30;

        OBJECT = object;
        SCENE.add(OBJECT);
    });
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    CAMERA.lookAt(SCENE.position);
    RENDERER.render(SCENE, CAMERA);
}

initScene();
// render();

        <script src='https://unpkg.com/[email protected]/build/three.min.js'></script>
        <script src='https://unpkg.com/[email protected]/examples/js/loaders/OBJLoader.js'></script>
        <script src='https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js'></script>
        <div id="scene"></div>

Итого я склоняюсь к 2 вариантам проблемы:

Неправильная настройка камеры (позиция камеры, направление, не знаю)
Неправильная настройка модели (позиция модели, масштаб или освещение)
Насчет света: Как я понял, при отсутствии освещения пространство рендера должно быть черным (или я что-то не так понял), но я отключил все источники света

Подскажите где и что я делаю неправильно и как будет правильнее

Answer 1

Взял OBJ-модель из дистрибутива three.js, , раскомментировал initLights() и initControls, перенес .appendChild() в initRenderer() - все работает.

console.clear();
let SCENE;
let CAMERA;
let RENDERER;
let LOADING_MANAGER;
let IMAGE_LOADER;
let OBJ_LOADER;
let CONTROLS;
let MOUSE;

let TEXTURE;
let OBJECT;

function initScene() {
    SCENE = new THREE.Scene();

    initLights();
    initCamera();
    initRenderer();
    initLoaders();
    initControls();
    loadModel('https://threejs.org/examples/models/obj/male02/male02.obj', {x: .3, y: .3, z: .3})
    
    SCENE.add(new THREE.GridHelper());
    
    animate();
    
    // render();
}

function initLights() {
    const ambient = new THREE.AmbientLight(0xffffff, 0.1);
    SCENE.add(ambient);

    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(0, 2, 1);
    SCENE.add(directionalLight);
}

function initCamera() {
    CAMERA = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200);
    CAMERA.position.set(0, 25, 50);
}

function initRenderer() {
    RENDERER = new THREE.WebGLRenderer({ alpha: false });
    RENDERER.setPixelRatio(window.devicePixelRatio);
    RENDERER.setSize(window.innerWidth, window.innerHeight);
     document.getElementById("scene").appendChild(RENDERER.domElement);
}

function initLoaders() {
    LOADING_MANAGER = new THREE.LoadingManager();
    IMAGE_LOADER = new THREE.ImageLoader(LOADING_MANAGER);
    OBJ_LOADER = new THREE.OBJLoader(LOADING_MANAGER);
}

function initControls() {
    CONTROLS = new THREE.OrbitControls(CAMERA);
    CONTROLS.minPolarAngle = Math.PI * (1 / 4);
    CONTROLS.maxPolarAngle = Math.PI * (3 / 4);
    CONTROLS.update();
}

function loadModel(model, position) {
    OBJ_LOADER.load(model, (object) => {
        // object.scale.x = position.x;
        // object.scale.y = position.y;
        // object.scale.z = position.z;
        // object.rotation.x = -Math.PI / 2;
        // object.position.y = -30;

        OBJECT = object;
        OBJECT.scale.setScalar(0.1);
        SCENE.add(OBJECT);
    });
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    //CAMERA.lookAt(SCENE.position);
    RENDERER.render(SCENE, CAMERA);
}

initScene();
// render();

body{
  overflow: hidden;
  margin: 0;
}

<script src='https://unpkg.com/[email protected]/build/three.min.js'></script>
        <script src='https://unpkg.com/[email protected]/examples/js/loaders/OBJLoader.js'></script>
        <script src='https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js'></script>
        <div id="scene"></div>

БЛОГ НА HUSL

Three js выводит белый контейнер

Ответы (1 шт):