import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
export class Main {
private scene: THREE.Scene;
private camera: THREE.PerspectiveCamera;
private renderer: THREE.WebGLRenderer;
private controls: OrbitControls;
private stats: Stats;
constructor() {
// Create scene
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf0f0f0);
// Create camera
this.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
10000
);
this.camera.position.set(0, 5, 10);
// Create renderer
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.shadowMap.enabled = true;
document.body.appendChild(this.renderer.domElement);
// Create stats
this.stats = new Stats();
document.body.appendChild(this.stats.dom);
// Add controls
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.05;
// Add lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
this.scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
directionalLight.castShadow = true;
this.scene.add(directionalLight);
// Load GLB
this.loadModel();
// Handle window resize
window.addEventListener('resize', this.onWindowResize.bind(this));
// Start animation loop
this.animate();
}
// Load the model
private loadModel(): void {
const loader = new GLTFLoader();
const url = 'path/to/my/file.glb';
loader.load(
url,
(gltf) => {
const model = gltf.scene;
// Center the model
const box = new THREE.Box3().setFromObject(model);
const center = box.getCenter(new THREE.Vector3());
model.position.sub(center);
this.scene.add(model);
// Adjust camera to fit model
const size = box.getSize(new THREE.Vector3());
const maxDim = Math.max(size.x, size.y, size.z);
const fov = this.camera.fov * (Math.PI / 180);
let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
this.camera.position.z = cameraZ * 1.5;
this.camera.updateProjectionMatrix();
this.controls.target.set(0, 0, 0);
this.controls.update();
},
(progress) => {
console.log(`Loading: ${(progress.loaded / progress.total * 100)}%`);
},
(error) => {
console.error('Error loading model:', error);
}
);
}
private onWindowResize(): void {
// Update camera
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
// Update renderer
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
private animate(): void {
requestAnimationFrame(() => this.animate());
// Update controls
this.controls.update();
this.stats.update();
// Render scene
this.renderer.render(this.scene, this.camera);
}
}
// Initialize the application
new Main();
In the above code, I load a glb file which is big, in threejs using GLTFLoader,
If the glb file is big, for example, a group of 9000 meshes, I got that violation warning message.
How to fix this. What can we use to load a big structure easily in threejs?