THREE.JSのトラブルキャスティングシャドウ

Question

いいえ。私は明らかにここに何かを欠いている。私は単に、このコードを陰影に変換しようとしています。私は影を受け取り、立方体と床の影を投げかけましたが、まだ表示されていません。これはこれほど難しいはずがありません。私は以前シャドウをキャストしていましたが、ここで何かを見逃しています。任意のアイデアが助けになります。私はシャドウを鋳造することがそれほど難しくないことを知っているので、私は迷っている。私は明らかなものを見逃しているに違いない。

ありがとうございます。

var camera, scene, renderer; 
var RED = 0xff3300; 

init(); 
render(); 
function init() { 
    renderer = new THREE.WebGLRenderer(); 
    //renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    - 
     document.body.appendChild(renderer.domElement); 
    camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 15000); 
    camera.position.set(1000, 500, 1000); 
    camera.lookAt(new THREE.Vector3(0, 200, 0)); 
    scene = new THREE.Scene(); 
    scene.background = new THREE.Color(0xcccccc); 
    var light = new THREE.SpotLight(0xdddddd, 1); 
    light.position.set(50, 600, 50); 
    scene.add(light); 

    var coloredCube = createCube(100, 100, 100, 0, 300, 0, 0, RED); 
    coloredCube.castShadow = true; 
    coloredCube.receiveShadow = true; 
    scene.add(coloredCube); 

    //create floor 
    var planeFloor = createSizedPlane(1000, 1000); 
    planeFloor = preparePlaneForScene(planeFloor, Math.PI/-2, 0, 0, 0, 0, 0); 
    planeFloor.castShadow = true; 
    planeFloor.receiveShadow = true; 
    scene.add(planeFloor); 

} 

function render() { 
    renderer.render(scene, camera); 
} 

function createSizedPlane(xSize, zSize, numberOfSegments) { 
    var planeGeometry = new THREE.PlaneGeometry(xSize, zSize, numberOfSegments); 
    planeGeometry.receiveShadow = true; 
    planeGeometry.castShadow = true; 
    var material = new THREE.MeshStandardMaterial({ 
      roughness: 0.8, 
      color: 0xffffff, 
      metalness: 0.2, 
      bumpScale: 0.0005, 
      opacity: 1, transparent: false 
     } 
    ); 

    return new THREE.Mesh(planeGeometry, material); 
} 

function preparePlaneForScene(plane, xRotation, yRotation, zRotation, xPosition, yPosition, zPosition) { 
    plane.rotation.x = xRotation; 
    plane.rotation.y = yRotation; 
    plane.rotation.z = zRotation; 
    plane.position.x = xPosition; 
    plane.position.y = yPosition; 
    plane.position.z = zPosition; 

    return plane; 
} 

function createCube(xSize, ySize, zSize, xPosition, yPosition, zPosition, yRotation, color) { 
    var cubeGeometry = new THREE.BoxGeometry(xSize, ySize, zSize); 
    var cubeMaterial = new THREE.MeshLambertMaterial({color: color}); 
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
    cube.position.x = xPosition; 
    cube.position.y = yPosition; 
    cube.position.z = zPosition; 
    cube.rotation.y = yRotation; 
    cube.castShadow = true; 
    cube.receiveShadow = true; 

    return cube; 
} 

Answer 1

レンダラのためのシャドウマップを有効にして、光のために影を落として：

renderer.shadowMap.enabled = true; 
renderer.shadowMap.type = THREE.PCFShadowMap; 

spotLight.castShadow = true; 
spotLight.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(60, 1, 1, 2500)); 
spotLight.shadow.bias = 0.0001; 
spotLight.shadow.mapSize.width = 1024; 
spotLight.shadow.mapSize.height = 1024; 

THREE.SpotLightShadowはあまりにも動作するはずです。

方向性ライトの場合、正投影が必要です（またはTHREE.DirectionalLightShadowを使用してください）。