Создайте очень мягкие тени в three.js?

Question

Можно ли создать очень мягкую/очень тонкую тень в three.js? как на этом рисунке?

все, что мне удалось сделать до сих пор это:

Мои огни:

hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, 0.9); 
ambientLight = new THREE.AmbientLight(0xdc8874, 0.5); 
shadowLight = new THREE.DirectionalLight(0xffffff, 1); 
shadowLight.position.set(5, 20, -5); 
shadowLight.castShadow = true; 
shadowLight.shadowCameraVisible = true; 
shadowLight.shadowDarkness = 0.5; 
shadowLight.shadow.camera.left = -500; 
shadowLight.shadow.camera.right = 500; 
shadowLight.shadow.camera.top = 500; 
shadowLight.shadow.camera.bottom = -500; 
shadowLight.shadow.camera.near = 1; 
shadowLight.shadow.camera.far = 1000; 
shadowLight.shadowCameraVisible = true; 
shadowLight.shadow.mapSize.width = 4096; // default is 512 
shadowLight.shadow.mapSize.height = 4096; // default is 512 

и делают:

renderer.shadowMapEnabled = true; 
renderer.shadowMapSoft = true; 
renderer.shadowMapType = THREE.PCFSoftShadowMap; 

благодарит вас

Answer 1

То, что вы ищете, называется Ambient Occlusion. Есть несколько вещей, которые уже доступны для просмотра, и вы, вероятно, можете найти больше, когда знаете, что искать. Например: Ambient occlusion in threejs

Answer 2

На самом деле это не окружающая окклюзия. АО - это только тень контакта между двумя сетками, которые очень близки друг к другу. Что вы ищете, эти мягкие тени, вы можете получить их двумя способами:

Первый, проще: создание световых карт в 3D-программном обеспечении, которое вы используете для создания своих моделей. То есть: выпекают тени (и окружающая окклюзия, если хотите, и даже текстуры и материалы) в 1 текстуру, которую вы можете использовать позже в ThreeJS. НО: вы не сможете перенести эти объекты позже ... или лучше сказали, вы сможете их перемещать, но их тени останутся в объектах, где они проецируются, когда вы испекли световую карту.

Другой способ делает что-то, как это делается в этом примере, но, к сожалению, я не смог пройти через это еще и я много не знаю об этом: http://helloracer.com/webgl/

Удачи с Это! С уважением.

EDIT: Извините ... 2-й вариант, тот, у которого есть автомобиль F1, по-прежнему является легкой картой :(Но эта тень сделана для того, чтобы следовать за автомобилем, поэтому эффект довольно приятный в конце. тень используется, она все запеченные, а не в реальном времени рассчитывается: http://helloracer.com/webgl/obj/textures/Shadow.jpg

Answer 3

вы можете снизить интенсивность направленного света и/или сделать его темнее:

shadowLight = new THREE.DirectionalLight(0x888888, 0.2); 

, а также снизить этот параметр :

shadowLight.shadowDarkness = 0.2; 

Попробуйте сыграть с этими тремя. это поддержка.

Answer 4

Мне тоже было интересно, поэтому я играл со всеми возможными vars, которые я нашел.Первые реальные изменения сделали это один в INIT:

shadowLight.shadow.mapSize.width = 2048; // You have there 4K no need to go over 2K 

shadowLight.shadow.mapSize.height = 2048; // - || - 

Тогда я испытанным что-то другое, и когда я установил:

shadowLight = new THREE.DirectionalLight(0xffffff(COLOR), 1.75(NEAR should in this case under 2), 1000 (FAR should just be the range between light/floor)); тени smothing более, когда я установил также мои направленные источники света расположить 250 с :

shadowLight.position.set(100(X just for some side effects), 250(Y over the scene), 0(Z)); 

!!!!!!!!!!!!!!!!! Удалить (VAR) детали перед использованием !!!!!!!!!!

Затем я меняю это значение на значение ширины пола.

d = 1000; 
shadowLight.shadow.camera.left = -d; 
shadowLight.shadow.camera.right = d; 
shadowLight.shadow.camera.top = d; 
shadowLight.shadow.camera.bottom = -d; 

, потому что если вы используете этот:

var helper = new THREE.CameraHelper(shadowLight.shadow.camera); 

словесно и в визуализации:

scenes.add(shadowLight, helper); 

... вы видите окно вашего света, и он должен быть увеличившихся в ваша сцена ширина сам считаю. Надеюсь, это поможет кому-то.