26 Three.js的聚光灯光源THREE.SpotLight

介绍

THREE.SpotLight（聚光灯灯源）是最常使用的光源之一。THREE.SpotLight是一种具有锥形效果的光源。比如：手电筒。

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/28.html

相关属性

由于Three.js的版本更新过快，有可能有我没有测试的属性已经被抛弃了，如果大家有知道的已经被抛弃掉的记得给我留言。

属性	描述
angle（角度）	光源发射出的光束的宽度。单位是弧度，默认值为Math.PI/3
castShadow（投影）	如果设置为true，这个光源就会产生阴影
color（颜色）	光源的颜色
distance（距离）	光源照射的距离。默认为0，这意味着光线的强度不会随着距离增加而减弱
exponent（光强衰减指数）	使用THREE.SpotLight光源，发射的光线的强度随着光源距离的增加而减弱。exponent属性决定了光线前度递减的速度。使用低值，从光源发出的光线将到达远程的物体，而使用高值，光线仅能到达非常接近THREE.SpotLight光源的物体
intensity（强度）	光源找色的强度，默认为1
onlyShadow（仅阴影）已经废弃	如果此属性设置为“true”，则该光源只生成阴影，而不会在场景中添加任何光照
position（位置）	光源在场景中的位置
shadowBias（阴影偏移）	用来偏置阴影的位置。当你使用非常薄的对象时，可以使用它来解决一些奇怪的效果。如果你看到奇怪的阴影效果，将该属性设置为很小的值（如0.01）通常可以解决问题。此属性默认为0
shadowCameraFar（投影远点）	到距离光源的哪一个位置之内可以生产阴影。默认5000
shadowCameraFov（投影视场）	用于生成阴影的视场有多大，默认50
shadowCameraNear（投影近点）	从距离光源的哪一个位置开始生成阴影，默认50
shadowCameraVisible（投影方式可见）新版本推荐使用THREE.CameraHelper( light.shadow.camera )	如果该属性设置为“true”，你可以看到光源在哪里以及如何生成阴影的。默认值为“false”
shadowDarkness（阴影暗度）	定义了阴影徐然的暗度。在场景渲染之后无法更改，默认0.5
shadowMapWidth和shadowMapHeight（阴影映射宽度和阴影映射高度）	决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时，可以增加这个值。在场景渲染之后无法更改。
target（目标）	使用THREE.SpotLight光源时，它的指向很重要。使用target属性，你可以将THREE.SpotLight光源指向场景中特定对象或位置。注意，此属性需要一个THREE.Object3D对象（如THREE.Mesh）。
visible（是否可见）	如果该属性设置为“true”（默认值），该光源就会打开，如果设置为“false”，该光源就会关闭

