学习threejs,使用PointLight点光源

👨‍⚕️ 主页: gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏:threejs gis工程师


文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.PointLight
  • 二、🍀使用PointLight点光源
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用PointLight点光源,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.1 ☘️THREE.PointLight

THREE.PointLight 点光源,从一个点向各个方向发射的光源。
该光源可以投射阴影。

构造函数:
PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

  • color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)。
  • intensity - (可选参数) 光照强度。 缺省值 1。
  • distance - 这个距离表示从光源到光照强度为0的位置。 当设置为0时,光永远不会消失(距离无穷大)。缺省值 0.
  • decay - 沿着光照距离的衰退量。缺省值 2。

创建一个新的点光源(PointLight)。

属性

.color : Color
光源的颜色。如果构造的时候没有传递,默认会创建一个新的 Color 并设置为白色。

.intensity : Float
光照的强度,或者说能量。 在 physically correct 模式下, color 和强度 的乘积被解析为以坎德拉(candela)为单位的发光强度。 默认值 - 1.0

.isLight : Boolean
只读标志,用于检查给定对象是否为 Light 类型。

.castShadow : Boolean
如果设置为真光将投射动态阴影。警告:这很昂贵并且需要调整以使阴影看起来正确。有关详细信息,请参见 PointLightShadow。默认为假。

.decay : Float
灯光沿灯光距离变暗的量。默认值为 2。在物理正确渲染的上下文中,不应更改默认值。

.distance : Float
如果非零,那么光强度将会从最大值当前灯光位置处按照距离线性衰减到0。 缺省值为 0.0。

.power : Float
光功率在 physically correct 模式中, 表示以"流明(光通量单位)"为单位的光功率。 缺省值 - 4Math.PI。

该值与 intensity 直接关联

power = intensity * 4π

修改该值也会导致光强度的改变。

.shadow : PointLightShadow
PointLightShadow用与计算此光照的阴影。此对象的摄像机被设置为 fov 为90度,aspect为1, 近裁剪面 near 为0,远裁剪面far 为500的透视摄像机 PerspectiveCamera。

方法
.copy ( source : HemisphereLight ) : this
将所有属性的值从源 source 复制到此点光源对象。

.toJSON ( meta : Object ) : Object
以JSON格式返回光数据。

meta – 包含有元数据的对象,例如该对象的材质、纹理或图片。 将该light对象转换为 three.js JSON Object/Scene format(three.js JSON 物体/场景格式)。

二、🍀使用PointLight点光源

1. ☘️实现思路

  • 1、初始化renderer渲染器。
  • 2、初始化Scene三维场景scene。
  • 3、初始化camera相机,定义相机位置 camera.position.set,设置相机方向camera.lookAt。
  • 4、创建THREE.AmbientLight环境光源ambientLight,设置环境光ambientLight颜色,scene场景加入环境光源ambientLight。创建THREE.PointLight点光源pointLight,设置点光源颜色和光强衰减距离,scene场景加入pointLight。
  • 5、加载几何模型:创建二维平面网格对象plane,设置plane的旋转角度,scene场景加入plane。创建立方体网格对象cube,设置cube的位置和投影,scene场景加入cube。创建球体网格对象sphere,设置sphere的位置和投影,scene场景加入sphere。创建球体网格对象sphereLightMesh,用于模拟点光源pointLight的位置,设置sphereLightMesh的位置和投影,scene场景加入sphereLightMesh。定义render方法,实现立方体cube旋转,球体sphere跳动,模拟点光源位置的球体sphereLightMesh环绕动画,同步更新点光源pointLight位置的方法。具体代码参考下面代码样例。
  • 6、加入gui控件,控制点光源pointLight的颜色、光强、光强衰减距离等信息。加入stats监控器,监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>学习threejs,使用PointLight点光源</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- Js 代码-->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建三维场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器并设置大小var renderer = new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));renderer.setSize(window.innerWidth, window.innerHeight);// renderer.shadowMapEnabled = true;// 常见二维平面var planeGeometry = new THREE.PlaneGeometry(60, 20, 20, 20);var planeMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.receiveShadow = true;// 设置二维平面旋转角度和位置plane.rotation.x = -0.5 * Math.PI;plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// 添加二维平面scene.add(plane);// 创建立方体var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff7777});var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.castShadow = true;// 设置立方体位置cube.position.x = -4;cube.position.y = 3;cube.position.z = 0;// 场景中添加立方体scene.add(cube);// 创建球体var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// 设置球体位置和投影sphere.position.x = 20;sphere.position.y = 0;sphere.position.z = 2;sphere.castShadow = true;// 场景中添加球体scene.add(sphere);// 设置相机位置和方向camera.position.x = -25;camera.position.y = 30;camera.position.z = 25;camera.lookAt(new THREE.Vector3(10, 0, 0));// 场景中添加环境光var ambiColor = "#0c0c0c";var ambientLight = new THREE.AmbientLight(ambiColor);scene.add(ambientLight);var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, -10);spotLight.castShadow = true;// scene.add( spotLight );// 添加点光源,设置光强距离衰减,场景中添加点光源var pointColor = "#ccffcc";var pointLight = new THREE.PointLight(pointColor);pointLight.distance = 100;scene.add(pointLight);// 添加小球体模型点光源var sphereLight = new THREE.SphereGeometry(0.2);var sphereLightMaterial = new THREE.MeshBasicMaterial({color: 0xac6c25});var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);sphereLightMesh.castShadow = true;sphereLightMesh.position = new THREE.Vector3(3, 0, 3);scene.add(sphereLightMesh);// 绑定渲染器到html要素document.getElementById("WebGL-output").appendChild(renderer.domElement);var step = 0;var invert = 1;var phase = 0;var controls = new function () {this.rotationSpeed = 0.03;this.bouncingSpeed = 0.03;this.ambientColor = ambiColor;this.pointColor = pointColor;this.intensity = 1;this.distance = 100;};var gui = new dat.GUI();gui.addColor(controls, 'ambientColor').onChange(function (e) {ambientLight.color = new THREE.Color(e);});gui.addColor(controls, 'pointColor').onChange(function (e) {pointLight.color = new THREE.Color(e);});gui.add(controls, 'intensity', 0, 3).onChange(function (e) {pointLight.intensity = e;});gui.add(controls, 'distance', 0, 100).onChange(function (e) {pointLight.distance = e;});render();function render() {stats.update();// 立方体旋转动画cube.rotation.x += controls.rotationSpeed;cube.rotation.y += controls.rotationSpeed;cube.rotation.z += controls.rotationSpeed;// 球体跳跃动画step += controls.bouncingSpeed;sphere.position.x = 20 + ( 10 * (Math.cos(step)));sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));// 模拟点光源的球体动画if (phase > 2 * Math.PI) {invert = invert * -1;phase -= 2 * Math.PI;} else {phase += controls.rotationSpeed;}sphereLightMesh.position.z = +(7 * (Math.sin(phase)));sphereLightMesh.position.x = +(14 * (Math.cos(phase)));sphereLightMesh.position.y = 5;if (invert < 0) {var pivot = 14;sphereLightMesh.position.x = (invert * (sphereLightMesh.position.x - pivot)) + pivot;}pointLight.position.copy(sphereLightMesh.position);requestAnimationFrame(render);renderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init</script>
