(Three.js) Сцена не выводит модель

Question

Имеется сцена, в которую я попытался загрузить 3Д модель, но её не видно. Не понимаю, что ещё можно предпринять.

Код:

<canvas id="canv"></canvas>

<script>
    const gltfLoader = new THREE.GLTFLoader()

    let canvas = document.getElementById('canv')

    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    const renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true
    })
    renderer.shadowMap.enabled = true
    renderer.setClearColor(0xffffff)

    let scene = new THREE.Scene()
    let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000)
    camera.position.z = 20

    let light = new THREE.SpotLight()
    light.position.set(200, 0, 0)
    light.castShadow = true
    scene.add(light)

    loader = new THREE.GLTFLoader();
    loader.load('public/3d/scene.gltf', function(gltf){
        obj = gltf
        obj.scene.scale.set(1.3, 1.3, 1.3)
        scene.add(obj.scene)
    })

    const rendering = () => {
        renderer.render(scene, camera)
        requestAnimationFrame(rendering)
        camera.lookAt(scene.position)
    }
    rendering()
</script>

Я подключил к сайту файлы ниже:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>

Как мне заставить сцену отобразить модель вместо чёрного экрана?

(Сверху ещё есть canvas слой с эффектом зернистости, но этот слой визуально ничего не перекрывает и всё прекрасно видно)

Answer 1

Ошибка валится при вызове rendering() потому что вы устанавливаете obj = null и сразу вызываете rendering(). Это происходит еще до того как модель загружается

Answer 2

Сама модель очень смещена вверх. Поэтому ее не видно со статичной камерой - только когда подключил OrbitControls удалось заметить :) Притянул модель к центру сцены. Но если начнете вращать ее программно - готовьтесь к неожиданным результатам.

const gltfLoader = new THREE.GLTFLoader()

let canvas = document.getElementById('canv')

canvas.width = window.innerWidth
canvas.height = window.innerHeight

let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000)
camera.position.z = 100

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
  antialias: true
})
renderer.shadowMap.enabled = true
renderer.setClearColor(0x7f7f7f)

let controls = new THREE.OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight()
light.position.set(200, 0, 0)
light.castShadow = true
scene.add(light, 
    new THREE.AmbientLight(0xffffff, 0.25),
  new THREE.HemisphereLight(0xffffff, 0x7f7f7f, 0.5)
);

let model = null;
// "Hand (low poly)" (https://skfb.ly/Dr9p) by scribbletoad is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
gltfLoader.load('https://cywarr.github.io/small-shop/hand/scene.gltf', function(gltf) {
  model = gltf.scene;
  let box3 = new THREE.Box3().setFromObject(model);
  let center = new THREE.Vector3();
  box3.getCenter(center);
  model.position.sub(center);
  scene.add(model);
  console.log(model)
},
null,
err => {
    console.log(err)
})

const rendering = () => {
  renderer.render(scene, camera)
  requestAnimationFrame(rendering)
  camera.lookAt(scene.position)
}
rendering()

body{
  overflow: hidden;
  margin: 0;
}

<canvas id="canv"></canvas>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

БЛОГ НА HUSL

(Three.js) Сцена не выводит модель

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