阴影效果没有实现,求大神指教

jike_19851781 WebGL Three.js ... 2016年11月01日提问

  • 0 回答
  • 553 浏览

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>three.js demo2</title>

<script src="js/three.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">

body{margin: 0;padding: 0;}

</style>

</head>

<body>

<script type="text/javascript">

var scene = new THREE.Scene();//创建一个场景

var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1000);//创建一个相机

var renderer = new THREE.WebGLRenderer();//创建绘制的对象

renderer.setClearColor(new THREE.Color(0xEEEEEE,1.0))//设置绘制对象的背景色 

renderer.setSize(window.innerWidth,window.innerHeight);

//启动阴影效果,阴影本身的生成很消耗性能,最好在需要的时候再启用它

renderer.shadowMapEnabled = true ;

//开始绘制图形

var planeGeometry = new THREE.PlaneGeometry(60,20);//创建矩形

var planeMaterial = new THREE.MeshBasicMaterial({color:0xffffff});//创建对光源有反应的材质

var plane = new THREE.Mesh(planeGeometry,planeMaterial);//创建一个对光源有反射效果的平面

plane.receiveShadow = true;//开启阴影效果

//对plane进行旋转和偏移

plane.rotation.x = -.5*Math.PI;

plane.position.x = 15;

plane.position.y = 0;

plane.position.z = 0;

scene.add(plane);//把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.x = -.4;

cube.position.y = 3;

cube.position.z = 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.position.x = 20;

sphere.position.y = 4;

sphere.position.z = 2;

//开启阴影特效

sphere.castShadow = true ;

scene.add(sphere);//把球体加入到场景中

//设置相机观察点

camera.position.x = -30;

camera.position.y = 40;

camera.position.z = 30;

camera.lookAt(scene.position)//设置相机观察的位置

//设置光源*重点*

var spotLight = new THREE.SpotLight(0xffffff);//创建光源

spotLight.position.set(-40,60,5);//设置光源的位置

spotLight.castShadow = true ;//开启光源的阴影特效

scene.add(spotLight)//把光源加入到 场景中

document.body.appendChild(renderer.domElement);//把场景添加到网页中

renderer.render(scene,camera)//渲染场景

</script>

</body>

</html>

1lb5tkyau8sl3.png