The model loaded using GLTFLoader will not display on the page, and the console will not report errors. And I can get the loaded object. I have tried scaling the camera, scaling the model, turning on lights, changing maps, and other methods, but loading other GLB models can display it
Moon_1_3474.glb (3.1 MB)
load() {
let camera, scene, renderer;
init();
render();
function init() {
const container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
scene = new THREE.Scene();
const loader = new GLTFLoader();
//Moon_1_3474
//AnisotropyBarnLamp
//BoomBox
//IridescenceLamp
loader.load('models/glb/Moon_1_3474.glb', function (glb) {
scene.add(glb.scene);
render();
});
var pointLight = new THREE.PointLight(0xffffff, 10, 100);
scene.add(pointLight);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set(0, 0, 0);
controls.update();
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function render() {
renderer.render(scene, camera);
}
}
