My question refers to newest version 80 of Three.js.
I am using custom ShaderMaterial with lights and I want to incorporate shadows to the scene. I have followed this tutorial by Edan Kwan.
Unfortunately in rev 80 there is no longer ShaderChunk(shadowmap_fragment) available. I noticed that there is separate ShadowMaterial created (src/materials/ShadowMaterial.js ) but I don't know how to use it with my shader material. Could anyone advise how to use it? Thank you.
Related
I am currently trying to display a 3D room using Three.JS. I bought the model on SketchFab and I am using its GLTF format.
This model includes "baked-in" shadows using an occlusion map and a specular glossiness map.
I do not plan on having dynamic cast shadows so those baked shadows are just fine.
The model is properly imported using the GLTFLoader but my issue arise when I try to light my scene. I set up a basic HemisphereLight and for some reason all my shadows and lit areas are inversed as you can see in the screenshot below:
Screenshot
All the areas that are supposed to be shadows are lit and all the areas that are supposed to be lit are shadows.
I've been trying to solve this for a while now and have no idea where this behaviour is coming from. I also tried to use online GLTF viewer to see if there was any problem with the model itself but everything looks fine:
Screenshot 2
I'm working on a little project with react-three-fiber. If I load my .gbl 3D Model into the scene it's completly dark even if I use the ambientlight in the canvas. But in the three.js editor it looks exactly like I want it if I use the Modeviewer environment. Is it possbile to download this environmet somewhere and use it in my project?
yes, the stage component from the drei library https://twitter.com/0xca0a/status/1402975317174726656 all you need is wrap your model into <Stage>. as for models being dark even with ambientlight, this is usually related to wrong materials, for instance metalness=1. take a look here: https://discourse.threejs.org/t/ambient-light-and-gltf-models-not-working-results-in-black-model/7428/5
recently updated a simple three.js scene from ~ r74 to r94. Textured materials are loading correctly but LineBasicMaterial is not showing. All references to materials are giving the error ".shading has been removed. Use the boolean .flatShading instead."
I can't find where .shading is being referenced. I'm just using three.js, not referencing any other three-related js files.
I found one thread saying to check the dependencies have been updated, but I don't know how to do this and assumed everything was just in the three.js file.
Does anyone have any ideas where .shading is being set please?
Many thanks.
LineBasicMaterial does not respond to lights, and never has.
LineBasicMaterial does not utilize the .flatShading property.
The .flatShading property is only used when rendering meshes.
three.js r.94
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 am trying to simulate the OpenGL flat shading model using Three.js. My idea is creating an example like http://en.wikipedia.org/wiki/File:Phong-shading-sample.jpg. I was trying to change some different shading models but I cannot obtain the desired result.
Is it possible to create this scene in three.js?
Thanks in advance
Materials e.g. the MeshBasicMaterial have an option called "shading". It can be set to THREE.None, THREE.FlatShading, THREE.SmoothShading.
I am not sure if you need a light source in the first place or wether you have to enable shading for a the whole scene. Look at the demos at the Three.js website for something with shading.