Three.js环境光，平行光，点光源，聚光灯的创建和灯光辅助线的使用

news/2024/4/16 19:00:18/文章来源:https://blog.csdn.net/weixin_43835425/article/details/131739263

Three.js中的灯光API使用

1.环境光（AmbientLight）2.平行光（directionalLight）3.PointLight(点光源) 4.聚光灯（SpotLight）5.材质平面（PlaneGeometry）用于接收（平行光和聚光灯的光源）

首页在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上新加入一个创建 灯光的函数 createLight 方法

	// 创建光源createLight() {// 创建环境光this.ambientLight = new THREE.AmbientLight('#fff', .8)this.scene.add(this.ambientLight)// 创建平行光this.directionalLight = new THREE.DirectionalLight('#1E90FF', 1)this.directionalLight.position.set(-1.44, 2.2, 1)this.directionalLight.castShadow = truethis.directionalLight.visible = falsethis.scene.add(this.directionalLight)// 创建平行光辅助线this.directionalLightHelper = new THREE.DirectionalLightHelper(this.directionalLight, .5)this.directionalLightHelper.visible = falsethis.scene.add(this.directionalLightHelper)// 创建点光源this.pointLight = new THREE.PointLight(0xff0000, 1, 100)this.pointLight.visible = falsethis.scene.add(this.pointLight)// 创建点光源辅助线this.pointLightHelper = new THREE.PointLightHelper(this.pointLight, .5)this.pointLightHelper.visible = falsethis.scene.add(this.pointLightHelper)//  创建聚光灯this.spotLight = new THREE.SpotLight('#323636', 440);this.spotLight.visible = falsethis.spotLight.map = new THREE.TextureLoader().load(require('@/assets/image/model-bg-1.jpg'));this.spotLight.decay = 2;this.spotLight.shadow.mapSize.width = 1920;this.spotLight.shadow.mapSize.height = 1080;this.spotLight.shadow.camera.near = 1;this.spotLight.shadow.camera.far = 10;this.scene.add(this.spotLight);//创建聚光灯辅助线this.spotLightHelper = new THREE.SpotLightHelper(this.spotLight);this.spotLightHelper.visible = falsethis.scene.add(this.spotLightHelper)// 模型平面const geometry = new THREE.PlaneGeometry(4, 4);var groundMaterial = new THREE.MeshStandardMaterial({ color: '#939393' });this.planeGeometry = new THREE.Mesh(geometry, groundMaterial);this.planeGeometry.rotation.x = -Math.PI / 2this.planeGeometry.position.set(0, -.59, 0)// 让地面接收阴影this.planeGeometry.receiveShadow = true;this.planeGeometry.visible = falsethis.scene.add(this.planeGeometry);}

完整的代码

