HTML5 画布上的 Three.js 环境灯光(Html5 Canvas Three.js Ambient Lighting)
太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 - 本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
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./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.
|