介绍

Three.js库中的THREE.PointLight（点光源）是一种单点发光、照射所有方向的光源。比如夜空中的照明弹。

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

THREE.PointLight的相关属性

属性	描述
color（颜色）	光源的颜色，详情见上一节
distance（距离）	光源照射的距离。默认值为0，意味着光的强度不会随着距离增加而减少。如果填写别的，则将在当前位置慢慢减少为0为止
intensity（强度）	光源照射的强度，默认值为1。如果设置为2，则是默认两倍强度。0为没有光。
position（位置）	光源在场景中的位置
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", //环境光源pointLight:"#ffffff", //点光源lightY: 30, //灯光y轴的位置distance:0, //点光源距离intensity:1, //灯光强度visible:true //是否可见};var datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）datGui.addColor(gui,"ambientLight").onChange(function (e) {ambientLight.color = new THREE.Color(e);});datGui.addColor(gui,"pointLight").onChange(function (e) {pointLight.color = new THREE.Color(e);});datGui.add(gui, "lightY", 0, 100);datGui.add(gui,"distance",0,100).onChange(function (e) {pointLight.distance = e;});datGui.add(gui,"intensity",0,5).onChange(function (e) {pointLight.intensity = e;});datGui.add(gui,"visible").onChange(function (e) {pointLight.visible = e;});}var ambientLight,pointLight;function initLight() {ambientLight = new THREE.AmbientLight("#111111");scene.add(ambientLight);pointLight = new THREE.PointLight("#ffffff");pointLight.position.set(15, 30, 10);//告诉平行光需要开启阴影投射pointLight.castShadow = true;scene.add(pointLight);}var cube;function initModel() {//辅助工具var helper = new THREE.AxisHelper(10);scene.add(helper);// 创建一个立方体//    v6----- v5//   /|      /|//  v1------v0|//  | |     | |//  | |v7---|-|v4//  |/      |///  v2------v3//立方体var cubeGeometry = new THREE.CubeGeometry(10,10,10);var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.x = 5;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});var 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();//更新相关位置pointLight.position.y = gui.lightY;controls.update();requestAnimationFrame(animate);}function draw() {initGui();initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}
</script>
</html>

25 Three.js的点光源THREE.PointLight相关推荐

快过年了，分享 25 个 JS 实用技巧送给大家吧
本文主要介绍一些JS中用到的小技巧,可以在日常Coding中提升幸福度,将不定期更新~ 类型强制转换 1.1 string强制转换为数字可以用 *1来转化为数字(实际上是调用 .valueOf方法) ...
7.25 Ext JS下拉单选框(Combobox,TagFied)使用及疑难问题解决
Ext JS下拉框字段组件在Ext JS中,下拉框选择的字段组件主要有两种, 分别是Combobox 和TagField, 这两种都支持单选和多选, 呈现的效果如下: Combobox 对应的类是: ...
5月25日-js操作DOM遍历子节点
一.遍历节点遍历子节点children();//获取节点的所有直接子类遍历同辈节点next();prev();siblings();//所有同辈元素*find();从后代元素中查找匹配的filter ...
8.PointLight（点光源）-照射所有方向的光源
Three.js库中的PointLight是一种单点发光,照射所有方向的光源.夜空中的照明弹就是一个很好地点光源例子.下例可以试验一下点光源. <!DOCTYPE html><htm ...
three.js+vue3+vite教学（九、环境光，点光源，聚光灯，平行光）
环境光添加环境光 // 添加环境光 const ambientLight = new AmbientLight(controlRef.value.ambientColor) scene.add(am ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...
一名Web3D开发工程师的Three.js知识总结与学习步骤
wx:codekongfu 一.背景介绍各位小伙伴们大家好,我是web前端开发,在2018~2019年某网的大屏可视化项目结束后,忽然有个想法,就是,如果把里面的Echarts图表换成三维的图形,效 ...
Three.js 学习笔记 - 给跳一跳小游戏添加光源，阴影
一. 修改物体材质接着上一篇的项目,在上一篇中物体的材质都是用的MeshBasicMaterial这种材质,这种材质是不受光照的影响的,所以要修改成MeshPhongMaterial这种材质,让它受 ...
three.js学习笔记(五)——Shadows阴影
阴影一直是实时三维渲染的挑战,开发人员必须在合理的情况下找到显示真实阴影的技巧. Three.js 有一个内置的解决方案,虽然其并不完美,但用起来很方便. 阴影是怎么工作的? 当你进行一次渲染时,Th ...

25 Three.js的点光源THREE.PointLight

介绍

THREE.PointLight的相关属性

案例

25 Three.js的点光源THREE.PointLight相关推荐

最新文章

热门文章