I spent days in sculpting a perfect model using blender. I exported it in .fbx format so as to preserve the rigging and other properties. But when I load it in threejs it just looks flat like this.
Please help…
This is the code:
//light--------------------------------------------
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
scene.add(ambientLight)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.1)
directionalLight.castShadow = true
directionalLight.shadow.mapSize.set(1024, 1024)
directionalLight.shadow.camera.far = 15
directionalLight.shadow.camera.left = - 7
directionalLight.shadow.camera.top = 7
directionalLight.shadow.camera.right = 7
directionalLight.shadow.camera.bottom = - 7
directionalLight.position.set(5, 5, 5)
scene.add(directionalLight)
// ground-------------------------------
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
const loader = new FBXLoader()
loader.load( ‘/t1.fbx’, function ( object ) {
console.log(‘Model adding…’)
object.traverse(function (child) {
if ( child instanceof THREE.Mesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
});
object.position.y = 3
object.castShadow = true
object.rotation.y = Math.PI/8
object.scale.set(0.01,0.01,0.01)
scene.add(object);
console.log(‘object is…’,object)
}, undefined, function ( error ) {
console.error('this is error...', error );
});
//–renderer----------------------------------
const canvas = document.querySelector(‘.webgl’)
const renderer = new THREE.WebGLRenderer({
canvas,
antialias: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
renderer.setClearColor(0xf8a5c2);
renderer.outputEncoding = THREE.sRGBEncoding
renderer.shadowMap.enabled = true
renderer.render(scene, camera)
