javascript - ThreeJS GLB模型加载时为空白

Question

ThreeJS 新手

我有一个 GLB 模型并尝试加载它，它在控制台中成功加载，没有任何错误，但在页面上没有显示任何内容，我尝试使用灯光和相机位置，但没有任何效果。当我尝试在 ThreeJS 编辑器中打开模型时，它会加载模型，但是我必须选择环境作为“模型查看器”才能查看模型，不知道我的模型到底出了什么问题。

代码：

import './style.css'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {GUI} from 'dat.gui';

const gui = new GUI();
const modelLoader = new GLTFLoader();

// Canvas
const canvas = document.querySelector('canvas.webgl')

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

let cube;

modelLoader.load('/models/jewel.glb', function (gltf) {
    cube = gltf.scene;
    scene.add(cube);
}, undefined, function (error) {
    console.error(error);
});


// Lights
const pointLight = new THREE.PointLight(0xffffff, 200)
pointLight.position.x = 2
pointLight.position.y = 5
pointLight.position.z = 15
scene.add(pointLight);

const light = new THREE.AmbientLight(0xffffff, 3);
scene.add(light);

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight - 200
}

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(0, 0, 4);
scene.add(camera)

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    domElement: document.getElementById("canvas")
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

const clock = new THREE.Clock()

const tick = () => {
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}

tick()

模型在这里上传 https://drive.google.com/file/d/15NeEfkYS698Gy4HNBO9p19HiOIS2uOmB/view?usp=sharing

标签： javascriptthree.jsgltf