未加星标

Three.js Lights and Cameras

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Lights can really make the difference between a seemingly flat scene and a visual masterpiece. Think of any photo-realistic painting or photograph and then imagine it with poor lighting and the impact is just not the same. Cameras change the way we view our scenes altogether, think of the different types of lenses photographers use and how they can influence the perspective and depth of a photo. Lights do not work on all materials. Lights do work with MeshLambertMaterial , MeshPhongMaterial and MeshStandardMaterial .

Lights

Lights are often an after thought, but lighting can really be the most important aspect of your scene. Three.js has a variety of built in lights to apply to materials like MeshLambertMaterial and MeshPhongMaterial . These lights effect the materials in different ways depending on the type of light and their properties as well as the properties of the materials themselves.

AmbientLight

The ambient light gets applied to all the objects in your scene globally. Ambient lights are often useful for filling parts of your scene not hit by other lights. This is because there's no relevant position or direction, it lights everything equally. You can set the color and the intensity of the ambient light.

var light = new THREE.AmbientLight(color, intensity);
Three.js Lights and Cameras
PointLight

Point lights are like light bulbs in your scene. They are positioned at a specific location and radiate light outwards in all directions from that postion. They have a color and intensity. Point lights allow you to set the distance from the light at which point it's intensity is zero. You can also set the decay which is the amount the light dims along the distance.

var light = new THREE.PointLight(color, intensity, distance, decay);
Three.js Lights and Cameras
DirectionalLight

Direcional lights resemble the Sun. They're a distant powerful light source pointing in one direction.

An important thing to note about directional lights is that its object rotation does not actually influence where it is pointing, instead it uses a target property which is an Object3D . This allows you to influence the direction of the light. Note this may change in the future, as of version 79 there are some issues filed here and here around target and the reflected matrix in the light object.

var light = new THREE.DirectionalLight(color, intensity);
Three.js Lights and Cameras
SpotLight

Spotlights are just that, spotlights. They are lights that point in one direction radiating out in a cone shape. We can pass an angle to the light as a parameter which is the maximum angle of the light cone in radians. Penumbra affects the intensity or softness of outer shadow or light fall-off as it fades to darkness.

Because spotlights have a direction they suffer from the same rotation behavior as directional lights, requiring them to point to a target object's position.

var light = new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay);
Three.js Lights and Cameras
HemisphereLight

Like ambient light, hemisphere light has no position or direction. But unlike ambient light it has two colors. One to simulate the color coming from above, like a sun or ceiling light source. The other is the color of light coming from below, to simulate the light reflected off the floor or ground surface. This is to provide a bit more realism than a globally applied ambient light.

var light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
Three.js Lights and Cameras
Shadows

Shadows occur when certain kinds of lights are blocked by an object. They can be cast by and received by objects. And can be cast on any material that supports lights. Shadows can only be cast by a DirectionalLight or SpotLight . To support shadows you need to perform some configuration on your renderer. First we need to enable shadowMap on our renderer by setting renderer.shadowMap.enabled to true. Then we need to specify the type of shadowMap we want to use. The default is PCFShadowMap , but Three.js also supports BasicShadowMap and PCFSoftShadowMap which provide different results.

renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap;

We then need to set up some properties on the light that will cast shadows. The first is to set the castShadow property to true. Then we set the shadow object which is a LightShadow that takes in a camera object defining the field of view, aspect ratio, near and far frustum planes. Then we can set other properties like the resolution of the shadows in the mapSize . And the bias which determines how much to add or subtract from the normalized depth to determine if a surface is in a shadow.

light.castShadow = true; light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 10, 2500 ) ); light.shadow.bias = 0.0001; light.shadow.mapSize.width = 2048; light.shadow.mapSize.height = 1024;

We then need to define which objects will cast shadows and which will receive shadows. We do this by setting these properties to true on the relevant objects. In the example below the cube will cast shadows but not receive shadows. The floor will recieve shadows from all objects casting shadows. The sphere will both cast and receive shadows.

cube.castShadow = true; sphere.castShadow = true; sphere.receiveShadow = true; floor.receiveShadow = true;
Three.js Lights and Cameras

Three.js also has a helper utility for visualizing what the shadow camera sees called ShadowMapViewer . Which can be found in their github repository . It's usage will also require the inclusion of a special UnpackDepthRGBAShader shader found in the github examples . You then need to set up the viewer object by passing it a reference to your light and setting the position and size of the viewer. You then call the update method and add its render call, passing in your renderer, inside your render loop.

shadowMapViewer = new THREE.ShadowMapViewer( light ); shadowMapViewer.position.x = 10; shadowMapViewer.position.y = 10; shadowMapViewer.size.width = 2048 / 4; shadowMapViewer.size.height = 1024 / 4; shadowMapViewer.update(); //Note: this goes inside render loop shadowMapViewer.render(renderer); Cameras

Cameras are a key tool for 3D influencing the user's vantage point and the range of their view. By manipulating the camera's position we can navigate our scene. Three.js has two basic types of cameras, the most common is PerspectiveCamera the other is OrthographicCamera

PerspectiveCamera

This creates a camera with perspective projection. This is a normal camera type where objects get smaller the further away they are. The first parameter is the camera's vertical field of view, from the bottom to top in degrees. The next is the aspect ratio of the camera so the viewport width divided by the height. The near and far plane determine the planes at which clipping occurs when objects are too close or too far away from the camera.

var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
Three.js Lights and Cameras
OrthographicCamera

An OrthographicCamera creates a camera with an orthographic projection, with no visible perspective. The result is an isometric view. This means that all lines along the z-axis of a cube will be drawn parallel. The properties passed here are the left, right, top, bottom, near and far frustum planes. So we're defining the visible area of our viewport.

var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
Three.js Lights and Cameras
CameraHelper

Cameras can be difficult to test and debug. Because of this Three.js has a CameraHelper which allows you to visualize the camera in space as well as it's frustum (viewable area). To use it you just add your camera to your scene and then pass it to the CameraHelper object and add that to your scene.

let helper = new THREE.CameraHelper(camera); scene.add(helper);
Three.js Lights and Cameras
Click here to download the demo. Note: these examples were created using Three.js v79. Three.js is known to update frequently and sometimes cause breaking changes to the API so it may be worth checking the version you are using.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Three.js Lights and Cameras
本站链接:http://www.codesec.net/view/479771.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(63)