I've been struggling to incorporate my blender model into my website using three.js. Despite following various tutorials, I can confirm that the model works fine outside of three.js. If there's something crucial that I'm missing or need to download, any assistance would be greatly appreciated. I've searched high and low but haven't been able to find a solution.
import {GLTFLoader} from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32465a40575772021c03030a1c03">[email protected]</a>/examples/jsm/loaders/GLTFLoader.js';
import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deaab6acbbbb9eeef0efefe6">[email protected]</a>/examples/jsm/controls/OrbitControls.js';
class BasicWorldDemo {
constructor() {
this._Initialize();
}
_Initialize() {
this._threejs = new THREE.WebGLRenderer({
antialias: true,
});
this._threejs.shadowMap.enabled = true;
this._threejs.shadowMap.type = THREE.PCFSoftShadowMap;
this._threejs.setPixelRatio(window.devicePixelRatio);
this._threejs.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this._threejs.domElement);
window.addEventListener('resize', () => {
this._OnWindowResize();
}, false);
const fov = 60;
const aspect = 1920 / 1080;
const near = 1.0;
const far = 1000.0;
this._camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
this._camera.position.set(75, 20, 0);
this._scene = new THREE.Scene();
// Lights setup
// Controls setup
// Textures setup
// Models setup
this._RAF();
}
_LoadModel() {
const loader = new GLTFLoader();
loader.load('./resources/untitled.glb', (gltf) => {
gltf.Scene.traverse(c => {
c.castShadow = true;
});
this._scene.add(gltf.scene);
});
}
_OnWindowResize() {
this._camera.aspect = window.innerWidth / window.innerHeight;
this._camera.updateProjectionMatrix();
this._threejs.setSize(window.innerWidth, window.innerHeight);
}
_RAF() {
requestAnimationFrame(() => {
this._threejs.render(this._scene, this._camera);
this._RAF();
});
}
}
let _APP = null;
window.addEventListener('DOMContentLoaded', () => {
_APP = new BasicWorldDemo();
});