在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>

three.js光源_css

现在运行页面,我们只能看到蓝色的背景和一块黑色的几何体,因为我们还没有加入灯光,所以一切的物体都是黑色的。立方体和地面的材质均为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>

three.js光源_html_02



<!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>

three.js光源_html_03

<!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>

three.js光源_html_04