In the 62 version of Three.js library fine brilliant material. I can't pick up parameters for the same plausible gloss in the 67 version.
How to be? What need to be taken parameters for a material?
Example here
The material "Shininess" on each of them is different. Your r67 material has a shininess of 6 and your r62 material has a shininess of 50
Related
The Rubik's Cube I've modeled using STL parts is lighted from all 6 directions with directional lights. As can be seen, the recessed areas are more lighted than the surfaces. When I load and position the STL files into Blender, rendering is fine. So I think the files are OK.
So, how can I fix lighting? Note that setting castShadows/receiveShadows on light and materials (phong/lambert/standard) doesn't seem to change anything.
Code is at https://github.com/ittayd/rubiks_trainer/blob/master/js/three-cube.mjs#L134
I think what you're seeing makes sense. When a face is pointing straight down the axis they're only affected by the light in front of them. But when a face is halfway between axes, it's affected by more than one light, creating an additive effect. You could minimize this by adding shadows, but creating a new shadowmap for 3 lights is expensive.
The Rubik's cube has 26 pieces * 3 lights = 78 drawcalls
+26 pieces for the final render = 104 drawcalls per frame!
I recommend you just bake an ambient occlusion map with Blender, then use that in your material with .aoMap to simulate those darker crevasses very cheaply, and keep your performance smooth. Once you have your AO map, you can just use a single ambientLight to illuminate everything, without needing 5 different lights (More lights = more expensive renders).
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 have a model in Blender 2.8 ( and 2.79 ) with a grass texture on a plane. It's a field. No matter what I set the metalness and roughness to, when viewing it in ThreeJS there's always a whitish sheen on the field when looking at it from certain angles according to the sun position.
I think setting the specular color to black would remove that sheen, but I'm guessing this isn't currently possible to do because ThreeJS StandardMaterial doesn't control specular color..
So, basically, is there anyway to control the specular color on a ThreeJS StandardMaterial?
Use an environment map? Or change the color of your directional light?
I have a turn on spot animation that actually turns the player 61 degrees in maya. But when import the animation to unity and apply it to a animator controller to control a character, it turns the character 56 degrees. Why the turn angles are different?
Maya and some other 3D packages export their models with Z-axis faces upward. Standard scripts in Unity assume the Y-axis represents up in your world axis. It is better to fix the rotation in Unity than to modify the scripts to make things fit.
How do I fix the rotation of an imported model?
The same problem refers to orientation in Unity:
Rotation and Orientation in Unity
See also Euler vs Quaternion and The order of transformation in Maya.
I'm trying to use CanvasRenderer (three.js) as a fallback for devices not supporting WebGL. Is there some comparison page with explanation what is different and cannot be used with CanvasRenderer?
I'm experiencing two main issues:
flat shading, lights are completely missing (is MeshPhongMaterial supported?), I don't see any lighting nor shadows (are shadows supported in CanvasRenderer)? All I see is the diffuse texture without any lighting. In WebGL my current setup is PointLight, DirectionalLight, softShadows, antialiasing and MeshPhongMaterial (with diffuse, bump, spec and env map)
this.materialM = new THREE.MeshPhongMaterial({
ambient : 0x050505,
color : this.model.color,
specular : 0xcccccc,
shininess : 100,
bumpScale : BUMP_SCALE,
reflectivity : REFLECTIVITY,
});
transparent polygon edges (I know it can be tweaked with material.overdraw = 0.5 yet it produces other artifacts (as it probably does only some scaling of polys along the normal?), but I can do with this one
Any help on 1. or some general overview of what is not possible in CanvasRenderer when comparing to WebGLRenderer is greatly appreciated!
three.js r68
CanvasRenderer has limitations.
MeshPhongMaterial is not supported in CanvasRenderer -- it falls back to MeshLambertMaterial.
MeshLambertMaterial is supported, but not when the material has a texture -- it falls back to MeshBasicMaterial. ( MeshBasicMaterial is rendered without regards to scene lights. )
Shadows are not supported.
material.overdraw = 0.5 is helpful in hiding polygon edges when the material is opaque. It may still leave artifacts if the material is transparent.
three.js r.68