0

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)

here are pictures

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

Bilal
  • 3,191
  • 4
  • 21
  • 49
  • 1
    Before you export from Blender, be sure to apply all modifiers. There is also a checkbox for this in the glTF exporter option `Geometry -> Mesh -> Apply Modifiers`. – Mugen87 Dec 12 '22 at 16:51

0 Answers0