GLTF model does not display on the page

Questions
1

Model.gltf (146.7 KB)

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const canvas = document.querySelector("#webgl");
const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
// renderer.outputEncoding = THREE.sRGBEncoding;

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

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
);
camera.position.set(0, 1, 10);

const loader = new GLTFLoader();
loader.load("Model.gltf", function (gltf) {
  scene.add(gltf.scene);
});

const light1 = new THREE.PointLight(0xffffff, 20, 100);
light1.position.set(50, 30, 50);
scene.add(light1);

const light2 = new THREE.PointLight(0xffffff, 10, 100);
light2.position.set(-50, 30, 50);
scene.add(light2);

const light3 = new THREE.PointLight(0xffffff, 2, 100);
light3.position.set(0, 30, -5);
scene.add(light3);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);

const controls = new OrbitControls(camera, canvas);

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}

animate();

I would like to ask for some help. Above is the 3d model and my code but the model didn’t display on the page.
Without changing the code, simply replace another GLB model and the replaced model can be displayed. I thought there was a problem with this model, but I used the official GLtf viewer of Three to upload this problematic model and it can be displayed.

2

Your model doesn’t appear in Blender either despite containing vertices and faces.

image
image1446×465 112 KB

If I open your gltf in notepad it appears to be missing some header information, so maybe the export was corrupted.

image
image897×259 15 KB

1 Like
3

when i try to use gltf viewer https://gltf-viewer.donmccurdy.com/ and https://sandbox.babylonjs.com/, everything is ok it displayed

4

I found it in Blender, it is offset a million miles.
I had to set the clipping end to 100000 to see it,

image
image1072×649 112 KB

gltf-viewer centres your model
Probably this code here (not line 255)

2 Likes