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

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

news 2026/5/21 20:13:41

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

Photoshop图层批量导出终极指南：告别手动操作的时代

Photoshop图层批量导出终极指南：告别手动操作的时代【免费下载链接】Photoshop-Export-Layers-to-Files-Fast This script allows you to export your layers as individual files at a speed much faster than the built-in script from Adobe. 项目地址: https…...

编程新知 2026/5/21 18:30:20

X光安检目标识别分割数据集lableme格式2000张5类别

数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件)图片数量(jpg文件个数)：2000标注数量(json文件个数)：2000标注类别数：5标注类别名称:["Electronic Items","Laptop",&quo…...

编程新知 2026/5/21 17:09:39

如何实现EditorConfig-Sublime与VSCode、IntelliJ的无缝协同工作流

如何实现EditorConfig-Sublime与VSCode、IntelliJ的无缝协同工作流【免费下载链接】editorconfig-sublime Sublime Text plugin for EditorConfig - Helps developers maintain consistent coding styles between different editors 项目地址: https://gitcode.com/gh_mirro…...

编程新知 2026/5/21 15:50:11

零代码自动化终极指南：用taskt在5分钟内解放你的双手

零代码自动化终极指南：用taskt在5分钟内解放你的双手【免费下载链接】taskt taskt (pronounced tasked and formely sharpRPA) is free and open-source robotic process automation (rpa) built in C# powered by the .NET Framework 项目地址: https://gitcode…...

编程新知 2026/5/21 15:29:27

PowerBI主题模板终极指南：35款专业模板一键美化数据报表

PowerBI主题模板终极指南：35款专业模板一键美化数据报表【免费下载链接】PowerBI-ThemeTemplates Snippets for assembling Power BI Themes 项目地址: https://gitcode.com/gh_mirrors/po/PowerBI-ThemeTemplates 还在为PowerBI报表的单调外观而烦恼吗&…...

编程新知 2026/5/21 14:49:19

3步拯救损坏视频！UNTRUNC开源工具让你的珍贵回忆重获新生

3步拯救损坏视频！UNTRUNC开源工具让你的珍贵回忆重获新生【免费下载链接】untrunc Restore a damaged (truncated) mp4, m4v, mov, 3gp video. Provided you have a similar not broken video. 项目地址: https://gitcode.com/gh_mirrors/unt/untrunc 你是否…...

编程新知 2026/5/21 14:36:32