<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adding Light And Cast Shadow</title>
<script src="../../three-part/threejs/three.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
init();
function init(){
// Scenes allow you to set up what and where is to be rendered by three.js.
// This is where you place objects, lights and cameras.
let scene = new THREE.Scene();
/**
* Camera that uses perspective projection
* PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
* fov — Camera frustum vertical field of view.
* aspect — Camera frustum aspect ratio.
* near — Camera frustum near plane.
* far — Camera frustum far plane.
*/
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// The WebGL renderer displays your beautifully crafted scenes using WebGL.
let render = new THREE.WebGLRenderer();
// Sets the clear color and opacity.
render.setClearColor(new THREE.Color(0x000000));
render.setSize(window.innerWidth, window.innerHeight);
// If set, use shadow maps in the scene. Default is false.
render.shadowMap.enabled = true;
/**
* An axis object to visualize the 3 axes in a simple way.
* The X axis is red. The Y axis is green. The Z axis is blue.
* AxesHelper( size : Number )
* size -- (optional) size of the lines representing the axes. Default is 1.
*/
let axes = new THREE.AxesHelper(20);
scene.add(axes);
// create a plane
/**
* PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
* width — Width along the X axis. Default is 1.
* height — Height along the Y axis. Default is 1.
* widthSegments — Optional. Default is 1.
* heightSegments — Optional. Default is 1.
* @type {PlaneGeometry}
*/
let planeGeometry = new THREE.PlaneGeometry(60, 20, 4, 4);
// A material for drawing geometries in a simple shaded (flat or wireframe) way.
let planeMaterial = new THREE.MeshLambertMaterial({
color : 0xaaaaa
});
/**
* Representing triangular polygon mesh based objects
* Mesh( geometry : Geometry, material : Material )
* geometry — (optional) an instance of Geometry or BufferGeometry. Default is a new BufferGeometry.
* material — (optional) a single or an array of Material. Default is a new MeshBasicMaterial
* @type {Raycaster.params.Mesh|Mesh}
*/
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);
// Whether the material receives shadows. Default is false.
plane.receiveShadow = true;
scene.add(plane);
// create a cube
/**
* BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'.
* On creation, the cuboid is centred on the origin, with each edge parallel to one of the axes.
* BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
* width — Width; that is, the length of the edges parallel to the X axis. Optional; defaults to 1.
* height — Height; that is, the length of the edges parallel to the Y axis. Optional; defaults to 1.
* depth — Depth; that is, the length of the edges parallel to the Z axis. Optional; defaults to 1.
* widthSegments — Number of segmented rectangular faces along the width of the sides. Optional; defaults to 1.
* heightSegments — Number of segmented rectangular faces along the height of the sides. Optional; defaults to 1.
* depthSegments — Number of segmented rectangular faces along the depth of the sides. Optional; defaults to 1.
* @type {BoxGeometry}
*/
let cubeGeometry = new THREE.BoxGeometry(6, 6, 6, 3, 3, 3);
// The material uses a non-physically based Lambertian model for calculating reflectance.
// This can simulate some surfaces (such as untreated wood or stone) well,
// but cannot simulate shiny surfaces with specular highlights (such as varnished wood).
let cubeMatrial = new THREE.MeshLambertMaterial({
color : 0xff0000
});
let cube = new THREE.Mesh(cubeGeometry, cubeMatrial);
cube.position.set(0, 4, 0);
// Whether the object gets rendered into shadow map. Default is false.
cube.castShadow = true;
scene.add(cube);
// create a sphere
/**
* A class for generating sphere geometries
* SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
* radius — sphere radius. Default is 1.
* widthSegments — number of horizontal segments. Minimum value is 3, and the default is 8.
* heightSegments — number of vertical segments. Minimum value is 2, and the default is 6.
* phiStart — specify horizontal starting angle. Default is 0.
* phiLength — specify horizontal sweep angle size. Default is Math.PI * 2.
* thetaStart — specify vertical starting angle. Default is 0.
* thetaLength — specify vertical sweep angle size. Default is Math.PI.
* @type {SphereGeometry}
*/
let sphereGeometry = new THREE.SphereGeometry(4, 20, 20, 0, Math.PI, 0, Math.PI / 2);
let sphereMatrial = new THREE.MeshLambertMaterial({
color : 0x7777ff
});
let sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);
sphere.position.set(20, 4, 2);
sphere.castShadow = true;
scene.add(sphere);
// add a spotlight
/**
* This light gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets.
* SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
* color - (optional) hexadecimal color of the light. Default is 0xffffff (white).
* intensity - (optional) numeric value of the light's strength/intensity. Default is 1.
* distance - Maximum range of the light. Default is 0 (no limit).
* angle - Maximum angle of light dispersion from its direction whose upper bound is Math.PI/2.
* penumbra - Percent of the spotlight cone that is attenuated due to penumbra. Takes values between zero and 1. Default is zero.
* decay - The amount the light dims along the distance of the light.
*/
let spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-40, 40, -15);
spotlight.castShadow = true;
// A Vector2 defining the width and height of the shadow map.
spotlight.shadow.mapSize = new THREE.Vector2(1024, 1024);
spotlight.shadow.camera.far = 130;
spotlight.shadow.camera.near = 40;
scene.add(spotlight);
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
document.getElementById("container").appendChild(render.domElement);
render.render(scene, camera);
}
</script>
</body>
</html>
运行效果：
注：
要让场景的灯光起作用并投射阴影需要满足以下条件：
- Three.js的MeshBasicMaterial是不受灯光影响的，MeshLambertMaterial、MeshPhysicalMaterial、MeshStandardMaterial、MeshPhongMaterial等才受灯光的影响，因此需要将物体的材质替换为受灯光影响的材质；
- 要让灯光对场景中的物体产生阴影，需要开启渲染器的显示阴影贴图设置：render.shadowMap.enabled = true；
- 要产生阴影需要灯光本身开启投射阴影设置；
- 要让物体投射阴影，需要指定投射阴影的物体和接受阴影投射的物体。
网友评论