I was making my own custom geometry with three.js (using typescript). Something was wrong with it, the object appeared all dark with Lambert material. I checked the three.js source code to see if I forgot to do something when creating the geometry. I saw these two lines appear at the end of the constructor of nearly every geometry class:
this.computeCentroids();
this.computeFaceNormals();
Adding the computeFaceNormals solved my problem. I remember something about normals having to do with lighting (so that makes sense).
But I don't know what the computeCentroids does, and where/why those centroids are needed. Can someone explain? Also do I need to call that function? What can happen if I don't?
computeCentroids calculates the centroid of each triangle in a mesh, not the center of the mesh itself.
Probably the easiest way to see their purpose is to search for .centroid in the three.js source code. AFAICS, they are not used for much apart from lighting, but then only if you're using CanvasRenderer.
Related
I have a general scene where I'd like to show different kind of models. Depending on the source of the model sometimes the model contains MeshPhongMaterial, sometimes MeshStandardMaterial, and sometimes both of them.
I also have a specific lighting model with an AmbientLight, and a DirectionalLight that points always to the same direction as the camera, so you will see clearly what you are looking at right now.
To make MeshStandardMaterial look better I've also added an environment map to the scene (not the materials), and I was pretty satisfied with the result.
Here is the result with r130 (Phong material on the left, Standard material on the right):
After I update three.js to r131 the result looks something like this:
I understand that environment maps are auto-converted to PMREM from r131, and this causes the change. I also understand that this is more correct than using non PMREM environment maps, but now it messes up my scene.
On some other topic it was recommended to remove ambient and directional light (because lighting now comes from the environment), but it results in this:
Now the object with standard material looks fine, but the object with phong material is completely black. I've also lost my previous feature that the directional light always points where the camera looks.
By removing ambient light only I get this (still not what I want to achieve):
So basically my question is: Although I know that this is not physically correct, is there a way to apply an environment map that doesn't affect the lighting of the scene, but affects reflections of standard materials?
Here you can find the code of the mentioned scene:
https://github.com/kovacsv/Online3DViewer/blob/dev/sandbox/three_envmap_issue/three_viewer.html
And here you can see it live:
https://raw.githack.com/kovacsv/Online3DViewer/dev/sandbox/three_envmap_issue/envmap_issue.html
So basically my question is: Although I know that this is not physically correct, is there a way to apply an environment map that doesn't affect the lighting of the scene, but affects reflections of standard materials?
No, there isn't. MeshStandardMaterial and MeshPhysicalMaterial require now a more strict PBR workflow. As you pointed out correctly, your previous setup was physically incorrect. This has been fixed and there are no plans right now to allow previous workflows again. Environment maps are considered to be used as IBLs. So conceptually they always affect the lighting no matter how you parameterize the material.
The solution for your use case is to a) use phong materials or b) update the lighting of your scene and accept the new style.
I loaded a Mesh from a JSON File, here is my current result:
my Project
It is an object I exported from blender as JSON and then used its vertices to create a geometry of Points (THREE.Points) (which is important for the looks of it)
I am now looking for a way to "animate" the Points, so that the "surface" looks vivid / living. So basically it should be moving around a bit, something like this (without the rotation):
Link to animated Gif
I have ruled out displacementMap, as this does not work for the PointsMaterial (or does someone know a workaround?)
Does anyone have hints or ideas? I thought of maybe morphing 2-3 Objects .. but I am not sure if this will work for a points mesh.
One approach to achieve your desired effect is to use morph target animation (also called vertex morphing). As you can see at the following example, three.js does support morph target animations with points.
https://threejs.org/examples/webgl_morphtargets_sphere.html
There is a lot of existing literature about vertex morphing, so it should be no problem to get familiar with this technique. I suggest you create your animations in Blender, export the model to glTF and the load the file via GLTFLoader into your app like shown in the example.
In working with Three.js and I’ve run across several useful Helper classes that really make displaying and or modifying the scene much easier. There is one tool out there that I can’t seem to find again. It is kind of like the AxisHelper however it has a plane between the axis when you mouse over that area allowing the user to move the object along the xy, xz, or yz plane depending on what you pick. I’ve drawn an example of what it adds to the object in order to help the user move the object along the plane. If anyone knows of this tool or maybe an example of something that uses a utility like this, it would be great if you could point it out to me. Thanks.
I expect you are looking for TransformControls. There is a three.js example of its use here.
TransformControls is not part of the library -- it is part of the examples. You must include it explicitly in your project.
three.js r.80
i just started using the three.js library and have a question concerning decals:
I created a sphere with a texture on it. How is it possible to add another texture on top of it without repeating it. Short example: if my sphere gets "hit" i want to add another texture on it that looks like a bullethole - of course only on that certain point. Im thinking of a transparent .png-file for that.
Is that the right approach? Or do i have to make another sphere for each "impact" that is slightly bigger than the original sphere, and then give it the bullethole texture, which will be a transparent png, and find a way to only show it once on the new sphere with a certain size ?
Can somebody point me in the right direction? I'm new to 3D-Design / coding / threejs
Here's a samply video on youtube of somebody doing it by clicking on an object, but i've no clue how he did that:
http://www.youtube.com/watch?v=ckLghsutfmA
Thank you very much!
It seems that the author of the video you had linked released the code behind it on github:
https://github.com/benpurdy/threejs-decals
And here's another take on this:
https://github.com/spite/THREE.DecalGeometry
Both of these are based on the technique described here.
I'm building some sort of planetary system in three.js and I spent couple of hours looking for a decent solution to get an outer glow on one planet - a sphere object with a texture.
I came across this example http://stemkoski.github.io/Three.js/Selective-Glow.html which kind of does the trick, but the thing is - this form of glow also affects the main 3D object resulting in color change (as seen there).
Another nice glow example can be found here http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html but again it glows the entire region, not only "outer" thing.
I've been reading some discussion thread about "overrideMaterial" property on GitHub but this seems experimental, unused and undocumented... not even sure if this could solve my problem.
Please share your ideas, thanks!
I've worked a bit on separating out the part of the WebGL Globe code (linked to above) that produces the atmospheric effect. A preliminary working version is here:
http://stemkoski.github.io/Three.js/Atmosphere.html
To the best of my understanding, there are a few interesting things going on in the original code to create the atmospheric effect. First, the glowing texture is placed on another sphere -- let's call it the Atmo Sphere :) -- that surrounds the sphere with the image of earth on it. The Atmosphere material is flipped so that the front side does not render, only the back side, thus it does not obscure the earth sphere even though it surrounds it. Second, the gradient lighting effect is achieved by using a fragment shader rather than a texture. However, the atmosphere will change its appearance if you zoom in and out; this was not evident in the WebGL Globe experiment because zooming was disabled.
[updated April 30th]
Next, similar to the source code from
http://stemkoski.github.io/Three.js/Selective-Glow.html
the sphere with the gradient lighting texture (and another black-textured sphere) are placed in a second scene, and then the results from that scene are composed with the original scene using an additive blender. And just so you can experiment with the parameters used to create the glow effect, I have included a couple of sliders so that you can change the values and see the different glow effects that result.
I hope this helps you get started. Good luck!
[updated June 11]
I have a new example which achieves the same effect in a much simpler way, rather than using post-processing and additively blending two scenes, I just changed some of the parameters in the customized material. (It seems obvious in retrospect.) For an updated example, check out:
http://stemkoski.github.io/Three.js/Shader-Halo.html
Still haven't figured out the pan/zoom issues though.
[Updated July 24]
I figured out the pan/zoom issues. It requires using a shader; for details about the complexities, see the related question Three.js - shader code for halo effect, normals need transformation and for the final working example, see:
http://stemkoski.github.io/Three.js/Shader-Glow.html.
I'm pretty happy with the final result, so I will not be updating this answer any more :)
In the example you are referring to, I used a blue glow with additive blending -- if you used a white color instead maybe that would produce the effect you want.