Model don't loading

Questions
1

Hello. My model don’t loading. Only after double click (resize window) she appear. Why?

Code:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

// Инициализация шаблона
const init = () => {
    const sizes = {
        width: window.innerWidth,
        height: window.innerHeight,
    };

    const scene = new THREE.Scene();
    const canvas = document.querySelector('.canvas');
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
    camera.position.set(280, 110, 100);
    scene.add(camera);

    const controls = new OrbitControls(camera, canvas);
    controls.enableDamping = true;

    const renderer = new THREE.WebGLRenderer({ canvas });
    renderer.setClearColor(0xffffff);
    renderer.setSize(sizes.width, sizes.height);
    renderer.render(scene, camera);

    // Свет
    const lightHemisphere = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.61);
    lightHemisphere.position.set(0, 50, 0);
    scene.add(lightHemisphere);


    // Модель
    const loader = new GLTFLoader();
    const loaderDraco = new DRACOLoader();
    loaderDraco.setDecoderPath('draco/');
    loader.setDRACOLoader(loaderDraco)
    let mixer = null;

    loader.load("model/ferrari.glb", (gltf) => {
        const model = gltf.scene;
        model.scale.set(100, 100, 100);
        console.log(model)
        scene.add(model);
    });


    // Базовые обпаботчики событий длы поддержки ресайза
    window.addEventListener('resize', () => {
        // Обновляем размеры
        sizes.width = window.innerWidth;
        sizes.height = window.innerHeight;

        // Обновляем соотношение сторон камеры
        camera.aspect = sizes.width / sizes.height;
        camera.updateProjectionMatrix();

        // Обновляем renderer
        renderer.setSize(sizes.width, sizes.height);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        renderer.render(scene, camera);
    });

    // Сделать во весь экран по двойному клику мыши
    window.addEventListener('dblclick', () => {
        if (!document.fullscreenElement) {
            canvas.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    });
};

init();
2

Is there a reason you’re only rendering on page resize?

  • If so, add this to your loader:
loader.load("model/ferrari.glb", (gltf) => {
    //...
    scene.add(model);
    renderer.render(scene, camera);
});
  • If not, remove renderer.render(scene, camera); from the resize function, and set a proper animation loop.
renderer.setAnimationLoop(animate)

function animate() {
    renderer.render(scene, camera);
}
4 Likes
3

I would like to thank you and the entire community three.js. Thanks!

2 Likes