</body>
</html>

效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/19650.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

30填学习自制操作系统第二天

今天要干什么&#xff1f; 初步了解汇编语言使用汇编重新写个昨天的镜像文件继续开发 一: 什么是电信号&#xff1f; 电脑的处理中心是CPU&#xff0c;即“central process unit”的缩写&#xff0c;翻译成中文就是“中央处理单元”&#xff0c;顾名思义&#xff0c;他就是…

Python的顺序结构和循环结构

文章目录 一、条件语句&#xff08;1&#xff09;条件语句的定义&#xff08;2&#xff09;条件语句的语法&#xff08;a&#xff09;单分支 if&#xff08;b&#xff09;双分支 if-else&#xff08;c&#xff09;多分支 if-elif-elif-...-else &#xff08;3&#xff09;注意事…

金蝶云星空点击按钮实现指定文件下载

文章目录 金蝶云星空点击按钮实现指定文件下载业务需求开发实现 金蝶云星空点击按钮实现指定文件下载 业务需求 点击按钮&#xff0c;下载excel 开发实现 创建表单插件&#xff0c;在按钮点击事件&#xff0c;调用附件下载窗口进行指定路径的指定文件下载 模板存放路径 …

EasyExcel的简单使用

EasyExcel使用 官方文档&#xff1a;关于EasyExcel 1.1EasyExcel相关依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.11</version></dependency> 1.2 写Excel 1.2.1 最…

游戏引擎学习第107天

仓库:https://gitee.com/mrxiao_com/2d_game_2 回顾我们之前停留的位置 在这段内容中&#xff0c;讨论了如何处理游戏中的三维效果&#xff0c;特别是如何处理额外的“Z层”。由于游戏中的艺术资源是位图而不是3D模型&#xff0c;因此实现三维效果变得非常具有挑战性。虽然可…

「vue3-element-admin」基于 TypeScript 的 ECharts 按需引入方案实战 - Vue3 项目打包体积优化 57%

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 欢迎点赞 &#x1f44d; 收藏 ⭐评论 …

用Python实现图像风格迁移的技术分析

文章目录 一、概要 二、效果预览 三、整体架构流程 1. 用户界面(GUI): 2. 图像加载与显示: 3. 风格迁移核心算法: 4. 结果显示与保存: 5. 多线程处理: 四、技术名词解释 1. OpenCV: 2. TensorFlow: 3. VGG19: 4. GUI(图形用户界面): 5. 多线程: 五…

gsoap实现webservice服务

gsoap实现webservice服务 在实现Web服务时&#xff0c;使用gSOAP是一个很好的选择&#xff0c;因为它提供了强大的工具和库来创建SOAP和RESTful服务。gSOAP是一个C和C语言开发的库&#xff0c;它支持SOAP协议的各种版本&#xff0c;包括SOAP 1.1和SOAP 1.2。下面是如何使用gSO…

