当前位置：首页 > news >正文

36. Three.js案例-创建带光照和阴影的球体与平面

news 文章来源：https://blog.csdn.net/m0_51180924/article/details/144576243 2025/5/17 21:42:30

36. Three.js案例-创建带光照和阴影的球体与平面

实现效果

知识点

Three.js基础

WebGLRenderer

WebGLRenderer 是Three.js中最常用的渲染器，用于将场景渲染到网页上。

构造器

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	object	可选参数，用于配置渲染器。包括但不限于 `antialias`（抗锯齿）、`alpha`（透明度）等。

方法

setPixelRatio(value): 设置设备像素比。
setSize(width, height): 设置渲染器的尺寸。
setClearColor(color, alpha): 设置渲染器的背景颜色。
shadowMap.enabled: 启用或禁用阴影映射。
render(scene, camera): 渲染场景。

Scene

Scene 是Three.js中的场景对象，用于存储所有需要渲染的对象。

构造器

new THREE.Scene()

Camera

PerspectiveCamera 是Three.js中的一种透视相机，用于模拟人眼的视觉效果。

构造器

new THREE.PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	float	视野角度，单位为度。
aspect	float	相机宽高比。
near	float	近裁剪面距离。
far	float	远裁剪面距离。

方法

position.set(x, y, z): 设置相机的位置。
lookAt(vector): 设置相机的朝向。

PointLight

PointLight 是Three.js中的点光源，用于模拟从一个点发出的光。

构造器

new THREE.PointLight(color, intensity, distance, decay)

参数	类型	描述
color	color	光源颜色。
intensity	float	光源强度。
distance	float	光源的最大影响距离。如果为0，则表示无限远。
decay	float	光源衰减系数。默认值为1。

属性

castShadow: 是否投射阴影。
distance: 光源的最大影响距离。
intensity: 光源强度。

SphereBufferGeometry

SphereBufferGeometry 用于创建一个球体几何体。

构造器

new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

参数	类型	描述
radius	float	球体半径。
widthSegments	int	经度方向上的分段数。默认值为8。
heightSegments	int	纬度方向上的分段数。默认值为6。
phiStart	float	球体起始经度。默认值为0。
phiLength	float	球体经度范围。默认值为2π。
thetaStart	float	球体起始纬度。默认值为0。
thetaLength	float	球体纬度范围。默认值为π。

Mesh

Mesh 是Three.js中的网格对象，用于将几何体和材质组合在一起。

构造器

new THREE.Mesh(geometry, material)

参数	类型	描述
geometry	Geometry	几何体对象。
material	Material	材质对象。

属性

castShadow: 是否投射阴影。
receiveShadow: 是否接收阴影。

PlaneGeometry

PlaneGeometry 用于创建一个平面几何体。

构造器

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

参数	类型	描述
width	float	平面的宽度。
height	float	平面的高度。
widthSegments	int	宽度方向上的分段数。默认值为1。
heightSegments	int	高度方向上的分段数。默认值为1。

MeshStandardMaterial

MeshStandardMaterial 是Three.js中的一种标准材质，支持物理光照模型。

构造器

new THREE.MeshStandardMaterial(parameters)

参数	类型	描述
parameters	object	可选参数，用于配置材质。包括但不限于 `color`（颜色）、`roughness`（粗糙度）、`metalness`（金属度）等。

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>// 创建渲染器var myRenderer = new THREE.WebGLRenderer();myRenderer.setPixelRatio(window.devicePixelRatio);myRenderer.setSize(480, 320);myRenderer.setClearColor('white', 1);myRenderer.shadowMap.enabled = true;$("#myContainer").append(myRenderer.domElement);// 创建场景var myScene = new THREE.Scene();// 创建相机var myCamera = new THREE.PerspectiveCamera(45, 480 / 320, 0.1, 1000);myCamera.position.set(4, 4, 2);myCamera.position.multiplyScalar(2);myCamera.lookAt(new THREE.Vector3(0, 0, 0));// 创建点光源var myPointLight = new THREE.PointLight('white');myPointLight.position.set(0, 6, 0);myPointLight.distance = 380;myPointLight.castShadow = true;myScene.add(myPointLight);// 创建球体var mySphereGeometry = new THREE.SphereBufferGeometry(2, 36, 36);var mySphereMaterial = new THREE.MeshNormalMaterial({wireframe: true, transparent: true});var mySphereMesh = new THREE.Mesh(mySphereGeometry, mySphereMaterial);mySphereMesh.position.set(0, 2.5, 0);mySphereMesh.castShadow = true;myScene.add(mySphereMesh);// 创建平面var myPlaneGeometry = new THREE.PlaneGeometry(120, 120, 1, 1);var myPlaneMaterial = new THREE.MeshStandardMaterial({color: 'white'});var myPlaneMesh = new THREE.Mesh(myPlaneGeometry, myPlaneMaterial);myPlaneMesh.rotateX(-Math.PI / 2);myPlaneMesh.rotateZ(-Math.PI / 7);myPlaneMesh.position.set(0, -3.5, 0);myPlaneMesh.receiveShadow = true;myScene.add(myPlaneMesh);// 渲染场景myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接

