New in three.js, I would like to define several materials for a box geometry.
The idea is to make something like a a wood plank that has been painted on top and bottom (but not on the sides). Drilling the plank might induce seeing the internal material on the hole borders.
I though using THREE.MeshFaceMaterial but I do not know if it is the good way and how to do it as I need :
Material1 to be applied on Top and Bottom external only
Material2 to be applied on on all other faces (external and internal) and on top internal and bottom internal
Thank you for your help
Related
I want to render a room with a floor + roof that is open to one side. The room contains a point light and the "outside" it lit by an ambient light (the sun). There is one additional requirement: The user should be able to look inside the room to see whats going on. But I cannot simply remove the roof because then the room is fully lit by the ambient light.
I think my problem could be solved by having 3d objects that are transparent by still are blocking the light.
To give you an idea about my current scene, this is how it looks like:
The grey thing is the wall of my room. The black thing is the floor of the room. The green thing is the ground of the scene. The room contains a point light.
I am currently using two scenes (see Exclude Area from Directional/Ambient Lighting) because I wanted the inside of the room to be unaffected by the ambient light. But now my lights can only affect either the inside of my room (the point light) OR the outside (the ambient light) but not both.
A runnable sample of my scene can be found here:
https://codesandbox.io/s/confident-worker-64kg7m?file=/src/index.js
Again: I think that my problem could be solved by having transparent objects that still block the light. If I had that I would simply have a 3d plane on top of my room (as the roof) and make it transparent... It would block the light that is inside of the (but still let it go outside if the room is open) and it would also block the ambient light (partially - if the room is open)...
Maybe there is also another solution that I am not seeing.
Just use one scene instead of two, then enable shadows across the relevant meshes so a light doesn't cross from inside to outside. Once you're using only one scene, the steps to take in your demo are:
Disable AmbientLight, and use DirectionalLight only, since AmbientLight illuminates everything indiscriminately, and that's not what you want.
Place the directional light above your structure, so it shines from the top-down.
Enable shadow-casting on the walls
Add a ceiling mesh with the material's side set to side: THREE.BackSide. This will only render the back side of the Mesh, which means it won't be visible from above, but it will still cast shadows.
const roomCeilMat = new MeshStandardMaterial({
side: BackSide
});
const roomCeiling = new Mesh(roomFloorGeo, roomCeilMat);
roomCeiling.position.set(0, 0, 1);
roomCeiling.castShadow = true;
scene1.add(roomCeiling);
See here for a working copy of your demo:
https://codesandbox.io/s/stupefied-williams-qd7jmi?file=/src/index.js
I would assign a flat, emissive material to the room. Or a depth gradient if it becomes terrain. Since ambient light doesn't cast shadow. It saves a light and extra geometry or groups. Plus web model viewer(s) would probably render it better. If you're doing a reveal transition, use a clip plane or texture alpha mask.
It depends on the presentation versus the output format. Also it depends on the complexity of the final floorplan. If your process is simple it will run Sims Lite on a Raspberry Voxel.
I want to light up everything around the player in a similar way how directional light does with the whole scene. Since I'm working on an top-down view project, I should be able to see an elipse of light on the ground
I have tried to achieve the effect by using 2 layers: one for everything except area-to-be-lit, and another one containing area-to-be-lit and an extra light source:
new three.SpotLight(0xffffff, .6, 0, Math.PI / 3, 0, 0);
The light is always on the top of the player and the player is its target
It works, but there are 2 problems: it is not directional light, so I can't achieve those good-looking shades on different faces; and the light isn't making an elipse all the time:
When the light is casted on imported models, it is indeed a nice elipse on the ground around the player, but for programatically made geometries, it doesn't seem to be the case. My guess is that one face can only have 1 color applied from the light source, but making the geometry more complex will add additional overhead on top of the proper light calculations
I was thinking if it's possible to limit the directional light to affect just inside a sphere
I think you can make use of Layers : https://threejs.org/docs/#api/en/core/Layers
Also, try using a light from an HDR (Check PMREM Generator), it could give nice results that you can combine with your light and make the scene look better.
The material of section plane in Forge is as standard the fully colored faces with a hatch, while the section box has a transparent material (or no material at all?)
Is it possible to change between these, or in some way create own material to use on clipping planes?
I create the clipping planes through code already with
this.SectionExtension.tool.setSectionPlane(finalNormal, point)
Thanks for any pointers that could lead in the right direction.
Unfortunately, the viewer doesn't support change cap mesh materials since there is no API for this purpose. To remove cap meshes, I would advise you to set cut planes via Viewer3D#setCutPlanes.
For creating your own section box, you can refer to my answer here: How can I create section box in forge viewer, then you should be able to use this box to construct a box geometry for applying your won materials inside the viewer overlay or via the scene builder.
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
There is a TextGeometry mesh
Some BoxGeometry mesh as a background
How to make this glow between them?
I tried to put many PointLight between text and box, but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
The typical way of doing this is via post-processing. three.js offers a so called "Bloom" pass which is demonstrated in the following example: webgl_postprocessing_unreal_bloom. I suggest you start with this setup.
but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
It's no good approach in general to add that number of light sources to a three.js scene. If you place some small sphere meshes (based on THREE.SphereGeometry) with a bright material color onto the text, you should get a good result with bloom pass.
I'm looking for an way to give specify light for some objects.
I have added new light to object to remove shadow on it, but then, the other objects also affected by additional light, and I don't want it.
I have let the object's castShadow = false; receiveShadow = false, but it doesn't work.
When the camera is positioned with the light directions, camera will see the 'light' meshes, and at the opposite position, camera will see the dark side.
I want both sides to see 'light' meshes.
(I want to remove the shadow.)
Thanks for your help. :)
I have added new light to object to remove shadow on it, but then, the other objects also affected by additional light, and I don't want it.
What you are looking for is called "selective lighting" which is not yet supported by three.js. Check out the following issue for more information:
https://github.com/mrdoob/three.js/issues/5180
The only workaround right now is to work with multiple scenes and render passes.
When the camera is positioned with the light directions, camera will see the 'light' meshes, and at the opposite position, camera will see the dark side.
When using a single directional, point or spot light, it's normal that this setup produces a lit and unlit side of a sphere mesh. You can only avoid this by adding an additional light on the other side of the mesh, by using unlit materials or again by using different scenes with different lighting setups.
three.js R112