案例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
</head>
<body onload="draw();"></body>
<script src="build/three.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script src="examples/js/libs/dat.gui.min.js"></script>
<script>var renderer;function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);//告诉渲染器需要阴影效果renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMapdocument.body.appendChild(renderer.domElement);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 40, 100);camera.lookAt(new THREE.Vector3(0, 0, 0));}var scene;function initScene() {scene = new THREE.Scene();}//初始化dat.GUI简化试验流程var gui;function initGui() {//声明一个保存需求修改的相关数据的对象gui = {ambientLight:"#111111", //环境光源spotLight:"#ffffff", //点光源lightY: 30, //灯光y轴的位置distance:0, //点光源距离intensity:1, //灯光强度visible:true, //是否可见angle:Math.PI/3,castShadow:true,exponent:30,target:"plane",debug:false};var datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）datGui.addColor(gui,"ambientLight").onChange(function (e) {spotLight.color = new THREE.Color(e);});datGui.addColor(gui,"spotLight").onChange(function (e) {spotLight.color = new THREE.Color(e);});datGui.add(gui, "lightY", 0, 100).onChange(function(e){spotLight.position.y = gui.lightY;});datGui.add(gui,"distance",0,200).onChange(function (e) {spotLight.distance = e;});datGui.add(gui,"intensity",0,5).onChange(function (e) {spotLight.intensity = e;});datGui.add(gui,"visible").onChange(function (e) {spotLight.visible = e;});datGui.add(gui,"angle",0,Math.PI*2).onChange(function (e) {spotLight.angle = e;});datGui.add(gui,"castShadow").onChange(function (e) {spotLight.castShadow = e;});datGui.add(gui,"exponent",0,100).onChange(function (e) {spotLight.exponent = e;});datGui.add(gui,"debug").onChange(function (e) {if(e){var debug = new THREE.CameraHelper(spotLight.shadow.camera);debug.name = "debug";scene.add(debug);}else{var debug = scene.getObjectByName("debug");scene.remove(debug);}});datGui.add(gui,"target",["plane","cube"]).onChange(function (e) {switch (e){case "plane":spotLight.target = plane;break;case "cube":spotLight.target = cube;break;}});}var ambientLight,spotLight;function initLight() {ambientLight = new THREE.AmbientLight("#111111");scene.add(ambientLight);spotLight = new THREE.SpotLight("#ffffff");spotLight.position.set(15, 30, 10);console.log(spotLight);//告诉平行光需要开启阴影投射spotLight.castShadow = true;scene.add(spotLight);}var cube,plane;function initModel() {//辅助工具var helper = new THREE.AxisHelper(10);scene.add(helper);//立方体var cubeGeometry = new THREE.CubeGeometry(10,10,10);var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.x = 30;cube.position.y = 5;cube.position.z = -5;//告诉立方体需要投射阴影cube.castShadow = true;scene.add(cube);//底部平面var planeGeometry = new THREE.PlaneGeometry(100, 100);var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa});plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.rotation.x = -0.5 * Math.PI;plane.position.y = -0;//告诉底部平面需要接收阴影plane.receiveShadow = true;scene.add(plane);}//初始化性能插件var stats;function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放var controls;function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);// 如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = false;//设置相机距离原点的最远距离controls.minDistance = 50;//设置相机距离原点的最远距离controls.maxDistance = 200;//是否开启右键拖拽controls.enablePan = true;}function render() {renderer.render(scene, camera);}//窗口变动触发的函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();render();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {//更新控制器render();//更新性能插件stats.update();controls.update();requestAnimationFrame(animate);}function draw() {initGui();initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}
</script>
</html>

26 Three.js的聚光灯光源THREE.SpotLight相关推荐

2021.10.26 Node.js笔记
文章目录前言一.核心模块 1.http模块创建服务器 createServer() 2.url模块解析URL url.parse() 3.path模块获取后缀名 path.extname() ...
10.26 node.js day01
目录 global模块 fs模块 path路径模块 http模块 ctrl+L 清除终端内容 esc 清除当前行内容 tab 补全代码 ctrl+c 停止终端 global模块 __filename ...
暑期学习日记26：js实现支付成功页面跳转
本周学习了用js实现支付页面的跳转功能,逻辑为: 1.在支付界面时,点击确定支付,弹出确认框,确认后跳转到支付成功页面. 2.在支付成功界面时,会在倒计时10秒后自动跳转页面,或者点击立即返回立即跳转 ...
23 Three.js的光源种类
为什么需要光源? 我们能看到物体都是因为有光的反射效果,不同的物体反射出来的光也就显示出来了不同的颜色.所以,three.js框架模拟了一些现实生活中的光源来实现所需要的效果. 光源的种类名字描述 ...
JS中的arguements到底是个啥？
类数组对象:arguments 众所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做argumen ...
html百度首页制作视频,韩顺平轻松搞定网页设计 html+css+js
韩顺平老师的教程影响着一代又一代的学子们,他的视频教程确实做的很经典,不论是java.php还是网页设计,都有出彩的地方.这里,小编给大家分享韩顺平老师的轻松搞定网页设计教程,绝对完整,全部存于百度网 ...
由浅入深 65个JS常考面试题
由浅入深逐个击破 JS常考面试题(上篇) 1. 介绍一下JS的基本数据类型,值是如何存储的? JavaScript一共有8种数据类型,其中有7种基本数据类型:Undefined.Null.Boolea ...
js的arguments到底是什么？
类数组对象:arguments 众所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments ...
ThreeJS导入外部obj和mtl
本文将介绍如何使用ThreeJS导入obj和带贴图mtl的外部obj模型: 使用AmbientLight为场景所有物体添加基础光源: 使用SpotLight为场景添加聚光灯效果,并为obj添加阴影效 ...

26 Three.js的聚光灯光源THREE.SpotLight

介绍

相关属性

案例代码

26 Three.js的聚光灯光源THREE.SpotLight相关推荐

最新文章

热门文章