36. Three.js案例-创建带光照和阴影的球体与平面

36. Three.js案例-创建带光照和阴影的球体与平面实现效果知识点 Three.js基础 WebGLRenderer WebGLRenderer 是Three.js中最常用的渲染器，用于将场景渲染到网页上。构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersobject可选参数&#…...

编程日记 2024/12/22 7:04:17

CentOS 7 安装、测试和部署FastDFS

目录 FastDFS环境搭建安装 libfastcommon 库安装FastDFS 查看编译后的文件 FastDFS配置 FastDFS启动启动tracker服务启动storage服务查看storage是否已经注册到了tracker下查看存储文件的目录 FastDFS重启 FastDFS关闭使用fdfs_test进行测试修改client.co…...

编程日记 2024/12/22 7:02:15

全志H618 Android12修改doucmentsui选中图片资源详情信息

背景：由于当前的文件管理器在我们的产品定义当中，某些界面有改动的需求，所以需要在Android12 rom中进行定制以符合当前产品定义。需求: 进入file文件管理器后，点击选中图片资源，选中功能按钮，获取信息，不显示“调试信息(仅开发者)”；现状是，获取信息，显示“调试信…...

编程日记 2024/12/22 6:54:05

【083】基于51单片机智能烘手器【Proteus仿真+Keil程序+报告+原理图】

☆、设计硬件组成：51单片机最小系统LCD1602液晶显示DS18B20温度传感器TCRT5000红外感应传感器AT24C02存储芯片风扇加热片继电器LED灯按键设置。 1、设计采用STC89C51/52、AT89C51/52、AT89S51/52作为主控芯片； 2、系统采用DS18B20温度传感器感应当前环…...

编程日记 2024/12/22 6:53:04

uniApp使用腾讯地图提示未添加maps模块

uniApp使用腾讯地图，打包提示未添加maps模块解决方案这是报错信息，在标准基座运行的时候是没问题的，但是打包后会提示未添加，可以通过在mainfest里面把地图插件上腾讯地图的key更换高德地图的key，定位服务可以继续用腾…...

编程日记 2024/12/22 6:44:56

未来趋势系列篇五：自主可控科技题材解析和股票梳理

文章目录系列文章自主可控科技题材分析国产算力信创（信息技术应用创新）华为鸿蒙军工信息化半导体芯片卫星互联网工业软件股票梳理系列文章未来趋势系列篇一：AI题材解析和股票梳理未来趋势系列篇一（加更）：AI医疗题材解析和股票梳理未来趋势系列篇二：HBM题材解析和…...

编程日记 2024/12/22 6:43:55

Springboot 学习之 logback-spring.xml 日志压缩 .tmp 临时文件问题

文章目录前言功能简述1. 自定义日志文件名2. 归档规则 && 压缩2.1. 归档配置2.2. 归档压缩2.3. 日志格式 && 编码现象原因解决办法前言在 Springboot 应用中，默认使用 logback-spring.xml 配置日志相关功能简述 1. 自定义日志文件名 <fi…...

编程日记 2024/12/22 6:39:52

maven-resources-production:ratel-fast: java.lang.IndexOutOfBoundsException

Maven生产环境中遇到java.lang.IndexOutOfBoundsException的问题，尝试了重启电脑、重启IDEA等常规方法无效，最终通过直接重建工程解决了问题。 Rebuild Project 再启动OK...

编程日记 2024/12/22 6:36:49

K8s docker-compose的入门

