DirectinalLight-方向光源,可以看做是距离很远的光源。这个光源发出的所有光线都是互相平行的,如太阳光。被方向光光源照亮的整个区域接收到的光强是一样的。方向由位置和原点(0,0,0)来决定,方向光只与方向有关,与离物体的远近无关。
THREE.DirectionalLight = function ( hex, intensity ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 1, 0 );
this.target = new THREE.Object3D();
this.intensity = ( intensity !== undefined ) ? intensity : 1;
this.castShadow = false;
this.onlyShadow = false;
// more settings about shadow ......
};
hex: 光的颜色。
position: 一个位置,以该位置为起点,原点为终点的方向是光线的方向。
intensity:光线的密度,默认为1。因为RGB的三个值均在0~255之间,不能反映出光照的强度变化,光照越强,物体表面就更明亮。
distance:衰减距离,默认值为0,光照无衰减;如果是非0值,光照会从position位置(实际上是position所处的那个平面)开始衰减,衰减到distance距离之后,光照强度intensity为0。
castShadow:布尔值,控制是否产生阴影,默认为false。如果设为true,对于所有表面都会逐像元地计算其在光照方向上是否被遮挡,这会消耗大量的计算。
onlyShadow:布尔值,控制是否只产生阴影而不“照亮”物体,默认为false。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ThreeDirectionalLight</title>
<script src="js/three.js"></script>
<style type="text/css">
div#canvas-frame {
position:absolute;
top:10px;
bottom:10px;
right:10px;
left:10px;
border: 5px solid blue;
course:pointer;
background-color: #008855;
border-radius: 20px;
}
</style>
<script>
var renderer;
function initThree() {
width = document.getElementById('canvasframe').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});//生成渲染对象(属性:抗锯齿效果为设置有效)
renderer.setSize(width, height);//指定渲染器的宽高(和画布框大小一致)
document.getElementById('canvas-frame').appendChild(renderer.domElement);//将创建的canvas元素(此处的canvas元素为three.js创建)添加到html文档中
renderer.setClearColor(0xFFFFFF, 0.9);//设置渲染器的清除色和背景透明度
}
//此处为设置透视投影的相机,默认情况下,相机的上方向为Y轴,右方向为X轴,沿着Z轴垂直朝里(视眼角:fov;纵横比:aspect;相机离视最近的距离:near;相机离视体积最远距离:far)
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
//设置相机的位置坐标
camera.position.x = 600;
camera.position.y = 0;
camera.position.z = 600;
//设置相机的上为轴方向
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
//设置视野的中心坐标
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
//第一个参数 Hex:光的颜色 第二个参数 Intensity:光源的强度,默认是1.0,如果为0.5,则强度是一半,意思是颜色会淡一些
//第三个参数 Distance:光线的强度,从最大值衰减到0,需要的距离。 默认为0,表示光不衰减,如果非0,则表示从光源的位置到Distance的距离,光都在线性衰减。到离光源距离Distance时,光源强度为0.
light = new THREE.DirectionalLight(0xFF0000,1, 0);
// 位置不同,方向光作用于物体的面也不同,看到的物体各个面的颜色也不一样
light.position.set(0,0,1);//光源的向量,即光源的位置
scene.add(light);//追加光源到场景
}
//var cube;
function initObject() {
var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
var mesh = new THREE.Mesh( geometry,material);
mesh.position.set(0,0,0);
scene.add(mesh);
var geometry2 = new THREE.CubeGeometry( 200, 100, 50,4,4);
var material2 = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
var mesh2 = new THREE.Mesh( geometry2,material2);
mesh2.position.set(-300,0,0);
scene.add(mesh2);
var geometry3 = new THREE.CubeGeometry( 200, 100, 50,4,4);
var material3 = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
var mesh3 = new THREE.Mesh( geometry3,material3);
mesh3.position.set(0,-150,0);
scene.add(mesh3);
var mesh4 = new THREE.Mesh( geometry3,material3);
mesh4.position.set(0,150,0);
scene.add(mesh4);
var mesh5 = new THREE.Mesh( geometry3,material3);
mesh5.position.set(300,0,0);
scene.add(mesh5);
var mesh6 = new THREE.Mesh( geometry3,material3);
mesh6.position.set(0,0,-100);
scene.add(mesh6);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>