我对Three.js很新,但我不明白为什么这不起作用。我有一个非常简单的场景;聚光灯下的飞机上的立方体。我希望在立方体上有一个阴影投射在飞机上。立方体和平面渲染得很好,但阴影没有出现。
这是失败的尝试: http://www.owensouthwood.com/experiments/cubething/
我期待在立方体右下方的地板上出现阴影。
以下是init()
功能,您可以看到包含确保castShadow=true
和receiveShadow=true
的行 - 我还需要什么?
function init() {
// create new scene
scene = new THREE.Scene();
// setup renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(W,H);
renderer.shadowMapEnabled = true;
// setup camera pointing at scene
camera = new THREE.PerspectiveCamera( 45, W/H, 0.1 , 10000);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 1;
camera.lookAt(scene.position);
// draw a cube
var cubeWidth = 0.5;
var cubeHeight = 0.5;
var cubeDepth = 0.5;
var cubeGeometry = new THREE.CubeGeometry(cubeWidth, cubeHeight, cubeDepth);
var cubeMaterial = new THREE.MeshPhongMaterial({ color: "yellow", ambient: "white", shininess: 9, metal: true, reflectivity: 9 });
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// make the cube cast and recieve shadow
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);
// draw a floor (plane) for the cube to sit on
var planeGeometry = new THREE.PlaneGeometry(20, 20);
var planeMaterial = new THREE.MeshPhongMaterial({ color: "white" });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// make the plane recieve shadow from the cube
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.y = -2;
scene.add(plane);
// add a spotlight to illuminate the cube and cause shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(1, 2, 2);
spotLight.castShadow = true;
spotLight.intensity = 1;
scene.add(spotLight);
// render it!
document.body.appendChild(renderer.domElement);
render();
}
我做错了什么?
由于 欧文
答案 0 :(得分:0)
您需要使用以下行
spotLight.shadowCameraNear = 1;
因为.shadowCameraNear
接受数字所以它不能用作布尔值
答案 1 :(得分:-1)
已解决 - 虽然我不确定这是解决问题的正确方法,但似乎在我的聚光灯定义中添加以下行可解决问题:
spotLight.shadowCameraNear = true;