一、Docker Compose 简介什么是 Docker Compose？ 用于定义和运行多容器 Docker 应用的工具。Docker Compose 的主要功能使用 docker-compose.yml 文件定义服务。一键启动和管理多容器环境。安装与环境准备安装 Docker 和 Docker Compose。检查版本：d…...

编程日记 2024/12/22 6:35:48

去雾Cycle-GAN损失函数

文章目录 GAN-LossIdentity-LossDP-lossCycle-Loss G和F都是生成器 G是hazy → \to → gt F是gt → \to → hazy D y D_y Dy判别无雾图是真实还是生成的？ D x D_x Dx判别有雾图是真实还是生成的？ GAN-Loss 在 DAM-CCGAN 中存在两个判别器 D x D_x D…...

编程日记 2024/12/22 6:31:44

word实现两栏格式公式居中，编号右对齐

1、确定分栏的宽度选定一段文字点击分栏：如本文的宽度为22.08字符 2、将公式设置为两端对齐，首行无缩进。将光标放在公式前面点击格式-->段落-->制表位在“制表位位置”输入-->11.04字符（22.08/211.04字符）&…...

编程日记 2024/12/22 6:30:43

vtie项目中使用到了TailwindCSS，如何打包成一个单独的CSS文件（优化、压缩）

在不依赖 Vite 或其他构建工具的情况下，使用 TailwindCSS CLI 快速生成独立的 CSS 文件是一种简单高效的方法，适合需要纯样式文件的场景。这个项目中，使用到了tailwindCss, 需要把里面的样式打包出来，给其他项目用。使用命令生…...

编程日记 2024/12/22 6:29:42

shell脚本案例

脚本一：打印当前系统登录用户列表 #!/bin/bash # 使用 who 命令获取当前登录用户信息并输出 who解释：who 命令用于显示当前登录系统的用户信息，包括用户名、登录终端、登录时间等。此脚本直接执行 who 命令并将结果输出到终端。脚本二&…...

编程日记 2024/12/22 6:23:36

完整微服务设计功能实现

我们将以一个简单的电商系统为例，实现微服务架构，逐步用Java代码详细实现每个模块，并配合注释帮助小白理解。在这个实现中，我们使用以下工具和框架： Spring Boot：用于构建微服务。Spring Cloud&#xff1a…...

编程日记 2024/12/22 6:20:33

JWT令牌与微服务

1. 什么是JWT JWT（JSON Web Token）是一种开放标准(RFC 7519)，它定义了一种紧凑且自包含的方式，用于作为JSON对象在各方之间安全地传输信息。JWT通常用于身份验证和信息交换。以下是JWT的一些关键特性： 紧凑&#xff…...

编程日记 2024/12/22 6:15:29

C# WinForm移除非法字符的输入框文章目录 namespace System.Windows.Forms {using System.ComponentModel;/// <summary>/// 支持移除非法字符的输入框。/// </summary>public class RemoveInvalidCharTextBox : TextBox{/// <summary>/// 测试代码&#…...

编程日记 2024/12/22 6:14:28

智慧商城：基于请求数据动态渲染购物车列表

进入购物车列表页面，当即触发请求，打印出解构出来的data.list 查看数据是否添加到 vuex 中。将物品加入购物车，点击购物车进入购物车列表页，点击 vue 调试工具，可以看到 cart 模块state中新增添加的几个物品信息渲染…...

编程日记 2024/12/22 6:13:27

医疗信息化浪潮下 SSM+Vue 医院预约挂号系统的崛起

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。是基于SQL的客户/服务器模式的关系数据库管理系统，它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等，非常…...

编程日记 2024/12/22 6:09:23

QScreen在Qt5.15与Qt6.8版本下的区别

简述 QScreen主要用于提供与屏幕相关的信息。它可以获取有关显示设备的分辨率、尺寸、DPI（每英寸点数）等信息。本文主要是介绍Qt5.15与Qt6环境下，QScreen的差异，以及如何判断高DPI设备。属性说明 logicalDotsPerInch&#xff1…...

编程日记 2024/12/22 6:08:21

模具生产过程中的标签使用流程图

①NFC芯片嵌入周转筐，通过读卡器读取CK_Label_v3的数据，并将这些信息上传至服务器进行存储； ②服务器随后与客户的WMS（仓库管理系统）进行交互，记录和同步注塑机的原始数据； ③当周转筐内的模具…...

编程日记 2024/12/22 6:06:17

Unity-URP设置单独渲染UI相机

