Three.JS 添加灯光、材质和阴影（第一个例子）
2017-07-16 13:38
429 查看
three.js中都多种灯光和材质，这里只是添加了一种灯光，聚光灯spotLight。
首先构建一个spotLight对象：
指定光源的位置，从何处开始照射：
把光源变量加入到场景：
材质：MeshBasicMaterial是基本的材质模型，它对光源产生任何反应。
MeshLambertMaterial 材质和MeshPhongMaterial材质会对光源产生反应。具体的区别不太了解。如果要物体对光照产生反应，把材质改为上述中的一种。
把第一个例子中的立方体的材质修改为 MeshLambertMaterial ：
阴影：Three.JS默认是不渲染出阴影的，这是比较耗费计算资源的。但是可以指定让渲染的时候渲染出阴影。
确定让渲染器渲染出阴影：
指出那个物体会接受物体投射出的阴影，就是说，物体投射出的阴影会显示在哪个物体。例子中，指定平面会接受物体投射出的阴影，就是说其他物体投射出的阴影会出现在平面上，不会跑到其他地方。
指定平面接受物体投射出的阴影：
指定那个物体会投射阴影，指定哪个物体会投射阴影，不指定的物体就不会投射阴影。
指定立方体投射会投射阴影：
最后，指定由哪个光源照射物体来投射阴影，并不是所有的光源都可以产生阴影。物体有阴影，必须要有光源照射吧！
指定由前面建立的聚光灯spotLight来照射物体产生阴影：
代码如下：
效果如下：
首先构建一个spotLight对象：
var spotLight = new THREE.SpotLight（0xFFFFFF）；
指定光源的位置，从何处开始照射：
spotLight.position.set（-40,60，-10）；
把光源变量加入到场景：
scene.add（spotLight）；
材质：MeshBasicMaterial是基本的材质模型，它对光源产生任何反应。
MeshLambertMaterial 材质和MeshPhongMaterial材质会对光源产生反应。具体的区别不太了解。如果要物体对光照产生反应，把材质改为上述中的一种。
把第一个例子中的立方体的材质修改为 MeshLambertMaterial ：
var cubeMaterial = new THREE.MeshLambertMaterial（{color:0xffffff}）;阴影：Three.JS默认是不渲染出阴影的，这是比较耗费计算资源的。但是可以指定让渲染的时候渲染出阴影。
确定让渲染器渲染出阴影：
renderer.shadowMapEnabled = true；
指出那个物体会接受物体投射出的阴影，就是说，物体投射出的阴影会显示在哪个物体。例子中，指定平面会接受物体投射出的阴影，就是说其他物体投射出的阴影会出现在平面上，不会跑到其他地方。
指定平面接受物体投射出的阴影：
plane.receiveShadow = true；
指定那个物体会投射阴影，指定哪个物体会投射阴影，不指定的物体就不会投射阴影。
指定立方体投射会投射阴影：
cube.castShadow = true；
最后，指定由哪个光源照射物体来投射阴影，并不是所有的光源都可以产生阴影。物体有阴影，必须要有光源照射吧！
指定由前面建立的聚光灯spotLight来照射物体产生阴影：
spotLight.castShadow = true；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js 第一章学习</title>
<!--需要的基本JS库-->
<script src="jquery19.js"></script>
<script src="three.js"></script>
<script src ="stats.js"></script>
<script src = "dat.gui.js"></script>
<script src = "controlKit.js"></script>
<!--给body加入一个样式，边框为0（零，不显示边框）；滚动条隐藏-->
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!--建立一个DIV，WebGL渲染的基本物体会在此处输出-->
<div id="WebGL-output">
</div>
<!--定义一个JQuery函数，所有的WebGL操作展示将在该函数中进行-->
<script type="text/javascript">
$(function () {
<!--构建场景-->
var scene = new THREE.Scene();
<!--建立相机，查看场景,透视相机-->
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
<!--构建渲染器，进行渲染-->
var renderer = new THREE.WebGLRenderer();
<!--渲染背景色,不知道为什么在此学习过程中，该函数setClearColorHex()老是提示错误？-->
// renderer.setClearColorHex(0xEEEEEE);
renderer.setClearColor(0xAAFFCC);
<!--渲染尺寸-->
renderer.setSize(window.innerWidth,window.innerHeight);
<!--告诉渲染器需要渲染出阴影-->
renderer.shadowMapEnabled = true;
<!--添加一个辅助坐标轴-->
var axes = new THREE.AxisHelper(20);
scene.add(axes);
<!--构建一个平面，物体将会放置在这个平面上-->
<!--平面尺寸，100x60，宽度方向平分几分，高度方向平分几分，如果参数最后2位不是（1,1），平面会显示为网格平面-->
var planeGeometry = new THREE.PlaneGeometry(100,60,10,10);
<!--平面材质,仅仅指定颜色 0xcccccc-->
// var planeMaterial = new THREE.MeshBasicMaterial({color:0xccaacc});
<!--临时修改材质为MeshLambertMaterial-->
var planeMaterial = new THREE.MeshLambertMaterial({color:0xFFFFFF});
<!--有尺寸和材质构建一个平面-->
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
<!--把平面选择-90°，方便观察-->
plane.rotation.x = -0.5*Math.PI;
<!--指定平面的位置-->
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
<!--指定平面接受阴影，就是物体投射出的阴影会出现在该平面上-->
plane.receiveShadow = true;
<!--把平面加入到场景中-->
scene.add(plane);
<!--建立物体，一个立方体，一个球体-->
<!--建立一个立方体-->
<!--指定立方体的几何尺寸，长宽高，不包括位置-->
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
<!--指定立方体的材质，仅仅指定颜色：0xFF0000，是否使用线框模式显示：是-->
// var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true});
<!--临时修改材质为MeshLambertMaterial-->
var cubeMaterial = new THREE.MeshLambertMaterial({color:0xFF0000});
<!--以给定的几何尺寸和材质构建一个立方体-->
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
<!--指定立方体的具体位置xyz-->
cube.position.x =-4;
cube.position.y =3;
cube.position.z = 0;
<!--指出物体会投射阴影-->
cube.castShadow = true;
<!--把建立的立方体放入场景-->
scene.add(cube);
<!--建立一个球体sphere-->
<!--指定球体的几何尺寸，不包括位置；最后2个参数感觉是指定网格密度-->
var sphereGeometry = new THREE.SphereGeometry(4,50,50);
<!--指定球体材质，仅仅指定颜色：0xFF0000，是否以线框形式显示：是-->
// var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});
<!--临时修改材质为MeshLambertMaterial-->
var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777FF});
<!--以给定的几何尺寸和材质，建立一个球体-->
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
<!--指定球体的位置 X Y Z-->
sphere.position.x =20;
sphere.position.y=4;
sphere.position.z = 0;
<!--指出物体会投射阴影-->
sphere.castShadow = true;
<!--把建立的球体加入到场景中-->
scene.add(sphere);
<!--建立一个聚光灯变量，用来照射物体来产生阴影-->
<!--建立一个spotLight变量，指定颜色：0xFFFFFF-->
var spotLight = new THREE.SpotLight(0xFFFFFF);
<!--指定spotLight的位置-->
spotLight.position.set(-40,60,-10);
<!--指出此光源照射物体，使物体产生阴影-->
spotLight.castShadow = true;
<!--把spotLight加入到场景中-->
scene.add(spotLight);
<!--指定相机的位置和方向，决定我们在场景中如何看，能看到什么-->
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
<!--利用JQuery查找到ID为WebGL-output的DIV，并把渲染到的东西输出到该DIV-->
$("#WebGL-output").append(renderer.domElement);
<!--利用渲染器以给定的相机去渲染场景-->
renderer.render(scene,camera);
}) ;
</script>
</body>
</html>效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Three.js 添加阴影
- threejs学习笔记--添加材质 灯光和阴影
- 第一个threejsplaygnd 3js
- 无需添加引用执行JS，发布无需带DLL、例子：QQMD5 QQGTK 13位时间戳 取随机数
- -Three.js开发指南---用three.js创建你的第一个三维场景（第一章）
- three.js 04-06 之 MeshLambertMaterial 材质
- three.js 04-07 之 MeshPhongMaterial 材质
- js给dropdownlist添加选项的小例子
- JS框架avalon简单例子 行编辑 添加 修改 删除 验证
- js添加、修改、删除xml节点例子
- 第一个Three.js程序——动手写一个简单的场景
- 第一章 用three.js创建你的第一个3D场景
- 第一个简单的three.js
- 33 Three.js的材质THREE.MeshBasicMaterial
- 38 Three.js高级材质THREE.ShaderMaterial
- three.js 04-08 之 ShaderMaterial 材质
- three.js 04-09 之 LineBasicMaterial 材质
- WebGL+Threejs阴影与画质提升，提…
- 第一个three.js程序