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

33. Three.js案例-创建带阴影的球体与平面

news 2026/4/2 1:59:29

33. Three.js案例-创建带阴影的球体与平面

实现效果

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。

构造器

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置渲染器的各种属性。

常用参数：

antialias：布尔值，是否开启抗锯齿，默认为 false。
alpha：布尔值，是否允许透明背景，默认为 false。
premultipliedAlpha：布尔值，是否使用预乘 alpha，默认为 true。
preserveDrawingBuffer：布尔值，是否保留绘图缓冲区，默认为 false。
depth：布尔值，是否创建深度缓冲区，默认为 true。
stencil：布尔值，是否创建模板缓冲区，默认为 true。
logarithmicDepthBuffer：布尔值，是否使用对数深度缓冲区，默认为 false。
powerPreference：字符串，指定 GPU 的性能偏好，可选值为 default、high-performance 或 low-power。

方法

setPixelRatio(value)：设置设备像素比。
setSize(width, height, updateStyle)：设置渲染器的尺寸。
setClearColor(color, alpha)：设置渲染器的背景颜色。
render(scene, camera)：渲染场景。

Scene (场景)

Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。

构造器

new THREE.Scene()

PerspectiveCamera (透视相机)

PerspectiveCamera 是 Three.js 中用于创建透视投影的相机。

构造器

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

参数	类型	描述
fov	Number	视野角度，以度为单位。
aspect	Number	相机的宽高比。
near	Number	近裁剪面距离，小于该距离的对象不会被渲染。
far	Number	远裁剪面距离，大于该距离的对象不会被渲染。

方法

position.set(x, y, z)：设置相机的位置。
lookAt(vector)：使相机看向指定的点。

SpotLight (聚光灯)

SpotLight 是 Three.js 中用于创建聚光灯的光源。

构造器

new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)

参数	类型	描述
color	Color	光源的颜色。
intensity	Number	光源的强度，默认为 1。
distance	Number	光源的最大影响距离，默认为 0（无限远）。
angle	Number	光源的光照角度，默认为 Math.PI/3。
penumbra	Number	光源的半影区域，默认为 0。
decay	Number	光源的衰减，默认为 1。

属性

castShadow：布尔值，是否投射阴影，默认为 false。

Mesh (网格)

Mesh 是 Three.js 中用于创建 3D 对象的基本类。

构造器

new THREE.Mesh(geometry, material)

参数	类型	描述
geometry	Geometry	网格的几何体。
material	Material	网格的材质。

属性

castShadow：布尔值，是否投射阴影，默认为 false。
receiveShadow：布尔值，是否接收阴影，默认为 false。

SphereBufferGeometry (球体几何体)

SphereBufferGeometry 是 Three.js 中用于创建球体几何体的类。

构造器

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

参数	类型	描述
radius	Number	球体的半径。
widthSegments	Number	经度方向上的分段数，默认为 8。
heightSegments	Number	纬度方向上的分段数，默认为 6。
phiStart	Number	经度起始角度，默认为 0。
phiLength	Number	经度范围，默认为 2 * Math.PI。
thetaStart	Number	纬度起始角度，默认为 0。
thetaLength	Number	纬度范围，默认为 Math.PI。

PlaneGeometry (平面几何体)

PlaneGeometry 是 Three.js 中用于创建平面几何体的类。

构造器

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

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

MeshNormalMaterial (网格法线材质)

MeshNormalMaterial 是 Three.js 中用于显示网格法线的材质。

构造器

