Three.JS学习 6：光源
本文学习内容主要来自：
http://www.hewebgl.com/article/getarticle/60
Three.JS中不同各类的光源
| 名字 | 描述 |
|---|---|
| THREE.AmbientLight | 基本光源，该淘汰的颜色将会叠加到场景现有物体的颜色上 |
| THREE.PointLight | 点光源，点光源不能用来创建阴影 |
| THREE.SpotLight | 聚光效果，类似台灯、天花板上的吊灯或手电筒，可以投射阴影 |
| THREE.DirectionalLight | 无限光/平行光，像太阳光 |
| THREE.HemisphereLight | 特殊的光源，可以通过模拟反光面和光线微弱的天空来创建更加自然的室外光线。这个淘汰也不提供阴影功能 |
| THREE.AreaLight | 可以指定散发光线的平面，而不是一个点。Three.AreaLight不投射任何阴影 |
| THREE.LensFlare | 这不是一种光源，但是通过使用THREE.LensFlare，可以为场景中的光源添加镜头光晕效果 |
光源基类
THREE.Light(hex)：参数是16进制颜色值，如：
var light=new THREE.Light(0xFF0000);派生光源
环境光
构造函数
var light = new THREE.AmbientLight( 0xff0000 );
scene.add( light );点光源
构造函数
PointLight( color, intensity, distance )参数说明
- color：光的颜色
- intensity：光的强度，默认为1.0，表示100%强度的灯光
- distance：光的距离，从光源所在位置，经过distance距离后，光的强度将从Intensity衰减为0.默认情况下，值为0.0，表示光源强度不衰减
示例
var light = new THREE.PointLight(0xFF0000);
light.position.set(0, 0,50);
scene.add(light);效果
聚光灯
效果
光线从一个锥体中射出，在被照射的物体上产生聚光的效果。
构造函数
THREE.SpotLight( hex, intensity, distance, angle, exponent )参数说明
- Hex：聚光灯发出的颜色，如0xFFFFFF
- Intensity：光源的强度，默认是1.0，如果为0.5，则强度是一半，意思是颜色会淡一些。和上面点光源一样
- Distance：光线的强度，从最大值衰减到0，需要的距离。 默认为0，表示光不衰减，如果非0，则表示从光源的位置到Distance的距离，光都在线性衰减。到离光源距离Distance时，光源强度为0
- Angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度
- exponent：光源模型中，衰减的一个参数，越大衰减约快
平行光（方向光）
构造函数
THREE.DirectionalLight = function ( hex, intensity )参数说明
- Hex：颜色
- Intensity：光线的强度，默认为1。值为8的时候，物体会显示黑色
示例
<html><head><meta charset="UTF-8"><title>Three框架title><script src="js/three.min.js">script><style type="text/css">div#canvas-frame {border: none;cursor: pointer;width: 100%;height: 600px;background-color: #EEEEEE;}style><script>var renderer,width,height;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.DirectionalLight(0xFF0000, 1);// 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不一样light.position.set(0, 0, 1);scene.add(light);// A end}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);}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>效果
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！