20 - three.js 笔记 - PointLight 光源
程序员文章站
2022-05-23 13:26:17
...
PointLight 点光源，照射所有方向的光源，例如灯泡发出的光，可以投射阴影。
示例浏览地址：http://ithanmang.com/threeJs/home/201807/20180711/01-pointLight.html
构造函数
PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )参数
color：光源的颜色
intensity：光源的强度
distance：光的照射距离
decay：光的衰减指数
属性
.decay : Float：光源的衰减指数
.distance : Float：光的照射距离
.isPointLight : Boolean：判断是否是点光源
.power : Float：光照强度，power = intensity * 4π
.shadow : LightShadow：阴影
方法
.copy ( source : PointLight ) : PointLight：把所有的属性复制到光源
效果
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点光源</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src="../../libs/build/three.js"></script>
<script src="../../libs/examples/js/loaders/OBJLoader.js"></script>
<script src="../../libs/examples/js/loaders/MTLLoader.js"></script>
<script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
<script src="../../libs/examples/js/libs/stats.min.js"></script>
<script src="../../libs/examples/js/controls/TrackballControls.js"></script>
<script src="../../libs/examples/js/Detector.js"></script>
<script src="../../libs/extend/THREEx.WindowResize.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<div id="Stats-output"></div>
<script>
let stats = initStats();
let scene, camera, renderer, controls, gui;
let lights = [];
let clock = new THREE.Clock();
function initScene() {
scene = new THREE.Scene();
}
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 120, 200);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
function initRenderer() {
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
renderer = new THREE.WebGLRenderer({antialias : true});
renderer.setClearColor(0x050505);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
}
function initLight() {
let sphere = new THREE.SphereBufferGeometry(1, 16, 8);
let cube = new THREE.BoxGeometry(2, 2, 2);
let cone = new THREE.ConeGeometry(2, 4, 20);
let light1 = new THREE.PointLight(0xFDF5E6, 1, 200);
light1.add( new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color : 0xFDF5E6})));
let light2 = new THREE.PointLight(0xFA8072, 1, 200);
light2.add(new THREE.Mesh(cube, new THREE.MeshBasicMaterial({color : 0xFA8072})));
let light3 = new THREE.PointLight(0x9B30FF, 1, 200);
light3.add(new THREE.Mesh(cone, new THREE.MeshBasicMaterial({color : 0x9B30FF})));
scene.add(light1);
scene.add(light2);
scene.add(light3);
lights.push(light1);
lights.push(light2);
lights.push(light3);
}
function initContent() {
let mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('../../models/walt/');
mtlLoader.load('WaltHead.mtl', function (materials) {
let objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('../../models/walt/');
objLoader.load('WaltHead.obj',function (object) {
object.name = "loadObject";
scene.add(object);
});
});
}
function initControls() {
controls = new THREE.TrackballControls(camera, renderer.domElement);
}
function initStats() {
let stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
return stats;
}
function init() {
initScene();
initCamera();
initRenderer();
initLight();
initContent();
initControls();
THREEx.WindowResize(renderer, camera);
}
function update() {
let object = scene.getObjectByName('loadObject');
if (object) object.rotation.y -= 0.5 * clock.getDelta();
let time = Date.now() * 0.0005;
lights[0].position.x = Math.sin( time * 0.7 ) * 30;
lights[0].position.y = Math.cos( time * 0.5 ) * 40;
lights[0].position.z = Math.cos( time * 0.3 ) * 30;
lights[1].position.x = Math.cos( time * 0.3 ) * 30;
lights[1].position.y = Math.sin( time * 0.5 ) * 40;
lights[1].position.z = Math.sin( time * 0.7 ) * 30;
lights[2].position.x = Math.sin( time * 0.7 ) * 30;
lights[2].position.y = Math.cos( time * 0.3 ) * 40;
lights[2].position.z = Math.sin( time * 0.5 ) * 30;
stats.update();
controls.update();
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
update();
}
init();
animate();
</script>
</body>
</html>