new THREE.MeshNormalMaterial(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置材质的各种属性。

常用参数：

wireframe：布尔值，是否以线框模式显示，默认为 false。
transparent：布尔值，是否允许透明，默认为 false。

MeshStandardMaterial (网格标准材质)

MeshStandardMaterial 是 Three.js 中用于创建物理上准确的标准材质。

构造器

new THREE.MeshStandardMaterial(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置材质的各种属性。

常用参数：

color：颜色值，材质的颜色。
metalness：浮点数，金属度，默认为 0。
roughness：浮点数，粗糙度，默认为 1。

Vector3 (三维向量)

Vector3 是 Three.js 中用于表示三维向量的类。

构造器

new THREE.Vector3(x, y, z)

参数	类型	描述
x	Number	向量的 x 分量。
y	Number	向量的 y 分量。
z	Number	向量的 z 分量。

方法

set(x, y, z)：设置向量的各个分量。
multiplyScalar(scalar)：将向量的各个分量乘以一个标量。

ShadowMap (阴影映射)

ShadowMap 是 Three.js 中用于启用和配置阴影映射的功能。

属性

enabled：布尔值，是否启用阴影映射，默认为 false。

代码

<!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);// 创建场景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));// 启用阴影映射myRenderer.shadowMap.enabled = true;// 添加渲染器到容器$("#myContainer").append(myRenderer.domElement);// 创建聚光灯var mySpotLight = new THREE.SpotLight('white');mySpotLight.position.set(-3, 46, -1);mySpotLight.distance = 80;mySpotLight.angle = Math.PI / 50;mySpotLight.castShadow = true;myScene.add(mySpotLight);// 创建球体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>

演示链接

示例链接

33. Three.js案例-创建带阴影的球体与平面

33. Three.js案例-创建带阴影的球体与平面实现效果知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersObject可选参数…...

编程日记 2024/12/18 15:07:16

Three.js材质纹理扩散过渡 import * as THREE from "three"; import { ThreeHelper } from "/src/ThreeHelper"; import { LoadGLTF, MethodBaseSceneSet } from "/src/ThreeHelper/decorators"; import { MainScreen } from "/src/compone…...

编程日记 2024/12/18 15:05:14

免费开源！推荐一款网页版数据库管理工具！

免费开源！推荐一款网页版数据库管理工具！ DBGate 是一个开源的数据库管理工具，DBGate 的最大特点是可以 Web 访问！，轻松实现一台机器部署，所有人使用！ 无论是 MySQL、PostgreSQL、SQLite 还是…...

编程日记 2024/12/18 15:03:11

生态系统NPP及碳源、碳汇模拟实践技术应用（土地利用变化、未来气候变化、空间动态模拟）

由于全球变暖、大气中温室气体浓度逐年增加等问题的出现，“双碳”行动特别是碳中和已经在世界范围形成广泛影响。碳中和可以从碳排放（碳源）和碳固定（碳汇）这两个侧面来理解。陆地生态系统在全球碳循环过程中有着重要作…...

编程日记 2024/12/18 14:57:05

Mvc、Springmvc框架

一.Mvc： 1.概念： MVC它是一种设计理念。把程序按照指定的结构来划分: Model模型、View视图、Controller控制层； 结构图： 二.Springmvc: 1.概念： springmvc框架它是spring框架的一个分支。它是按照mvc架构思想设计…...

编程日记 2024/12/18 14:56:04

MATLAB2021B APP seriallist 串口通信

文章目录前言一、项目需要二、使用步骤1.查找串口填写到查找列表2.发送函数3. 接收函数4.检测串口按钮5.选择串口号总结前言提示：这里可以添加本文要记录的大概内容： 项目需要： 提示：以下是本篇文章正文内容，下面…...

编程日记 2024/12/18 14:54:01

【Python爬虫系列】_033.Scrapy_分布式爬虫

课程推荐我的个人主页：👉👉 失心疯的个人主页 👈👈入门教程推荐：👉👉 Python零基础入门教程合集 👈👈虚拟环境搭建：👉👉 Python项目虚拟环境(超详细讲解) 👈👈PyQt5 系列教程：👉👉 Python GUI(PyQt5)教程合集 👈👈…...

编程日记 2024/12/18 14:50:58

2025erp系统开源免费进销存系统搭建教程/功能介绍/上线即可运营软件平台源码

系统介绍基于ThinkPHP与LayUI构建的全方位进销存解决方案本系统集成了采购、销售、零售、多仓库管理、财务管理等核心功能模块，旨在为企业提供一站式进销存管理体验。借助详尽的报表分析和灵活的设置选项，企业可实现精细化管理，提升运营效…...

编程日记 2024/12/18 14:47:55

Android实战经验篇-busybox小工具

Android开发系列文章请转如下链接 Android实战经验篇-系列文章 Android Display Graphics系列文章-汇总俗话说“工欲善其事，必先利其器！” 在原生Android系统中，提供的基础调试命令是基于toybox的。支持的命令不够全面，而Busy…...

编程日记 2024/12/18 14:46:54

上海艾一公司-运维工程师知识点备战

1.AD域控（ActionDirectory活动目录） ad域的作用：批量管理主机和用户（所以数量要多用这个才合适） 前置1：VM安装Windows镜像 2.IT资产管理 3.会议室管理...

编程日记 2024/12/18 14:39:46

【网络安全】Web安全基础- 第一节：web前置基础知识

目录前言一、中间件1.1消息中间件1.2数据库中间件1.3web服务器中间件1.4应用服务器中间件1.5远程过程调用中间件二、源码**组成部分：**1、**前端（客户端）代码：**2、**后端（服务器端）代码**：3…...

编程日记 2024/12/18 14:35:43

数仓开发那些事_番外（2）

一闪在摸爬滚打了数年后，结合去年获得了个优秀员工，现在负责数据开发一面。神州员工：一闪，你们还缺人不，不想当外包了。一闪：我只负责招开发，实施的招聘我参与不了哇。（所以你能…...

编程日记 2024/12/18 14:34:42

Linux常用指令-----下

Linux常用指令------上 Linux常用指令------中 Linux系列文章目录 Linux系列前言一、more指令二、less指令三、head指令和tail指令四、grep指令五、zip指令和unzip指令六、tar指令1、打包压缩2. 预览3. 解压解包前言在上一篇博客中，我給大家介绍了cat指令&#…...

编程日记 2024/12/18 14:30:38

MySQL通过binlog日志进行数据恢复

记录一次阿里云MySQL通过binlog日志进行数据回滚问题描述由于阿里云远程mysql没有做安全策略所以服务器被别人远程攻击把数据库给删除，通过查看binlog日志可以看到进行了drop操作，下面将演示通过binlog日志进行数据回滚操作。 1、查询是否开始binlog …...

编程日记 2024/12/18 14:28:35

【AIGC】与模型对话：理解与预防ChatGPT中的常见误解

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | ChatGPT 文章目录 💯前言💯模型的工作原理和用户期望差异人工智能模型的基本工作原理认知上的局限与误解用户期望与模型实际能力的差距精确理解用户意图的重要性实际应用中的建议 &…...

编程日记 2024/12/18 14:27:33

字符2

strncpy n表示最多拷贝n个字符到目标字符串，当源字符串的字符个数不够时，就拷贝\0直至拷贝n个(源字符串不一定有\0），相对strcpy更加安全 char* strncpy (char* destination, const char* source, size_t n); strncat 当源字符串…...

编程日记 2024/12/18 14:26:30

25年宁德时代社招在职晋升Verify测评SHL题库：语言理解+数字推理考什么？

宁德时代的社招测评采用Verify系统，主要分为两大核心部分：语言理解和数字推理。 1. **语言理解部分**：包括阅读理解、逻辑填空和语句排序等题型。要求应聘者在17分钟内完成30题，旨在考察应聘者的阅读速度、理解准确性和逻辑性。 …...

编程日记 2024/12/18 14:21:24

数据转换：连接数据孤岛，释放信息价值

引言在当今这个数据驱动的时代，数据转换已成为企业获取竞争优势的关键。随着数据量的爆炸性增长，不同来源、不同格式的数据需要被整合和转换，以便于分析和决策。本文将探讨数据转换的重要性、常见方法、工具以及最佳实践。数据转换的重要…...

编程日记 2024/12/18 14:18:19

提升PHP技能：18个实用高级特性

掌握PHP基础知识只是第一步。深入了解这18个强大的PHP特性，将显著提升您的开发效率和代码质量。 1、超越 __construct() 的魔法方法虽然 __construct() 为大多数开发者所熟知，PHP 却提供了更多强大的魔术方法，例如： class Da…...

编程日记 2024/12/18 14:13:13

MySQL基础操作（2）

目录 1. CONCAT() 2. 3. ! 或 <> 4. IS NULL 5. IS NOT NULL 6. BETWEEN ... AND ... 7. LIKE 8. ORDER BY 9. LIMIT 10. LENGTH() 11. SUBSTR() 12. UPPER() 13. LOWER() 14. CONCAT_WS() 15. REPLACE() 16. INSTR() 17. TRIM() 18. IFNULL() 19. SY…...

编程日记 2024/12/18 14:12:12

大疆诉影石创新专利侵权，FTO综合分析筑牢研发风控屏障

3月23日，全球无人机巨头大疆对同行影石创新提起专利权属纠纷诉讼，涉案6项专利聚焦无人机飞行控制、结构设计、影像处理等核心技术领域，这场行业龙头间的知识产权纠纷，成为近日行业关注焦点。职务发明权属成为争议关键本次纠纷由大…...

编程新知 2026/4/2 1:50:15

vue3 diff算法中的-双端 Diff + 最长递增子序列讲解

一句话总结 Vue3 Diff 双端比较（快速复用） 最长递增子序列（最小移动 DOM） 目的：在乱序节点中，只移动最少 DOM，实现最高效更新。1. 先搞懂：Vue3 对比 Vue2 差在哪？ Vue2…...

编程新知 2026/4/2 1:44:14

新手避坑指南：用STC89C51和DHT11搭建温湿度报警器（附Keil5代码调试心得）

从零搭建温湿度报警器：STC89C51与DHT11实战避坑手册第一次接触51单片机项目时，那种既兴奋又忐忑的心情至今记忆犹新。看着网上的开源项目资料，满心以为按部就班就能成功，结果从元器件选型到代码烧录，几乎每一步都踩了…...

编程新知 2026/4/2 0:55:48

485总线硬件设计必看：电平匹配、TVS防护，还有exmodbus库快速上手

RS485是工业物联网的标配通信接口。合宙Air780EHV系列Cat.1模组凭借强大外设扩展能力（LCD、摄像头、以太网、CAN等）和LuatOS高效开发环境，支持TCP/MQTT/HTTP/Modbus等主流协议，是工业场景的高性价比之选。本文聚焦RS485实战&…...

编程新知 2026/4/1 22:23:19

终极指南：如何用res-downloader一键下载全网无水印资源

终极指南：如何用res-downloader一键下载全网无水印资源【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 你是否经常…...

编程新知 2026/4/1 22:23:19

[STM32问题解决（2）]编译错误：Error: L6218E的深度解析与实战排查指南

1. 认识Error: L6218E编译错误当你正在Keil MDK环境下开发STM32项目时，突然弹出一个红色错误提示："Error: L6218E: Undefined symbol xxx (referred from xxx.o)"，这可能是每个STM32开发者都会遇到的经典问题。我第一次遇到这个错…...

编程新知 2026/4/1 20:31:56