HTML5 画布上的 Three.js 环境灯光（HTML5 Canvas Three.js Ambient Lighting）
太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)
本文遵循“署名-非商业用途-保持一致”创作公用协议
HTML5 画布上的 Three.js 环境灯光
HTML5 Canvas Three.js Ambient Lighting
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<script defer="defer">
// revolutions per second
var angularSpeed = 0.2;
var lastTime = 0;
// this function is executed on each animation frame
function animate(){
// update
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
cube.rotation.y += angleChange;
lastTime = time;
// render
renderer.render(scene, camera);
// request new frame
requestAnimationFrame(function(){
animate();
});
}
// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
// scene
var scene = new THREE.Scene();
// cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshLambertMaterial({
color: ‘blue‘
}));
cube.overdraw = true;
cube.rotation.x = Math.PI * 0.1;
scene.add(cube);
// add subtle blue ambient lighting
var ambientLight = new THREE.AmbientLight(0x000044);
scene.add(ambientLight);
// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// start animation
animate();
</script>
</body>
</html> 讨论
Discussion
要使用 Three.js 创建环境灯光，我们可以实例化一个 AmbientLight 对象，然后把它添加到场景中。环境灯光需要一个颜色来定义。环境灯光照亮整个场景，可用于柔化位置灯光，诸如 directional 灯光。
To create ambient lighting with Three.js, we can instantiate an AmbientLight object and then add it to the scene. AmbientLight requires is defined with a color. Ambient lights illuminate the entire scene and can be used to soften positional lights such as directional lights.
HTML5 画布上的 Three.js 环境灯光（HTML5 Canvas Three.js Ambient Lighting）,布布扣,bubuko.com
HTML5 画布上的 Three.js 环境灯光（HTML5 Canvas Three.js Ambient Lighting）
原文：http://blog.csdn.net/opengl_es/article/details/38360901