Unity-URP设置单独渲染UI相机 1、设置主相机层级，剔除UI层 2、新建UICamera，设置RenderType为Overiay；显示层级只选择UI层 3、选择主相机，Stack参数添加UICamera 4、Canvas设置成ScreenSpace-Camera，并指定UICamera渲…...

编程日记 2024/12/22 6:04:16

如何使用java来解析一个pdf文件呢？

最近搞到一个任务是要解析一套雅思题目并提取其中的高频单词。那如何使用java来解析一个pdf文件呢？ 首先我们要知道这需要springboot框架来进行创建，需要的PDFTextStripper是一个用于PDF文档中提取文本的类，它是Apache PDFBox的一个类用于处…...

编程日记 2024/12/22 6:03:14

asp.net core发布配置端口号，支持linux

方式一，修改配置文件 appsettings.json 找到文件 appsettings.json， 添加如下节点配置，在linux环境需要设置0.0.0.0才可以正常代表本机，然后被其他机器访问，此处设置端口8000， "Kestrel": {&quo…...

编程日记 2024/12/22 6:01:13

M3D: 基于多模态大模型的新型3D医学影像分析框架，将3D医学图像分析从“看图片“提升到“理解空间“的层次，支持检索、报告生成、问答、定位和分割等8类任务

M3D: 基于多模态大模型的新型3D医学影像分析框架，将3D医学图像分析从“看图片“提升到“理解空间“的层次，支持检索、报告生成、问答、定位和分割等8类任务论文大纲理解1. 确认目标2. 分析过程（目标-手段分析）核心问题拆解 3. 实…...

编程日记 2024/12/22 5:58:09

JavaScript中，常用crypto模块进行rsa加密，crypto-js模块进行md5算法

Node.js 的 crypto 模块 Node.js 内置的 crypto 模块提供了基本的加密功能，可以用于生成 RSA 密钥对和执行加密、解密操作。代码案例： const crypto require(crypto);const { publicKey, privateKey } crypto.generateKeyPairSync(rsa, {modulusLen…...

编程日记 2024/12/22 5:57:08

机器学习04-为什么Relu函数

机器学习0-为什么Relu函数文章目录机器学习0-为什么Relu函数 [toc]1-手搓神经网络步骤总结2-为什么要用Relu函数3-进行L1正则化修改后的代码解释 4-进行L2正则化解释注意事项 5-Relu激活函数多有夸张1-细数Relu函数的5宗罪2-Relu函数5宗罪详述 6-那为什么要用这个Relu函数7-文…...

编程日记 2024/12/22 5:56:06

基于Arduino的自动开瓶系统

自动瓶盖开启器：结合Arduino和线性运动系统的创新解决方案展示视频： 基于Arduino的自动开瓶器引言在日常生活中，开启瓶盖看似是一件简单的事情，但对于某些人来说，这可能是一个挑战。特别是对于患有类风湿性关节炎…...

编程日记 2024/12/22 5:55:06

通过使用 contenteditable=“true“，我们彻底防止了 iOS 系统键盘的弹出

明白了，对于苹果手机（iOS），即使使用了 bindtap 和 e.preventDefault() 来阻止默认行为，系统键盘仍然可能会弹出。这是因为 iOS 对输入框的处理方式与 Android 不同，尤其是在处理 input 元素时，iOS 会更加积极地弹出键盘。解决方案为了彻底防止 iOS 系统键盘弹出，我…...

编程日记 2024/12/22 5:53:03

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕 2024/12/17 17:21 缘起，最近需要识别法国电影《地下铁》的法语字幕，使用字幕小工具V1.2【whisper套壳/GUI封装了】无效。那就是直接使用最原始的whisper来干了。当你重装WIN10的时候&#…...

编程日记 2024/12/22 5:47:59

搜索召回：召回聚合

召回聚合用户的查询意图往往是复杂多样的，可能涉及到不同的领域、主题和语义层面。因此，召回体系中通常通过多路召回的方式从不同角度去理解和满足用户的查询需求。此外，多路召回通过各召回通道并行计算可以在海量数据中能够快速响应&#…...

编程日记 2024/12/22 5:45:57

36. Three.js案例-创建带光照和阴影的球体与平面

实现效果

知识点

Three.js基础

WebGLRenderer

Scene

Camera

PointLight

SphereBufferGeometry

Mesh

PlaneGeometry

MeshStandardMaterial

代码

演示链接

相关文章：