GLB model not displaying in three.js

Hi all, I am trying to import a model and display it on my canvas, but it doesn't seem to work. What am i doing wrong?
import "./index.css";
import * as THREE from "three";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
console.log( GLTFLoader );


//RENDERER
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#logo'),
alpha: true,antialiasing: true,
});


//RESIZE
function resizeCanvasToDisplaySize() {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
if (canvas.width !== width ||canvas.height !== height) {
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}


//CAMERA
const camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
const scene = new THREE.Scene();


//OBJECT
const loader = new GLTFLoader();
loader.load('./public/logo.glb', function(glb){
console.log(glb);
const logo = glb.scene;
logo.scale.set(10, 10, 10);
scene.add(logo);
}, function(xhr){
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, function(error){
console.log('error');
});

const geometry = new THREE.BoxGeometry(300, 300, 200);
const material = new THREE.MeshPhysicalMaterial({
roughness: 0.7,
transmission: 1,
thickness: 1
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


//LIGHT
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
scene.add(light);


//RENDERER
renderer.shadowMap.enabled = true;
renderer.gammaOutput = true;

//ANIMATE
function animate(time) {
time *= 0.001;
mesh.rotation.x = time * 0.5;
mesh.rotation.y = time * 0.5;

resizeCanvasToDisplaySize();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
import "./index.css";
import * as THREE from "three";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
console.log( GLTFLoader );


//RENDERER
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#logo'),
alpha: true,antialiasing: true,
});


//RESIZE
function resizeCanvasToDisplaySize() {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
if (canvas.width !== width ||canvas.height !== height) {
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}


//CAMERA
const camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
const scene = new THREE.Scene();


//OBJECT
const loader = new GLTFLoader();
loader.load('./public/logo.glb', function(glb){
console.log(glb);
const logo = glb.scene;
logo.scale.set(10, 10, 10);
scene.add(logo);
}, function(xhr){
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, function(error){
console.log('error');
});

const geometry = new THREE.BoxGeometry(300, 300, 200);
const material = new THREE.MeshPhysicalMaterial({
roughness: 0.7,
transmission: 1,
thickness: 1
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


//LIGHT
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
scene.add(light);


//RENDERER
renderer.shadowMap.enabled = true;
renderer.gammaOutput = true;

//ANIMATE
function animate(time) {
time *= 0.001;
mesh.rotation.x = time * 0.5;
mesh.rotation.y = time * 0.5;

resizeCanvasToDisplaySize();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
1 Reply
glutonium
glutonium9mo ago
looks about right to me do u have your path correct? ok ya .. comparing with my own.. I see u do need to add a lil more lemme show u my code
import { Object3D, Box3, MeshBasicMaterial, Mesh, Vector3, BufferGeometry, BufferAttribute } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

const rocketUrl = new URL("../assets/ship.gltf", import.meta.url);

export function loadShip(animate, scene, pCamera){

const pivot = new Object3D();
pivot.name = "ship";
pivot.position.set(0, 0, 20000);
// pivot.position.z = 5000;
scene.add(pivot);

const loader = new GLTFLoader();

loader.load(
rocketUrl.href,

(gltf) => {

let rocket = gltf.scene;
rocket.name = "shipModel";
rocket.rotation.set(-Math.PI / 2, -Math.PI / 2, 0);


const geometry = new BufferGeometry();
geometry.setAttribute('position', new BufferAttribute(new Float32Array([
0, 200, 0,
-200, -200, 0,
200, -200, 0
]), 3));

const material = new MeshBasicMaterial({ color: 0x43eb34 });

const blip = new Mesh(geometry, material);
blip.scale.set(6, 6, 6);
blip.rotateX(-Math.PI / 2);
blip.layers.set(1);

pivot.add(rocket, pCamera, blip);

const boundingBox = new Box3().setFromObject(rocket);
const shipLength = boundingBox.max.z - boundingBox.min.z;

rocket.position.z = shipLength / 2;

animate();
},

undefined,

(error) => {
console.log(error)
}
)
}
import { Object3D, Box3, MeshBasicMaterial, Mesh, Vector3, BufferGeometry, BufferAttribute } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

const rocketUrl = new URL("../assets/ship.gltf", import.meta.url);

export function loadShip(animate, scene, pCamera){

const pivot = new Object3D();
pivot.name = "ship";
pivot.position.set(0, 0, 20000);
// pivot.position.z = 5000;
scene.add(pivot);

const loader = new GLTFLoader();

loader.load(
rocketUrl.href,

(gltf) => {

let rocket = gltf.scene;
rocket.name = "shipModel";
rocket.rotation.set(-Math.PI / 2, -Math.PI / 2, 0);


const geometry = new BufferGeometry();
geometry.setAttribute('position', new BufferAttribute(new Float32Array([
0, 200, 0,
-200, -200, 0,
200, -200, 0
]), 3));

const material = new MeshBasicMaterial({ color: 0x43eb34 });

const blip = new Mesh(geometry, material);
blip.scale.set(6, 6, 6);
blip.rotateX(-Math.PI / 2);
blip.layers.set(1);

pivot.add(rocket, pCamera, blip);

const boundingBox = new Box3().setFromObject(rocket);
const shipLength = boundingBox.max.z - boundingBox.min.z;

rocket.position.z = shipLength / 2;

animate();
},

undefined,

(error) => {
console.log(error)
}
)
}
also I realised, u r trying to import .glb model using gltf loader r u sure u r using correct loader?
Want results from more Discord servers?
Add your server