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

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

news 2025/12/28 9:47:02

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

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2025/12/27 18:24:55

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...

编程新知 2025/12/22 8:58:18

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

什么是EULA和DPA

文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...

编程新知 2025/10/18 7:13:10

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...

编程新知 2025/11/30 11:30:47

Python如何给视频添加音频和字幕

在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。环境准备在开始之前，需要安装以下Python库：…...

编程新知 2025/9/3 4:12:17

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2025/12/11 5:12:21

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/12/12 7:41:41

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请，不同级别的经理有不同的审批权限： // 抽象处理者：审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/10/16 22:41:12

comfyui 工作流中图生视频如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗？ 在ComfyUI中实现图生视频并延长到5秒，需要结合多个扩展和技巧。以下是完整解决方案： 核心工作流配置（24fps下5秒120帧） #mermaid-svg-yP…...

编程新知 2025/11/4 17:30:04

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

实现效果

知识点

Three.js基础

WebGLRenderer

Scene

Camera

PointLight

SphereBufferGeometry

Mesh

PlaneGeometry

MeshStandardMaterial

代码

演示链接

相关文章：