I'm newbie to both 3JS
and Blender
, when I export my model to .glb
, then import it to my 3JS
project . But somehow they are not the same.
In Blender
Rendered Mode it look so smooth but in 3JS
, all the color , the mesh , ... so terrible, what did i miss to adjust in 3JS project , please help me :(
(all of my Blender setting are default)
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
//import img
import galaxy from '../img/galaxy.jpg';
//setting value place
const monkeyURL = new URL('../asssets/racoon_2_1.glb',import.meta.url);
const renderer = new THREE.WebGLRenderer();
renderer.gammaOutput = true;
renderer.setSize(window.innerWidth,window.innerHeight); //note this place to change the size of scene to fit the html css
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,
1000
);
//spot light
const spotLight= new THREE.SpotLight(0xFFFFFF);
scene.add(spotLight);
spotLight.position.set(00,10,10);
spotLight.castShadow=true;
const spotLight1= new THREE.SpotLight(0xFFFFFF);
scene.add(spotLight1);
spotLight1.position.set(00,10,-10);
spotLight.castShadow=true;
spotLight.angle=0.5;
const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);
//change color background or image
//renderer.setClearColor(0xFFEA00);
//const textureLoader = new THREE.TextureLoader();
//scene.background = textureLoader.load(galaxy);
//model Blender
const assetLoader = new GLTFLoader();
assetLoader.load(monkeyURL.href,function(gltf){
const model = gltf.scene;
scene.add(model);
model.position.set(0,0,0);
}, undefined, function(error){
console.error(error);
});
//orbit controls
const orbit = new OrbitControls(camera, renderer.domElement);
//axes
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
//camera
camera.position.set(0,2,5);
//functions :D
orbit.update();
function animate()
{
renderer.render(scene,camera);
}
renderer.setAnimationLoop(animate);
Get some help to fix my error