3
私はthree.jsを使ってモデルを持つシーンを作成しています。私はモデルが座っている飛行機を持っていて、モデルに輝くスポットライトを持っています。なぜ私のPlaneGeometryは影を受け取りませんか？
モデルはさまざまなオブジェクトで構成されています。すべてのオブジェクトは影を受け取ってキャストするように設定されています。影はモデルの他の領域からモデル自体にキャストされています。
ただし、プレーンには影が付きません。なぜ私は分かりません。
私はspotLight.shadowCameraNearとspotLight.shadowCameraFarのプロパティを調整して、モデルと平面の両方がシャドウ領域内にあることを確認しました。まだ何も。
以下は、スポットライトが表示されたモデルのスクリーンショットです。 
私はシャドウマップが有効とソフトのマップに設定されている次のよう
renderer.shadowMap.enabled = true; // Shadow map enabled
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
私のコードは次のとおりです。
<script>
if (! Detector.webgl) Detector.addGetWebGLMessage();
var container, stats, controls;
var camera, scene, renderer, sceneAnimationClip ;
var clock = new THREE.Clock();
var mixers = [];
var globalObjects = [];
init();
function init() {
var loader = new THREE.TextureLoader();
container = document.createElement('div');
document.body.appendChild(container);
// Scene
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xffffff, 50, 100);
// Camera
camera = new THREE.PerspectiveCamera(30, (window.innerWidth/window.innerHeight), 1, 10000);
camera.position.x = 1000;
camera.position.y = 50;
camera.position.z = 1500;
scene.add(camera);
// LIGHTS
var spotLight = new THREE.SpotLight(0xffffff,1);
spotLight.position.set(5, 5, 6);
spotLight.castShadow = true;
spotLight.target.position.set(-1, 0, 2);
spotLight.shadowDarkness = 0.5;
spotLight.shadowCameraNear = 4;
spotLight.shadowCameraFar = 25;
scene.add(spotLight);
// Camera helper for spotlight
var helper = new THREE.CameraHelper(spotLight.shadow.camera);
scene.add(helper);
// ground
var geometry = new THREE.PlaneGeometry(30, 30);
geometry.receiveShadow = true;
var material = new THREE.MeshBasicMaterial({color: 0xcccccc, side: THREE.DoubleSide});
material.receiveShadow = true;
var floor = new THREE.Mesh(geometry, material);
floor.receiveShadow = true;
floor.position.y = -1;
floor.rotation.x = Math.PI/2;
scene.add(floor);
// stats
stats = new Stats();
container.appendChild(stats.dom);
// model
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {
console.log(item, loaded, total);
};
// BEGIN Clara.io JSON loader code
var i = 0;
var objectLoader = new THREE.ObjectLoader();
objectLoader.load("final-master-20170426.json", function (object) {
var textureLoader = new THREE.TextureLoader();
object.traverse(function (child)
{
if (child instanceof THREE.Mesh) {
var material = child.material.clone();
material.shininess = 0;
material.wireframe = false;
material.normalScale = new THREE.Vector2(1, 1);
/* Roof Glass */
if(child.name == 'Roof_Glass') {
material.shininess = 100;
material.alphaMap = grayscale;
material.transparent = true;
}
// Beading
if(child.name.endsWith('_Beading')) {
material.color.setHex(0x1e1e1e);
material.shininess = 100;
}
/* Pillars */
if(
child.name.indexOf('Pillar') == 0 ||
child.name == 'Main_Frame' ||
child.name == 'Main_Cross_Supports' ||
child.name == 'roof_batons' ||
child.name == 'Roof_Flashings'
) {
material.color.setHex(0x1e1e1e);
material.shininess = 100;
}
/* Lamps */
if(child.name.indexOf('Lamp') == 0) {
material.color.setHex(0x1e1e1e);
material.shininess = 100;
}
// Set shadows for everything
material.castShadow = true;
material.receiveShadow = true;
child.material = material;
material = undefined;
globalObjects[child.name] = child;
console.log(child);
}
});
object.position.y = -1;
object.position.x = 0;
scene.add(object);
scene.fog = new THREE.Fog(0xffffff, 50, 100);
i++;
});
// END Clara.io JSON loader code
renderer = new THREE.WebGLRenderer({
'antialias': true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(scene.fog.color);
container.appendChild(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true; // Shadow map enabled
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// controls, camera
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.maxPolarAngle = Math.PI * 0.5;
camera.position.set(8, 3, 10);
controls.update();
window.addEventListener('resize', onWindowResize, false);
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
stats.update();
render();
}
function render() {
var delta = 0.75 * clock.getDelta();
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>