Hi, Can someone help me with this?
My imported gltf/glb model doesn’t look exactly the same like I have in the blender. I’m not able to understand why it is happening. Did I not export it correctly from blender? Did I need any specific configuration to add on three js?
Here is my model that I’m working with -
final continents4.glb (989.6 KB)
This is my code sample -
import { AmbientLight, Color, PerspectiveCamera, Scene, sRGBEncoding, WebGLRenderer } from 'three';
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
let scene: Scene,
camera: PerspectiveCamera,
renderer: WebGLRenderer,
controls: OrbitControls;
// composer:EffectComposer;
const loader = new GLTFLoader();
const loadGLTF = () => {
// lowilds_planet
// https://firebasestorage.googleapis.com/v0/b/bossnet-dev.appspot.com/o/test-scene.glb?alt=media&token=073e0ace-4da7-4fd8-9cd3-7056f409c6ca
loader.load('./../../src/assets/verge3d/final continents4.glb',async (gltf: GLTF) =>
{
console.log(gltf);
scene.add(gltf.scene);
animate();
},
undefined,
(error: any) => console.log(error)
);
};
const animate = () => {
requestAnimationFrame(animate);
controls.update();
// composer.render();
renderer.render(scene, camera);
};
const init = () => {
console.log('dfdf')
scene = new Scene();
scene.background = new Color(0x353535);
// scene.fog = new FogExp2( 0xcccccc, 0.002 );
camera = new PerspectiveCamera(75, 2, 0.1, 1000);
// camera.position.x = -7.35;
camera.position.y = 20;
// camera.position.z = -4.95;
// lights
const light: AmbientLight = new AmbientLight(0xffffff, 1);
// light.position.set(4.07, 1.005, 5.9);
scene.add(light);
scene.add(camera);
renderer = new WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = sRGBEncoding;
// renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;
// renderer.shadowMap.type = PCFShadowMap;
const element = document.getElementById('threejs-container') as HTMLDivElement;
element.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.update();
loadGLTF();
};
window.addEventListener('resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
init();
That’s how it looks in three js -
And that’s how it looks in a blender -
Am I missing any shading configuration in three js? Or, the exported model missing any shading configurations. I’ve searched a lot but didn’t find any solutions. Please help!!!
