Hi all,
Please help, I am new to three js and received a GLB model, which was created in 3ds max and i need to recreate the same scene in three js. This is how the scene should look like:
GLB model contains everything except trees and grass, but this is what happens when i load it to babylon sandbox:
And this is what happens when i load the model in my scene:
This is some of the code i use:
const renderer = new THREE.WebGLRenderer({antialias: true });
renderer.setPixelRatio(2);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
...
const directionalLight = new THREE.DirectionalLight(0xffffff, 6);
...
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
...
const camera = new THREE.PerspectiveCamera(60, 1, 0.01, 100)
I wanted to upload the model here , but it weights 180 MB and i can not do a demo anywhere…
The goal is to have almost 1 to 1 with the image in 3ds max, with good looking textures and reflections
If any more information/files are needed, just tell me how can i pass it to you
Any help will be highly appreciated, thanks
In such case just bake direct and indirect lighting into textures and apply them in three.js - you’ll get a static-only, but 1:1, lighting. Alternatively, you can try using gpu-pathtracer, but it won’t be realtime. Besides that, replicating 3DSMax pathtraced lighting with three.js’s default WebGLRenderer is not really possible, primarily due to lack of GI.
Thanks, i think that having tracers is not needed, but at least some light reflections
I tried adding HDR environment, disabled all the lights but it does not seem to work fine with me, the model is now too bright and there are no shadows:
Could you please help to resolve it?
scene = new THREE.Scene();
const rgbeLoader = new RGBELoader();
const hdrEnv = await rgbeLoader.loadAsync(getAsset("meadow.hdr"));
hdrEnv.mapping = THREE.EquirectangularReflectionMapping;
scene.background = hdrEnv;
scene.environment = hdrEnv;
...
function getRenderer() {
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
return renderer;
...
async function loadModel() {
const loader = new GLTFLoader();
const model = await loader.loadAsync(getAsset("model_14.glb"));
model.scene.traverse((child) => {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
if (child.material.map) {
child.material.map.magFilter = THREE.LinearFilter;
child.material.map.minFilter = THREE.LinearMipmapLinearFilter;
}
}
});
return model.scene;
}
}
There’s no resolving it tho - besides adding lights and trying to fake the final effect to look as close as possible. Three.js rendering is just completely different than the pathtraced renderers. As an example, HDRIs / IBL environments applied in three.js are just sampling a color based on the direction of the surface - so there’s no shadows or occlusion involved. IBLs will brighten shadows applied by DirectionalLights and PointLights, but won’t create additional shadows / shades, since the calculations aren’t aware of the vertex surroundings.
You can lower intensity of the IBL - and compensate that with additional DirectionalLight / HemisphereLight faking indirect sunlight.
As above - do you need the lights or the model to be dynamic / moving in any significant way? If no, consider just baking the lights - a bit way faster and simpler.
1 Like
Thanks a lot for quick reply!
I see, so it is no possible to have the same image. The light should be in such position to have similar shadows as on 3ds max image, something like this (it is already with environment and shadows)
Sorry, i do not know what does “baking the lights” mean. Could you please explain?
Option A, baking in 3D software: https://www.youtube.com/watch?v=F73WLkm0Qm0
Option B, baking during rendering:
-
if you use react-three-fiber, you can try using SoftShadows from drei (don’t use AccumulativeShadows tho, they affect only a small plane on ground level, won’t cast shadows on anything besides that)
-
Take a look at progressive shadows example (code in the bottom right); this one looks pretty, as it’s basically doing the light/shadow baking Blender does but on the go, but you’ll need to code most of it by hand - the example implementation doesn’t work with textured objects.
1 Like
