here is simplified code of what i want to do in three.js
import * as THREE from "three";
// init scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, 1280 / 720, 0.1, 100);
camera.position.set(0, 0.5, 3);
const canvas = document.querySelector("canvas");
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
THREE.ColorManagement.enabled = true;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
// renderer.toneMappingExposure = 1.2;
scene.background = new THREE.Color(0x343434);
// lights
const ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
// directional light
const directional = new THREE.DirectionalLight(0xffffff, 3);
directional.shadow.mapSize.width = 1024; // default
directional.shadow.mapSize.height = 1024; // default
directional.shadow.camera.near = 0.5; // default
directional.shadow.camera.far = 100; // default
directional.shadow.camera.lefth = -100;
directional.shadow.camera.right = 100;
directional.shadow.camera.top = 100;
// directional.shadow.bias = -0.002;
// directional.shadow.normalBias = 0.02;
directional.shadow.camera.bottom = -100;
directional.position.set(2, 5, 2);
directional.castShadow = true;
scene.add(directional);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
///// creating objects
function MakeBox(position, size) {
let cube = new THREE.Mesh(
new THREE.BoxGeometry(...size),
new THREE.MeshPhongMaterial({
color: 0x003300,
})
);
cube.receiveShadow = true;
cube.castShadow = true;
cube.position.set(...position);
scene.add(cube);
}
[[[0, 0, 0],[2, 0.03, 0.3],],[[0, 0.5, 0],[2, 0.03, 0.3],],[[0, 1, 0],[2, 0.03, 0.3],],[[-1, 0.5, 0],[0.03, 1, 0.3],
],[[-0.5, 0.5, 0],[0.03, 1, 0.3],],[[0, 0.5, 0],[0.03, 1, 0.3],],[[0.5, 0.5, 0],[0.03, 1, 0.3],],[[1, 0.5, 0],[0.03, 1, 0.3],],].forEach((e) => {
MakeBox(...e);
});
// add wall
let plane = new THREE.Mesh(
new THREE.PlaneGeometry(10, 10),
new THREE.MeshPhongMaterial({
color: 0xffffff,
})
);
plane.receiveShadow = true;
plane.castShadow = false;
plane.position.set(0, 0, -0.15);
scene.add(plane);
renderer.render(scene, camera);
and the result of this is like this.
the shape i made is something like a bookshelf or wall storage.
but the shadow coming from it is weird.
and when i put some items on the shelves it gets more weirder…
cube is a little hovering over the shelf so it’s shadow must be drawn on shelf but it doesn’t work.
soft shadow is better than this but it’s still strange.
still no shadow of item.
i want to make the shadow work physically correctly…
the shadow on wall must look like the book case.
