I have been experimenting with threejs for the past few days and have been experiencing inconsistencies in the lighting of my models. So I decided to do a little experiment. Here are side-by-side pictures of scenes containing the same model and the same lighting(Ambient, color: #FFFFFF, intensity: 0.3) one created using javascript and the other using threejs editor:
Using threejs editor
Using JS
Why are the colors and lighting different? Am I missing something?
You probably have not configured a sRGB workflow in your app. So try it with the following line:
renderer.outputEncoding = THREE.sRGBEncoding;
Related
I took an equirectangular envMap from the three.js docs sample where it appears sharp on a sphere.
If I load the same material into my aframe scene with the following params
material="spherical-env-map: /assets/models/1/envtest.jpeg; roughness: 0; metalness: 1"
it appears blurry like this
What am I doing wrong?
Reproducible example via glitch: https://glitch.com/edit/#!/sepia-forest-keyboard
What I have noticed when setting up the glitch:
Using Aframe 1.0.3 it is blurry
Using Aframe 1.2.0 it remains black no matter what I do
That happens because you are using a PBR material in your code since the default material of A-Frame is MeshStandardMaterial. Meaning a material that tries to render physically correct. The official three.js example uses MeshLambertMaterial which is no PBR material. Both type of materials implement environment maps differently.
When using a PBR material, it's recommended to use a HDR environment map which is also pre-processed with PMREMGenerator like in this example: https://threejs.org/examples/webgl_loader_gltf
Just swapped from the older GLTF Blender exporter to the newer import/export version. Upon doing so, my meshes got significantly darker, and I can't figure out why.
mesh lighting sample :
The left is the older Blender > GLTF exporter, and the right is the newer one. Gamma is set to true, and I've played around with various options within Blender, as well as three.js lighting intensity, etc. (jacking the intensity up to make it look reasonable makes the shadows disappear). It renders the same in Mccurdy's GLTF viewer, and none of the lighting sliders get anywhere close to the lighting from the prior GLTF exporter. I need to use the new version for animation and morph playback purposes. Thanks as always for any suggestions.
Just in case it's helpful to anyone else, apparently the newer Blender > GLTF exporter defaulted to THREE.MeshStandardMaterial. I swapped to THREE.MeshLambertMaterial and the problem was solved.
const oldMat = child.material;
const newMat = new THREE.MeshLambertMaterial({
color: oldMat.color,
map: oldMat.map
});
child.material = newMat;
I'm new to both Blender and ThreeJs and searched a lot before asking. I created a model with Blender and esported it as .dae so I can load it in the html canvas. The problem is that only the model is loaded and not the textures. I'm doing something wrong or it's the loader that somehow causes the problem?
Here is the sample:
http://provasitimek.herobo.com/firstImport2.html
and the code:
https://github.com/MarcinKwiatkowski1988/learningThreeJs/tree/master/ThreeJs_and_blender
PS. the blender version is 2.70 (so maybe the problem lays here?)
PS2: So, after many attempts, these are my conclusions:
to get the color of the object, you have to choose the Blender renderer and not Cycles renderer
the export to the file .dae is not realy significant, should working with all options (or at least I didn't find any differences between files exported with different options)
if you use Blender renderer and any basic materials (Basic, Lambert, Phong) you get only the color on the object rendered in threeJs: so, for example, if you apply a trasparency to you object on blender, you will not see it on the rendered object on threeJs
with my current level (i just started to learn threeJs and blender 2 weeks ago) this is as far as I can help. Hope someone with higher skills like #mrdoob would figure out what the problem is
THREE.js does not pair models and textures until you actually make a mesh. Export The model and texture separately, load them separately and call
new THREE.Mesh(blenderGeometry,blenderTexure)
I'm creating terrain editor with three.js and i have encountered few problems.
First. Shadows renders on MeshLambertMaterial, but it wont on ShaderMaterial.
Second. How to change object's material (from lambert to shader) on runtime?
Here's demo of my editor: http://78.62.160.169/webgl/editor/
And source code: http://78.62.160.169/webgl/editor/script.js
LambertMaterial is a built-in material, that's supported by the plugins. So shadow plugin supports rendering on the LambertMaterial, while ShaderMaterial is your own shader/material, that should manually enable shadow support, it's not set by the default.
Switching material: https://github.com/mrdoob/three.js/wiki/Updates
here is the example of ShaderMaterial with shadow and fog
https://gist.github.com/wmcmurray/6696fc95f25bbd2401d72a74e9493261
or you can also rewrite a shader from LambertMaterial or other,
make it support your own shader
I fall back to CanvasRenderer if user's browser does not support WebGL. I would like to have wireframe only rendering when using CanvasRenderer for performance reasons. However I cannot get overrideMaterial to work with it. It's working with WebGLRendererer quite nicely like this:
scene.overrideMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
In CanvasRenderer this seems to have no effect, making FireFox unresponsive because the code is just too heavy for all but the simplest models.
Previously I had replaced all object materials directly with wireframe material by traversing the scene geometries and just overwriting the "real" materials. That kind of works, but makes material and object management guite messy, as I would like to have the material information present in the models even if they are not rendered.
Is it possible use scene.overrideMaterial with CanvasRenderer? Or other way to force wireframe rendering? I'm using r54.
No, CanvasRenderer does not support scene.overrideMaterial. I think you have pretty much exhausted your options.
I would be careful about using MeshBasicMaterial as an override. Only do so if your scene contains meshes only -- no lines, for example.
three.js r.54