Blender - Three.js - export/import mesh looks ugly

2
votes

I have some problems with getting some 3D objects from Blender to render correctly into Three.js.

Here is the object in Blender: enter image description here (I think the objects looks quite good)

Here is the object in Three.js (loaded using THREE.SceneLoader()): enter image description here

(notice the strange surface arround the holes).

Moreover, when zooming in, I can see parts of the objects behind the front facing the camera. enter image description here

Can someone please let me know a good workflow to get objects from blender properly rendered in Three.js?

Is this because of shaders or it is a mesh import/export issue?

I am using a scene from the samples (ground, sky, shadows) and loading my meshes with sceneLoader from JSON files exported from Blender.

If I am exporting the same objects as .obj and load it in Three.js using OBJLoader than it looks just fine. enter image description here

The problem is that I need to create a more complex scene and I need the objects to be interactive/clickable. Will this be possible if I save the scene as .OBJ?

1
3dthree.jsblender

1 Answers

2
votes

Use Flat-Shading , for example material.shading = THREE.FlatShading; See this example for amterial properties: http://mrdoob.github.io/three.js/examples/webgl_materials.html You are looking for a facetted sphere. It looks ugly in three.js because it is smoothing the vertex/face normals.

Concerning your second point. Check the size of your imported object and your scene size. If your object gets "cut up" when zooming in, you have to change the camera near plane to a smaller value. Same as when your object disappears when zooming out, you would have to change the camera far plane to be further away (increasing the value). Hope this helps, good luck :)