CODEWITHSUNDEEP
javascriptthree.jsblender
Alexander Hein
Alexander Hein

Reputation: 990

Three.js: Weird render result

How can I fix the reflection around the cycles?

I got some weird results on my object. I hope the pictures show the problem.

Three.js result

enter image description here enter image description here

Expected result

enter image description here

enter image description here

loader.load( "model.js", function(geometry){
    geometry.computeVertexNormals();

    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {
      color: 0xffffff,
      specular: 0xffffff,
      shininess: 65,
      metal: true,
      envMap: cubeCamera.renderTarget
    }));
    scene.add(mesh);
    });

I have exported the model with the three.js json exporter from blender. The model has vertices, faces and UVs.

Upvotes: 0

Views: 324

Answers (1)

2pha
2pha

Reputation: 10165

Hmm, this is hard to explain, but basically it is because you are using triangle polygons and your topology is not good. It is often referred to as "pinching" if I recall correctly.
When modelling for Three.js, it is basically modelling for a game engine and all the same rules need to be followed.

Things you could try to get a better reflection:

  • Reduce the amount of polygons as it seems you have WAY more polygons than are needed.
  • Try for a cleaner topology using quads and minimising tris.
  • Set up smoothing groups

An easy fix would be to use a simple plane in the correct shape with holes cut out as it seems the sides are not really visible anyway. (I am talking about the large flat piece specifically here). I suggest this because I have found that reflections when using MeshPhongMaterial are often not adversely affected by the use of ngons and tris when all the vertices are flat and in the same smoothing group.

Upvotes: 2

Related Questions