import * as THREE from 'three' //导入整个 three.js核心库
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' 
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
// 定义一个 class类
class renderModel {constructor(selector) {this.container = document.querySelector(selector)// 相机this.camera// 场景this.scene//渲染器this.renderer// 控制器this.controls// 模型this.model    //文件加载器类型this.fileLoaderMap = {'glb': new GLTFLoader(),'fbx': new FBXLoader(),'gltf': new GLTFLoader(),'obj': new OBJLoader(),}// 环境光this.ambientLight//平行光this.directionalLight// 平行光辅助线this.directionalLightHelper// 点光源this.pointLight//点光源辅助线this.pointLightHelper//聚光灯this.spotLight//聚光灯辅助线this.spotLightHelper//模型平面this.planeGeometry}// 初始化加载模型方法init(){return new Promise(async (reslove, reject) => {//初始化场景this.initScene()//初始化相机this.initCamera()//初始化渲染器this.initRender()// 创建灯光this.createLight()// 添加物体模型 TODO：初始化时需要默认一个  filePath:'threeFile/glb/glb-3.glb' 放在 vue项目中的public/threeFile文件下const load = await this.setModel({ filePath: 'threeFile/glb/glb-3.glb', fileType: 'glb',scale:0.5})//监听场景大小改变，跳转渲染尺寸window.addEventListener("resize", this.onWindowResize.bind(this))//场景渲染this.sceneAnimation()reslove(load)})}//创建场景initScene() {this.scene = new THREE.Scene()//创建一个球体 用于映射全景图const sphereBufferGeometry = new THREE.SphereGeometry(40, 32, 16);sphereBufferGeometry.scale(-1, -1, -1);const material = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load(require('@/assets/image/view-1.png'))});//设置场景全景图this.viewMesh = new THREE.Mesh(sphereBufferGeometry, material);//添加场景this.scene.add(this.viewMesh);}// 创建相机initCamera() {const { clientHeight, clientWidth } = this.containerthis.camera = new THREE.PerspectiveCamera(45, clientWidth / clientHeight, 0.25, 100)}// 创建渲染器initRender() {this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) //设置抗锯齿//设置屏幕像素比this.renderer.setPixelRatio(window.devicePixelRatio)//渲染的尺寸大小const { clientHeight, clientWidth } = this.containerthis.renderer.setSize(clientWidth, clientHeight)//色调映射this.renderer.toneMapping = THREE.ACESFilmicToneMapping//曝光this.renderer.toneMappingExposure = 3this.renderer.shadowMap.enabled = truethis.renderer.shadowMap.type = THREE.PCFSoftShadowMapthis.container.appendChild(this.renderer.domElement)}// 使用动画器不断更新场景sceneAnimation() {this.renderer.setAnimationLoop(this.render.bind(this))}//渲染场景render(){this.renderer.render(this.scene, this.camera)}//加载模型setModel({ filePath, fileType, scale,  position }) {return new Promise((resolve, reject) => {const loader = this.fileLoaderMap[fileType]loader.load(filePath, (result) => {//加载不同类型的文件switch (fileType) {case 'glb':this.model = result.scene		break;case 'fbx':this.model = resultbreak;case 'gltf':this.model = result.scenebreak;case 'obj':this.model = resultbreak;default:break;}// 设置模型大小if (scale) {this.model.scale.set(scale, scale, scale);}// 设置模型位置 if (position) {const { x, y, z } = positionthis.model.position.set(x, y, z)}// 设置相机位置this.camera.position.set(0, 2, 6)// 设置相机坐标系this.camera.lookAt(0, 0, 0)// 将模型添加到场景中去   this.scene.add(this.model)resolve(true)}, () => {}, (err) => {console.log(err)reject()})})}// 创建光源createLight() {// 创建环境光this.ambientLight = new THREE.AmbientLight('#fff', .8)this.scene.add(this.ambientLight)// 创建平行光this.directionalLight = new THREE.DirectionalLight('#1E90FF', 1)this.directionalLight.position.set(-1.44, 2.2, 1)this.directionalLight.castShadow = truethis.directionalLight.visible = falsethis.scene.add(this.directionalLight)// 创建平行光辅助线this.directionalLightHelper = new THREE.DirectionalLightHelper(this.directionalLight, .5)this.directionalLightHelper.visible = falsethis.scene.add(this.directionalLightHelper)// 创建点光源this.pointLight = new THREE.PointLight(0xff0000, 1, 100)this.pointLight.visible = falsethis.scene.add(this.pointLight)// 创建点光源辅助线this.pointLightHelper = new THREE.PointLightHelper(this.pointLight, .5)this.pointLightHelper.visible = falsethis.scene.add(this.pointLightHelper)//  创建聚光灯this.spotLight = new THREE.SpotLight('#323636', 440);this.spotLight.visible = falsethis.spotLight.map = new THREE.TextureLoader().load(require('@/assets/image/model-bg-1.jpg'));this.spotLight.decay = 2;this.spotLight.shadow.mapSize.width = 1920;this.spotLight.shadow.mapSize.height = 1080;this.spotLight.shadow.camera.near = 1;this.spotLight.shadow.camera.far = 10;this.scene.add(this.spotLight);//创建聚光灯辅助线this.spotLightHelper = new THREE.SpotLightHelper(this.spotLight);this.spotLightHelper.visible = falsethis.scene.add(this.spotLightHelper)// 模型平面const geometry = new THREE.PlaneGeometry(4, 4);let  groundMaterial = new THREE.MeshStandardMaterial({ color: '#939393' });this.planeGeometry = new THREE.Mesh(geometry, groundMaterial);this.planeGeometry.rotation.x = -Math.PI / 2this.planeGeometry.position.set(0, -.59, 0)// 让地面接收阴影this.planeGeometry.receiveShadow = true;this.planeGeometry.visible = falsethis.scene.add(this.planeGeometry);}
}

完整的代码可参考:https://gitee.com/ZHANG_6666/Three.js3D

界面效果：
在这里插入图片描述

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

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

相关文章

JavaWeb项目【SpringBoot】——图书项目4.0【源码】：SpringBoot版本 springboot相关技术 项目应用

JavaWeb项目【SpringBoot】——图书项目4.0【源码】：SpringBoot版本 springboot相关技术 项目应用

目录 项目简介思考 & 改进1.Jsp都是同步请求---->改成异步Ajax【完成】2.前端用Jsp技术落后----->用Vue框架【完成】3.架构问题：配置数据和Java代码耦合【完成】3.SQL语句和Java代码耦合【完成】4.架构问题：servlet只能处理一个请求5.响应方式…
阅读更多...
[论文分享]MR-MAE：重构前的模拟：用特征模拟增强屏蔽自动编码器

[论文分享]MR-MAE：重构前的模拟：用特征模拟增强屏蔽自动编码器

论文题目：Mimic before Reconstruct: Enhancing Masked Autoencoders with Feature Mimicking 论文地址：https://arxiv.org/abs/2303.05475 代码地址：https://github.com/Alpha-VL/ConvMAE（好像并未更新为MR-MAE模型） …
阅读更多...
从Vue2到Vue3【零】——Vue3简介及创建

从Vue2到Vue3【零】——Vue3简介及创建

系列文章目录 内容链接从Vue2到Vue3【零】Vue3简介及创建 文章目录 系列文章目录前言一、Vue3的发布带来了什么1.1 性能提升1.2 源码升级1.3 支持TypeScript1.4 新特性 二、创建Vue3.0工程2.1 什么是Vite2.2 利用Vite创建Vue3.0工程2.3 利用vue-cli脚手架创建Vue3.0工程 三、 …
阅读更多...
美团JVM面试题

美团JVM面试题

1. 请解释一下对象创建的过程? Java对象创建的过程主要分为以下五个步骤： 类加载检查 Java虚拟机在读取一条new指令时候，首先检查能否在常量池中定位到这个类的符号引用，并且检查这个符号引用代表的类是否被加载、解析和初始化。如果没有&a…
阅读更多...
C#开发的OpenRA游戏之维修按钮

C#开发的OpenRA游戏之维修按钮

C#开发的OpenRA游戏之维修按钮 前面分析物品的变卖按钮，如果理解这个流程，再看其它按钮的流程，其实是一样的，所以前面的文章是关键，只有理解通透的基础之上，才能继续往下。 维修按钮的存在价值，就是当建筑物受到敌方破坏，还没有完全倒掉之前，可以使用金币来进行修理。…
阅读更多...
快速排序的非递归实现、归并排序的递归和非递归实现、基数排序、排序算法的时间复杂度

快速排序的非递归实现、归并排序的递归和非递归实现、基数排序、排序算法的时间复杂度

文章目录 快速排序的非递归三数取中法选取key快速排序三路划分 归并排序的递归归并排序的非递归计数排序稳定性排序算法的时间复杂度 快速排序的非递归 我们使用一个栈来模拟函数的递归过程，这里就是在利用栈分区间。把一个区间分为 [left,keyi-1][key][keyi1,right…
阅读更多...
Android 进程与进程之间的通信--AIDL详细教程，以传递对象为例，两个app实现

Android 进程与进程之间的通信--AIDL详细教程，以传递对象为例，两个app实现

我这里案例是 通过 IPC 传递对象 （以DemoBean类为例） 如下： AIDL 使用一种简单语法，允许您通过一个或多个方法（可接收参数和返回值）来声明接口。参数和返回值可为任意类型，甚至是 AIDL 生成的其…
阅读更多...
如何将jar 包下载到自定义maven仓库

如何将jar 包下载到自定义maven仓库

下载命令 mvn install:install-file -Dfileartifactid-version.jar -DgroupIdgroupid -DartifactIdartifactid -Dversionversion -Dpackagingjar -DlocalRepositoryPath. -DcreateChecksumtrue参数解释 在上述命令中，需要替换以下参数： artifactid-vers…
阅读更多...
计算机组成原理课程设计 报告

计算机组成原理课程设计 报告

在我的博客查看：https://chenhaotian.top/study/computer-composition-principles-course-design/ 计算机组成原理课程设计 报告 一、目的和要求 深入了解计算机各种指令的执行过程，以及控制器的组成，指令系统微程序设计的具体知识&#xf…
阅读更多...
【前端知识】React 基础巩固(二十六)——Portals 的使用

【前端知识】React 基础巩固(二十六)——Portals 的使用

React 基础巩固(二十六)——Portals 的使用 Portals 通常&#xff0c;组件会渲染到 root 节点下。可使用 Portals 将组件渲染至其他节点。 添加 id 为 more、modal 的 div 元素 <div id"root"></div> <div id"more"></div> &l…
阅读更多...
工作：三菱PLC之CC-Link IE Field Network通讯知识及应用

工作：三菱PLC之CC-Link IE Field Network通讯知识及应用

工作&#xff1a;三菱PLC之CC-Link IE Field Network通讯知识及应用 一、理论 1. 简介连接 CC-LINK-IE通讯分别有 CC-Link IE TSN&#xff0c;CC-Link IE Control Network&#xff0c;CC-Link IE Field Network&#xff0c;CC-Link IE Field Network Basic几种形式&#xff…
阅读更多...
成功解决wget下载报错 : wget HTTP request sent, awaiting response... 403 Forbidden

成功解决wget下载报错 : wget HTTP request sent, awaiting response... 403 Forbidden

成功解决wget下载报错 : wget HTTP request sent, awaiting response... 403 Forbidden 问题描述解决方案原理什么是User Agent解决 问题描述 –2023-07-15 02:32:57-- https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2023.03-Linux-x86_64.sh Resolving mi…
阅读更多...
PyTorch: 池化-线性-激活函数层

PyTorch: 池化-线性-激活函数层

文章和代码已经归档至【Github仓库&#xff1a;https://github.com/timerring/dive-into-AI 】或者公众号【AIShareLab】回复 pytorch教程 也可获取。 文章目录 nn网络层-池化-线性-激活函数层池化层最大池化&#xff1a;nn.MaxPool2d()nn.AvgPool2d()nn.MaxUnpool2d()线性层激…
阅读更多...
linux 下如何安装 tar.gz包

linux 下如何安装 tar.gz包

linux 下如何安装 tar.gz包 解压缩进入解压后的文件目录下 解压缩 tar -zxvf pycharm-community-2023.1.3.tar.gz进入解压后的文件目录下 ./pycharm.sh可执行Pycharm 建议将目录转移到其他位置 我习惯使用2020版本的 下载地址
阅读更多...
源码阅读: echo 回显程序

源码阅读: echo 回显程序

文章目录 1. 目的2. 原始代码3. 化简和跨平台支持4. 修改后代码的代码分析5. References 1. 目的 阅读 netbsd 9.3 的 echo.c, 练习 C 语言源码阅读的技能。 2. 原始代码 https://github.com/NetBSD/src/blob/trunk/bin/echo/echo.c /* $NetBSD: echo.c,v 1.23 2021/11/16 …
阅读更多...
2023年Java最新面试题

2023年Java最新面试题

由【后端面试题宝典】提供 和 equals 的区别是什么&#xff1f; 对于基本类型&#xff0c;比较的是值&#xff1b;对于引用类型&#xff0c;比较的是地址&#xff1b;equals不能用于基本类型的比较&#xff1b;如果没有重写equals&#xff0c;equals就相当于&#xff1b;如果重…
阅读更多...
基于JavaSwing+Mysql的仓库销售管理系统

基于JavaSwing+Mysql的仓库销售管理系统

点击以下链接获取源码&#xff1a; https://download.csdn.net/download/qq_64505944/88049275 JDK1.8 MySQL5.7 功能&#xff1a;管理员与员工两个角色登录&#xff0c;基础数据查找&#xff0c;仓库查找&#xff0c;增删改查仓库信息、商品等 源码数据库文件配置文件课程设…
阅读更多...
5分钟构建电商API接口服务 | python小知识

5分钟构建电商API接口服务 | python小知识

1. 什么是API 我们经常会使用一些API接口来完成特定的功能&#xff0c;比如查询天气的数据&#xff0c;下载股票的数据&#xff0c;亦或是调用ChatGPT模型的结构等等。 API全称是Application Programming Interface&#xff0c;即应用程序接口&#xff0c;它通常提供了一个功…
阅读更多...
Mysql单表多表查询练习

Mysql单表多表查询练习

题目要求&#xff1a; 1.查询student表的所有记录 2.查询student表的第2到4条记录 3.从student表查询所有的学生的学号&#xff08;id&#xff09;&#xff0c;姓名&#xff08;name&#xff09;&#xff0c;和院系&#xff08;department&#xff09;的信息 4.从student表…
阅读更多...
SpringAMQP - 消息传输时，如何提高性能？解决 SQL 注入问题？

SpringAMQP - 消息传输时，如何提高性能？解决 SQL 注入问题？

目录 一、问题背景 二、从消息转化器根源解决问题 1.引入依赖 2.在服务生产者和消费者中都重新定义一个 MessageConverter&#xff0c;注入到 Spring 容器中 一、问题背景 在SpringAMQP的发送方法中&#xff0c;接收消息的类型是Object&#xff0c;也就是说我们可以发送任意…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023