2D to 3D shape: shade and texture

Questions
,
1

This post is a follow on to the good question posed by @Przemyslaw_Niemiec

2D object in 3D space (by Vertices)

An excellent answer is provided by @prisoner849 and it is visible here:

In his June 2018 update to the question, @Przemyslaw_Niemiec asks:

Everything is ok, when I use THREE.MeshBasicMaterial, but when i try to use a texture
the object has a solid color instead the texture.
How to use the texture?

So far there has been no response to this aspect of the question. It is also worth noting that shading seems to be broken as well. All meshes appear with the same color and shade regardless of their rotation.

You may observe the shade and texture issues via this fiddle:

image
image856Ă—631 107 KB

BTW, I am using prisoner849’s code in a project still in early stage of development here:

https://www.ladybug.tools/honeybee-viewer/viewer-3d/

( In the demo, only the files starting with “model” display anything in 3D. )

2

Hi!
There’s another topic: Texture on dynamically created object

1 Like
3

@prisoner849: thank you for speedy response. I had no idea this question existed.

I have added the code from Texture on dynamically created object to a fork of my previous fiddle:

https://jsfiddle.net/theo/fmr6vxde/

I note that the textures load nicely but that the shading does not work. In order to show this more clearly, I replaced THREE.MeshPhongMaterial with THREE.MeshNormalMaterial. The result looks like this:

image
image882Ă—681 23.8 KB

Can you think of a way of getting the meshes to shade as expected?

4

Try to add computing of vertex normals:

mesh.geometry.vertices = vertices;
mesh.geometry.computeVertexNormals();
return mesh;
1 Like
5

@prisoner849

Bingo!

mesh.geometry.computeVertexNormals();

The tricky bit was knowing where to put the call.

image
image897Ă—677 34.5 KB

Thank you for sharing your wisdom!

This puppy will soon have a major update:

https://www.ladybug.tools/spider-gbxml-tools/spider-gbxml-viewer/