THREE.JS load the 3D model but it is not showed in my vue componet - vue.js

Question

I'm new working with THREE.js and I've been trying to show a .glb model into my component.
<template>
<section id="hero"></section>
</template>
<script>
import * as THREE from "three";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
//import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { onMounted } from '#vue/runtime-core';
export default {
setup(){
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight,0.1,10);
let renderer = new THREE.WebGLRenderer();
let light = new THREE.AmbientLight( 0x404040 );
let loader = new GLTFLoader();
const init = ()=>{
renderer.setSize(window.innerWidth, window.innerHeight);
loader.load(
process.env.BASE_URL+'GLB/Elephant.glb',
function (glb ) {
console.log(glb);
scene.add(glb.scene);
light.position.set(2,2,5);
scene.add(light);
},
function (xhr) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function (error) {
console.error( error );
}
);
const container = document.getElementById('hero');
container.appendChild(renderer.domElement);
camera.position.set(0,1,2)
};
const animate = () => {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
onMounted(()=>{
init();
animate();
})
}
}
</script>
<style>
#hero {
width: 100%;
height: 100vh;
background-color: white;
}
</style>
I know that my .glb file is loaded because it's show in the console. but when I add it to my scene there is nothing in the screen, I've also tried with the example from the documentation where I can show the cube from the example but when is a custom model it is not working, I don't have any error in the console.

Answer 1

maybe your camera's position is not good. If you don't set where the camera look at ,the camera will look at (0, 0, 0) by default, if your model is out of sight, you will not see it. You can add a controller to change your perspective.
`setup(){
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight,0.1,10);
let renderer = new THREE.WebGLRenderer();
let light = new THREE.AmbientLight( 0x404040 );
let loader = new GLTFLoader();
const init = ()=>{
renderer.setSize(window.innerWidth, window.innerHeight);
loader.load(
process.env.BASE_URL+'GLB/Elephant.glb',
function (glb ) {
console.log(glb);
scene.add(glb.scene);
light.position.set(2,2,5);
scene.add(light);
},
function (xhr) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function (error) {
console.error( error );
}
);
const controls = new OrbitControls(camera, renderer.domElement)
const container = document.getElementById('hero');
container.appendChild(renderer.domElement);
camera.position.set(0,1,2)
};
const animate = () => {
requestAnimationFrame( animate );
renderer.render( scene, camera );
controls.update();
};
onMounted(()=>{
init();
animate();
})
}`
if this is not working, you should consider if the size of model is too big/small. you can use
const box = new THREE.Box3().setFromObject(glb.scene);
console.log(box)
to check the size of it, and use glb.scene.scale.set()to set its scale.