无法添加阴影

我刚开始学习three.js，但无法在平面上放置物体的阴影。所有的东西都在工作，但物体没有在平面上投射阴影。这是我的js文件。我不知道代码中缺少什么。随信附上HTML和javascript文件。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script type = "text/javascript" src="../../../libs/three/three.js"></script>
<script type="text/javascript" src = "../../../libs/three/controls/TrackballControls.js"></script>
<script type="text/javascript" src = "../javascript/first_scene.js"></script>
<title>First_Scene</title>
</head>
<body>
<div id ="webgl-output"></div>
<script type="text/javascript">
(function(){
init()
}
)();
</script>
</body>
</html>

function init()
{
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth /
window.innerHeight,0.1, 1000);
var renderer =new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.Enabled = true;
var axes = new THREE.AxesHelper(20);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1)
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15,0,0);
scene.add(plane); 
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.set(-4, 4, 0);
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777ff,
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true;
sphere.position.set(20, 0, 2);
sphere.castShadow = true;
scene.add(sphere);
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
var ambienLight = new THREE.AmbientLight(0x353535);
scene.add(ambienLight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10, 20, -5);
spotLight.castShadow = true;
scene.add(spotLight);  
document.getElementById("webgl-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
}

您的代码中有一个错别字。不是renderer.shadowMap.Enabled，而是renderer.shadowMap.enabled。完整代码:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth /
window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
var axes = new THREE.AxesHelper(20);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1)
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);
scene.add(plane);
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.set(-4, 4, 0);
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777ff,
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true;
sphere.position.set(20, 0, 2);
scene.add(sphere);
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
var ambienLight = new THREE.AmbientLight(0x353535);
scene.add(ambienLight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10, 20, -5);
spotLight.castShadow = true;
scene.add(spotLight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

body {
margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

相关内容

最新更新

热门标签：