穷举 vs 暴搜 vs 深搜 vs 回溯 vs 剪枝

穷举 vs 暴搜 vs 深搜 vs 回溯 vs 剪枝 1. 全排列2. 子集 1. 全排列 题目链接&#xff1a;46. 全排列 算法原理&#xff1a; 画出决策树 设计函数 全局变量&#xff1a;二维数组ret存储结果&#xff1b;一维数组path存储路径&#xff1b;boolean类型一维数组visited表示当…

NAT(网络地址转换)技术详解:网络安全渗透测试中的关键应用与防御策略

目录 NAT的作用 NAT类型 NAT工作流程示例 NAT 转换技术的原理 源地址转换&#xff08;SNAT&#xff0c;Source NAT&#xff09;&#xff1a; 目标地址转换&#xff08;DNAT&#xff0c;Destination NAT&#xff09;&#xff1a; 端口地址转换&#xff08;PAT&#xff0c…

OpenCV图像基本操作

学习目标&#xff1a; 学习一些OpenCV中对于图像的基本操作 学习内容&#xff1a; 第一步导入库和所需的图像。 import cv2 import numpy as np imgcv2.imread("lena.png") # cv2.imshow("img",img) # cv2.waitKey(0) 访问和修改图片像素 访问图片像素…

具身智能在智能巡检机器人中的应用——以开关柜带电操作机器人为例

随着机器人技术和人工智能的迅速发展&#xff0c;具身智能在各行业的应用日益广泛&#xff0c;尤其是在电力行业中的智能巡检领域。传统的电力巡检和维护工作通常需要人工操作&#xff0c;存在着高温、高压、强电磁场等危险环境&#xff0c;且效率较低。开关柜带电操作机器人作…

巨控GRM530系列的远程模块用于PLC远程上下载方案

巨控GRM530系列的远程模块用于PLC远程上下载方案 一、方案概述 巨控科技基于全球加速服务器与智能通讯模块&#xff0c;提供高效、安全的工业设备远程上下载及维护服务。支持多协议PLC、触摸屏、运动控制器等设备&#xff0c;突破地域限制&#xff0c;实现跨国、跨网络的无缝调…

fastadmin快速搭建导航站和API接口站点系统

这份源码是基于fastadmin框架制作的&#xff0c;不仅可以快速搭建漂亮的导航站和API接口站点&#xff0c;而且还具有可扩展性和定制性。源码开放&#xff0c;方便二次开发和定制&#xff0c;适合各种需求。快来体验这个功能强大的站点源码&#xff0c;为您的项目提供便捷解决方…

【VB语言】EXCEL中VB宏的应用

【VB语言】EXCEL中VB宏的应用 文章目录 [TOC](文章目录) 前言一、EXCEL-VB1.实验过程2.代码 二、EXCEL-VB 生成.c.h文件1.实验过程2.代码 四、参考资料总结 前言 1.WPS-VB扩展包 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、EXCEL-VB 1.实验过…

告别第三方云存储!用File Browser在Windows上自建云盘随时随地访问

文章目录 前言1.下载安装File Browser2.启动访问File Browser3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 无论是个人用户还是企业团队&#xff0c;都希望能够有一个高效、安全的解决方案来…

[250217] x-cmd 发布 v0.5.3:新增 DeepSeek AI 模型支持及飞书/钉钉群机器人 Webhook 管理

目录 X-CMD 发布 v0.5.3&#x1f4c3;Changelog&#x1f9e9; deepseek&#x1f9e9; feishu|dingtalk&#x1f4e6; x-cmd✅ 升级指南 X-CMD 发布 v0.5.3 &#x1f4c3;Changelog &#x1f9e9; deepseek 新增 deepseek 模块&#xff0c;用户可通过 deepseek 直接请求使用 …

Kubernetes控制平面组件:etcd常用配置参数

云原生学习路线导航页&#xff08;持续更新中&#xff09; kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计&#xff08;一&#xff09;Kubernetes架构原则和对象设计&#xff08;二&#xff09;Kubernetes架构原则和对象设计&#xff08;三&#xff09;Kubernetes控…

Docker 入门与实战:从安装到容器管理的完整指南

&#x1f680; Docker 入门与实战&#xff1a;从安装到容器管理的完整指南 &#x1f31f; &#x1f4d6; 简介 在现代软件开发中&#xff0c;容器化技术已经成为不可或缺的一部分。而 Docker 作为容器化领域的领头羊&#xff0c;以其轻量级、高效和跨平台的特性&#xff0c;深…

Android 14输入系统架构分析:图解源码从驱动层到应用层的完整传递链路

一、资料快车 1、深入了解Android输入系统&#xff1a;https://blog.csdn.net/innost/article/details/47660387 2、书籍 - Android系统源代码情景分析 二、Perface 1、参考&#xff1a; 2、系统程序分析方法 1&#xff09;加入log&#xff0c;并跟着log一步步分析 -logc…