在Threejs中，光源用Light表示，它是所有光源的基类。它的构造函数是：
THREE.Light ( hex )
它有一个参数hex，接受一个16进制的颜色值。例如要定义一种红色的光源，我们可以这样来定义：
Var redLight = new THREE.Light(0xFF0000);
Three.js内置了多种光源可以直接调用：
- AmbientLight（环境光）
- AreaLight（区域光）
- DirectionalLight（平行光）
- HemisphereLight（半球光）
- PointLight（点光源）
- SpotLight（聚光灯）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个WebGL程序</title>
<style>body { margin: 0; overflow: hidden; }; canvas { width: 100%; height: 100%; }</style>
</head>
<body>
<script src="libs/three.js"></script>
<script>
//创建场景
var scene = new THREE.Scene();
//创建摄影机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(100, 100, 100);
camera.lookAt(scene.position);
//创建绿色立方体
var box = new THREE.Mesh(
new THREE.CubeGeometry(5, 5, 40),
new THREE.MeshLambertMaterial({
color: 0x00ff00
}));
box.position.set(10, 20, 10);
scene.add(box);
//创建红色地面
var ground = new THREE.Mesh(
new THREE.CubeGeometry(100, 1, 100),
new THREE.MeshLambertMaterial({
color: 0xff0000,
}));
ground.position.set(0, 5, 0);
ground.receiveShadow = true;
scene.add(ground);
//创建渲染器并把设置背景为蓝色
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0000ff, 1);
document.body.appendChild(renderer.domElement);
//渲染画面
renderer.render(scene, camera);
</script>
</body>
</html>
现在运行页面，我们只能看到蓝色的背景和一块黑色的几何体，因为我们还没有加入灯光，所以一切的物体都是黑色的。立方体和地面的材质均为MeshLambertMaterial（类似纸张，可以均匀反射接收到的光线）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个WebGL程序</title>
<style>body { margin: 0; overflow: hidden; }; canvas { width: 100%; height: 100%; }</style>
</head>
<body>
<script src="libs/three.js"></script>
<script>
//创建场景
var scene = new THREE.Scene();
//创建摄影机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(300, 300, 300);
//创建绿色立方体
var box = new THREE.Mesh(
new THREE.CubeGeometry(5, 5, 40),
new THREE.MeshLambertMaterial({
color: 0x00ff00
}));
box.position.set(0, 15, 0);
box.castShadow = true;
scene.add(box);
//创建红色地面
var ground = new THREE.Mesh(
new THREE.CubeGeometry(200, 1, 200),
new THREE.MeshLambertMaterial({
color: 0xff0000,
}));
ground.receiveShadow = true;
scene.add(ground);
//创建渲染器并把设置背景为蓝色
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0000ff);
renderer.shadowMapEnabled = true;
document.body.appendChild(renderer.domElement);
//添加聚光灯
var light = new THREE.SpotLight( 0xffffff, 3 );
light.position.set( 100, 200, 50 );
light.castShadow = true;
light.shadowCameraNear = 50;
light.shadowCameraFar = 300;
light.shadowCameraFov = 30;
scene.add( light );
//渲染画面
var render = function() {
requestAnimationFrame(render);
box.rotation.y += 0.01;
ground.rotation.y += 0.01;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="libs/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
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() {
}
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 = new THREE.Vector3(0,0,0);
scene.add(mesh);
}
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="libs/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
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() {
// A start
light = new THREE.AmbientLight(0xFF0000);
light.position.set(100, 100, 200);
scene.add(light);
// A end
}
var cube;
function initObject() {
var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
// B start
var material = new THREE.MeshLambertMaterial( { color:0x880000} );
// B end
var mesh = new THREE.Mesh( geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
}
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="libs/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
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() {
// A start
light = new THREE.AmbientLight(0xFF0000);
light.position.set(100, 100, 200);
scene.add(light);
// A end
}
var cube;
function initObject() {
var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
// B start
var material = new THREE.MeshLambertMaterial( { color:0x880000} );
// B end
var mesh = new THREE.Mesh( geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
}
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>
