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
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
also I realised, u r trying to import
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)
}
)
}
.glb model using gltf loader
r u sure u r using correct loader?