0
我创建了一个带有浅色阴影，围绕它的墙和几个光源的场景。我希望墙壁上的灯罩内的聚光灯投射在墙上。我玩着聚光灯的参数，但我无法在墙上获得阴影。这里是我的代码：如何在three.js的周围墙上有一个灯罩的阴影
<html>
<head>
<title>Lightshade</title>
<script src="three.js"> </script>
<script src="TrackballControls.js"></script>
</head>
<body>
<script>
//declaring variables
var camera, scene, renderer;
var controls;
var cone, coneGeometry;
scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(-window.innerWidth/25, window.innerWidth/25, window.innerHeight/25, -window.innerHeight/25, -10000, 1000000);
camera.position.set(0, 2.0, 5.0);
camera.lookAt(scene.position);
//adding the renderer to the screen
renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setClearColor(0xeeeeee , 0); //eeeeee
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
document.body.appendChild(renderer.domElement);
//adding the camera interactive method
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.noKeys = true;
//creating materials for lightshade
BlightshadeMaterial = new THREE.MeshBasicMaterial({color:0xffeb00,wireframe:false, side:THREE.DoubleSide, ambient: 0xffffff});
lightshadeMaterial = new THREE.MeshPhongMaterial({color:0xffeb00,transparent: true,opacity: 0.6,wireframe:false, side:THREE.DoubleSide, ambient: 0xffffff});
// adding some light to the screen
var light3 = new THREE.PointLight(0xffffff, 1, 100);
light3.position.set(0, 30.0, 0);
scene.add(light3);
var light1 = new THREE.PointLight(0xffffff,0.7, 100 );
light1.position.set(0, 4.0, 0);
scene.add(light1);
var light2 = new THREE.PointLight(0xffffff, 0.7, 100 );
light2.position.set(0, -1.0, 0);
scene.add(light2);
var light4 = new THREE.PointLight(0xffffff, 1, 100);
light4.position.set(30.0, 16.0, 30.0);
scene.add(light4);
var light5 = new THREE.PointLight(0xffffff, 1, 100);
light5.position.set(-30.0, 16.0, 30.0);
scene.add(light5);
coneGeometry = new THREE.CylinderGeometry(5, 12.5, 15.0, 30, 20 , true);
cone = new THREE.Mesh(coneGeometry,lightshadeMaterial);
cone.castShadow = true;
scene.add(cone);
innerConeGeometry = new THREE.CylinderGeometry(4.5, 12.0, 15.0, 30,20 , true);
innerCone = new THREE.Mesh(innerConeGeometry,lightshadeMaterial);
innerCone.castShadow = true;
scene.add(innerCone);
upGeometry = new THREE.RingGeometry(4.5, 5.0, 30 ,3);
upSide = new THREE.Mesh(upGeometry, BlightshadeMaterial);
scene.add(upSide);
upSide.geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI/2));
upSide.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,7.5,0));
downGeometry = new THREE.RingGeometry(12.0, 12.5, 30 ,3);
downSide = new THREE.Mesh(downGeometry, BlightshadeMaterial);
scene.add(downSide);
downSide.geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI/2));
downSide.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,-7.5,0));
//Creating the shadow
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial({color: 0xffff00 }));
point.position.set(0,2.5,-1.0);
scene.add(point);
var spotlight = new THREE.SpotLight(0xffffff ,3, 800 , Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowCameraVisible = true;
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 300;
scene.add(spotlight);
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial({color: 0xffff00}));
point.position.set(1.0,2.5,0);
scene.add(point);
var spotlight = new THREE.SpotLight(0xffffff ,3, 800, Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 30.0;
scene.add(spotlight);
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial({color: 0xffff00}));
point.position.set(-1.0,2.5,0);
scene.add(point);
var spotlight = new THREE.SpotLight(0xffffff ,3, 800, Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 30.0;
scene.add(spotlight);
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial({color: 0xffff00}));
point.position.set(1.0,2.5,-1.0);
scene.add(point);
var spotlight = new THREE.SpotLight(0xffffff ,3, 800, Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 300;
scene.add(spotlight);
var point = new THREE.Mesh(new THREE.SphereGeometry(0.2), new THREE.MeshBasicMaterial({color: 0xffff00}));
point.position.set(-1.0,2.5,-1.0);
scene.add(point);
var spotlight = new THREE.SpotLight(0xffffff ,3, 800, Math.PI/4);
spotlight.target = point;
//to cast the light horizontally to the light shade
spotlight.position.set(0,2.5,0);
spotlight.shadowDarkness = 0.95;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
spotlight.shadowMapWidth = 512;
spotlight.shadowMapHeight = 512;
spotlight.shadowCameraFov = 30.0;
scene.add(spotlight);
//create walls and floor
var floorMaterial = new THREE.MeshPhongMaterial({side: THREE.DoubleSide});
var floorGeometry = new THREE.PlaneBufferGeometry(170, 170, 100, 100);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI/2;
floor.position.y = -70;
// Note the mesh is flagged to receive shadows
floor.castShadow= false;
floor.receiveShadow = true;
scene.add(floor);
//front wall
var frontMaterial = new THREE.MeshPhongMaterial({side: THREE.DoubleSide });
var frontGeometry = new THREE.PlaneBufferGeometry(170, 100, 100, 100);
var front = new THREE.Mesh(frontGeometry, frontMaterial);
front.position.z = -85;
front.position.y = -20;
//front.rotation.x = Math.PI/2;
// Note the mesh is flagged to receive shadows
front.castShadow= false;
front.receiveShadow = true;
scene.add(front);
//right wall
var rightMaterial = new THREE.MeshPhongMaterial({side: THREE.DoubleSide});
var rightGeometry = new THREE.PlaneBufferGeometry(170, 100, 100, 100);
var right = new THREE.Mesh(rightGeometry, rightMaterial);
right.rotation.y = Math.PI/2;
right.position.x = 85;
right.position.y = -20;
// Note the mesh is flagged to receive shadows
right.castShadow= false;
right.receiveShadow = true;
scene.add(right);
//left wall
var leftMaterial = new THREE.MeshPhongMaterial({side: THREE.DoubleSide});
var leftGeometry = new THREE.PlaneBufferGeometry(170, 100, 100, 100);
var left = new THREE.Mesh(leftGeometry, leftMaterial);
left.rotation.y = Math.PI/2;
left.position.x = -85;
left.position.y = -20;
// Note the mesh is flagged to receive shadows
left.castShadow= false;
left.receiveShadow = true;
scene.add(left);
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
controls.update();
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
另外，你是否知道任何其他更好的方式有阴影的光影在墙上。先谢谢你。