THREE.js r75でシャドウはどのように機能しますか？

Question

私はThree.jsのチュートリアルに取り組んでいます。例では、castShadow、receiveShadow、shadowMapenabledをtrueに設定するなどの方法で利用できるシャドウの概念を示しています。

ただし、例コードはThree.js r69です。この質問の日付現在、Three.jsはr75にあり、この陰影を投影するためのコードは機能しません。

また、現在のThree.jsドキュメントには、shadowMapenabled、shadowMap.enabled、またはその他の方法についての情報がありません。

これを解決する方法の提案？

Answer 1

最近のバージョンでは、シャドウマップのプロパティの名前が変更されていますが、基本的に同じように動作します。

シャドウマップのレンダラーを設定する（そしてより多くの計算高価なシャドウマップの種類を選択）：

var renderer = new THREE.WebGLRenderer(); 
renderer.shadowMap.enabled = true; 
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap 

光（それはまたTHREE.PointLightでどのように機能するかに気づく）の設定：

var light = new THREE.PointLight(0xffffff, 1, 100); 
light.position.set(0, 12, 0); 
light.castShadow = true;   // default false 
light.shadow.mapSize.width = 1024; // default 512 
light.shadow.mapSize.height = 1024; // default 512 
light.shadow.camera.near = 2;  // default 0.5 
light.shadow.camera.far = 100;  // default 500 
//light.shadow.camera.left = 500 // Not sure about this one + 
            // right, top and bottom, Do they still do anything? 
scene.add(light); 

を

現在のドキュメントで指定されたプロパティを使用しようとしているときにコンソールをチェックすると、これらのAPIの変更がすべて通知されます。あなたの影を投げかけると受け取るオブジェクトの作成

は前と同じである：

//Creating box 
var boxGeometry = new THREE.BoxGeometry(1, 1, 1); 
var boxMaterial = new THREE.MeshPhongMaterial({ color: 0xdddddd, specular: 0x999999, shininess: 15, shading: THREE.FlatShading }); 
var box = new THREE.Mesh(boxGeometry, boxMaterial); 
box.castShadow = true; 
scene.add(box); 

creating plane 
var planeGeometry = new THREE.PlaneGeometry(20, 20, 32, 32); 
var planeMaterial = new THREE.MeshPhongMaterial({ color: 0x00dddd, specular: 0x009900, shininess: 10, shading: THREE.FlatShading }) 
var plane = new THREE.Mesh(planeGeometry, planeMaterial); 
plane.receiveShadow = true; 
scene.add(plane); 

は、ボックスの下に平面を配置し、それが影を受け取ることになります。ここで

がTHREE.jsの現在のバージョンで作業codepen example

EDIT で、シーンは表示する影のために少なくとも二回レンダリングする必要があります。ここで

Answer 2

three.js .Alsoシャドウの簡単なコードでは、シャドウカメラヘルパーその場合 var light = new THREE.SpotLight(0xFFAA55); light.castShadow = true; light.position.set(1, 3, 5); light.shadowCameraNear = 0.5; scene.add(light); helper = new THREE.CameraHelper(light.shadow.camera); scene.add(helper);

code