So I’ve been trying to get an asset model to show up in this little viewer canvas I made on an html page, but all I get is a black box where the viewer is. I’ve checked my code and consoled for stuff like directory name typos and stuff but still can’t get things working.
Here’s my html:
and here’s my javascript:
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.118/build/three.module.js';
import {GLTFLoader} from 'https://cdn.jsdelivr.net/npm/three@0.118/examples/jsm/loaders/GLTFLoader.js';
import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/three@0.118/examples/jsm/controls/OrbitControls.js';
//scene setup
const scene = new THREE.Scene();
const canvas = document.querySelector('.viewer');
//light
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 10, 10);
scene.add(light);
// "Matilda" (https://skfb.ly/6zGMG) by nicolekeane
// is licensed under
// CC Attribution-NonCommercial-ShareAlike
// (http://creativecommons.org/licenses/by-nc-sa/4.0/).
const loader = new GLTFLoader();
loader.load('./assets/3d/matilda/scene.gltf', (gltf) => {
if (gltf.scene) {
console.log("im here yo!", gltf.scene);
}
scene.add(gltf.scene);
});
//test cube
// const geometry = new THREE.SphereGeometry(3, 64, 64);
// const material = new THREE.MeshStandardMaterial({color: '#00ff83'});
// const mesh = new THREE.Mesh(geometry, material);
// scene.add(mesh);
//camera
const camera = new THREE.PerspectiveCamera(
45,
canvas.innerWidth / canvas.innerHeight,
0.1,
1000
);
camera.position.z += 20;
camera.position.x += 0;
scene.add(camera);
//renderer
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(canvas.innerWidth, canvas.innerHeight);
// renderer.setSize(window.innerWidth, window.innerHeight);
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 20, 0);
controls.update();
function animate() {
requestAnimationFrame(animate);
// console.log("yo");
renderer.render(scene, camera);
}
animate();
Any help would be greatly appreciated