I am new to three.js and have some questions that I need help with.
First Method: Using three.js to load a model (a duck in glb format). As shown below: https://i.sstatic.net/IsYHG.png
Second Method: Utilizing to load the same model As shown below: https://i.sstatic.net/nirc0.png
The results from method 2 are better, as the model is clearer and positioned correctly.
I believe there may be issues with the scene settings, camera setup, and rendering parameters, but I'm unsure how to adjust them.
On the right side of Method 2, gltf-viewer.donmccurdy.com displays various parameters for the model. How should these parameters correspond in the code?
<template>
<div ref="container"></div>
</template>
<script>
import * as THREE from "three";
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js";
// Importing OrbitControls
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
export default {
name: "Model",
data() {
return {
scene: null,
camera: null,
renderer: null,
control: null,
model: null,
};
},
methods: {
// Setting up the scene
initScene() {
this.scene = new THREE.Scene();
},
// Configuring the camera
initCamera() {
this.camera = new THREE.PerspectiveCamera(
50, // Field of View
window.innerWidth / window.innerHeight, // Aspect Ratio
0.01, // Near Plane
1000 // Far Plane
);
// Setting camera position
this.camera.position.x = 0.02;
this.camera.position.y = 5;
this.camera.position.z = 10;
},
// Rendering setup
initRenderer() {
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.$refs.container.appendChild(this.renderer.domElement);
},
// Lighting
initLight() {
const light = new THREE.AmbientLight(0xffffff, 1);
this.scene.add(light);
},
// OrbitControls
initControl() {
this.control = new OrbitControls(this.camera, this.renderer.domElement);
this.control.enableDamping = true;
this.control.dampingFactor = 0.05;
this.control.autoRotate = true;
this.control.autoRotateSpeed = 2.0;
},
// Loading the model
initModel() {
let _this = this;
const loader = new GLTFLoader();
loader.load(
"Duck.glb",
(glb) => {
console.log(glb);
_this.model = glb.scene;
_this.scene.add(_this.model);
},
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
function (error) {
console.log("An error happened:", error);
}
);
},
init() {
// Set up scene
this.initScene();
// Configure camera
this.initCamera();
// Setup renderer
this.initRenderer();
// Lighting
this.initLight();
// OrbitControls
this.initControl();
// Load model
this.initModel();
},
animate() {
requestAnimationFrame(() => {
this.animate();
});
this.renderer.render(this.scene, this.camera);
},
},
mounted() {
this.init();
this.animate();
// Window resize listener
window.addEventListener("resize", () => {
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
});
},
};
</script>
Thank you for your help!