您的位置：首页 > Web前端 > JavaScript

three.js学习笔记光和影

2016-01-06 15:18 946 查看

three.js里面灯光主要有四种

1.AmbientLight(影响整个场景的光源)

AmbientLight的光线没有特定的来源，所以不需要指定位置信息。也不会对阴影的生成产生影响。

2.PointLight(照射所有方向的光源)

PointLight一般不用来产生阴影，PointLight的光线来自四面八方产生阴影会为GPU带来沉重负担。

3.SpotLight(具有锥形效果的光源)

SpotLight产生的阴影为圆锥形状。

4.DirectionLight(模拟远处类似太阳的光源)

DirectionLight产生的阴影为方块形状。

光源的几个主要属性：color:光源颜色

intensity:光源的强度默认值：1

distance:光源的照射距离

position:光源的所在位置

visible:光源是否可见

我们在场景中先添加了几个物体,然后添加了一个会移动的SpotLight光源便会看到物体阴影会随着光源变化而变化。

物体添加阴影：

1.渲染器开启shadowMap

renderer.shadowMapEnabled = true;

shadowMap的样式有 THREE.BasicShadowMap ， THREE.PCFShadowMap ， THREE.PCFSoftShadowMap 三种。参数为0-2。

如：设置shadowMap样式为 THREE.BasicShadowMap

renderer.shadowMap = 0;

2.灯光生成阴影

light.castShadow = true;

3.地面接收阴影

plane.receiveShadow = true;

4.物体产生阴影

mesh.castShadow = true;

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.js</title>
</head>
<body>
<script type="text/javascript" src="js/Three/three.js"></script>
<script>

var renderer, scene, camera, light, mesh, cylinder, plane;
var spotLight, sphereLightMesh;
var invert = 1;
var phase = 0;

function init() {

renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.lookAt(new THREE.Vector3(20, 0, 20));
camera.position.set(-50, 20, -50);

light = new THREE.AmbientLight(0xDDDDDD);
scene.add(light);

spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10, 60, 20);
spotLight.castShadow = true;
scene.add(spotLight);

document.body.appendChild(renderer.domElement);
creatCube();
render();
}

//添加物体及地面
function creatCube() {

var geometry = new THREE.CubeGeometry(4, 4, 4);
var material = new THREE.MeshLambertMaterial({
color: 0xff0000
});

mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.position.set(10, 10, 0);
mesh.rotation.set(Math.PI / 4, 0, 0);
scene.add(mesh);

var geometry = new THREE.CylinderGeometry(2, 2, 8);
var material = new THREE.MeshLambertMaterial({
color: 0xff0000
});

cylinder = new THREE.Mesh(geometry, material);
cylinder.position.set(-5, 10, 10);
cylinder.rotation.set(Math.PI /4, 0, 0);
cylinder.castShadow = true;
scene.add(cylinder);

var plane_geometry = new THREE.CubeGeometry(40, 1, 40);
var plane_material = new THREE.MeshLambertMaterial({
color: 0xffffff
});

plane = new THREE.Mesh(plane_geometry, plane_material);
plane.receiveShadow = true;
plane.position.set(10, 2, 10);
scene.add(plane);
}

//移动光源
function motionLight(light){
if (phase > 2 * Math.PI) {
invert = invert * -1;
phase -= 2 * Math.PI;
} else {
phase += 0.03;
}
light.position.z = +(7 * (Math.sin(phase)));
light.position.x = +(14 * (Math.cos(phase)));
if (invert < 0) {
var pivot = 14;
light.position.x = (invert * (light.position.x - pivot)) + pivot;
}
}

function render() {

requestAnimationFrame(render);
renderer.render(scene, camera);

motionLight(spotLight);

}
init();
</script>

</body>

</html>

fork me on github blog: https://chenjy1225.github.io/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript webgl three.js

相关文章推荐

新的分享

章节导航

three.js学习笔记 光和影

three.js学习笔记光和影