[英]Trouble Casting Shadows with THREE.JS
好的。 我显然在这里错过了一些东西。 我只是想让这段代码投下阴影。 我已打开接收阴影并为立方体和地板投射阴影,但是它仍然没有显示。 这不应该那么难。 在此之前,我曾使用过投射阴影,但现在我清除了一些遗漏。 任何想法都会有所帮助。 我很茫然,因为我知道投射阴影并不难。 我一定想念一些明显的东西。
提前致谢。
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;
}
为渲染器启用shadowMap并为光投射阴影:
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 )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.