As a beginner in frontend development, I lack knowledge of OpenGL. I am using the three.js GLTFLoader to import a 3D model, but the result is not satisfying. The preview on the model website looks ugly, and I want to improve the appearance to match the sample output shown in the image below. Can you help me update my code for a better visual output?
<script>
const vm = new Vue({
el: '#root',
data(){
return {
x: 100,
y: 100,
z: 100
}
},
mounted(){
this.initWorld();
let material = new THREE.LineBasicMaterial({ color: 0x0000ff });
Vue.prototype.loader = new THREE.GLTFLoader();
this.loader.load(
'./scene.gltf',
this.onLoadend,
this.onLoading,
this.onError
)
},
methods: {
initWorld(){
const { innerWidth: w, innerHeight: h } = window;
const render = new THREE.WebGLRenderer({
alpha: false,
antialias: true,
});
render.setSize(w, h);
document.querySelector('#root').appendChild(render.domElement);
const camera = new THREE.PerspectiveCamera(45, w/h, 1, 500);
camera.position.set(this.x, this.y, this.z);
camera.lookAt(0, 0, 0);
const scene = new THREE.Scene();
Vue.prototype.camera = camera;
Vue.prototype.scene = scene;
Vue.prototype.render = render;
},
refreshRender(){
this.render.render(this.scene, this.camera);
},
changeCameraPosition(x, y, z){
this.camera.position.set(x, y, z);
this.refreshRender();
},
onLoadend(gltf){
this.scene.add(gltf.scene);
console.log(gltf);
this.scene = gltf.scene;
this.refreshRender();
},
onLoading(xhr){
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
onError(err){
console.log(`An error happened: ${err}`);
throw err;
}
}
})
</script>
I am aiming for a look similar to the sample image, but currently, the output is not satisfactory.