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

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

news 2025/11/10 20:21:49

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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。发送模版消息： import requests da…...

编程新知 2025/11/7 9:55:25

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...

编程新知 2025/11/8 2:45:44

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/11/8 7:50:09

Axios请求超时重发机制

Axios 超时重新请求实现方案在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种低级字节码格式，可由高级语言（如 C、C、Rust&am…...

编程新知 2025/10/21 18:20:07

OpenLayers 分屏对比(地图联动)

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/30 5:23:30

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载四、智能指针…...

编程新知 2025/11/8 5:25:23

【JVM】Java虚拟机（二）——垃圾回收

目录一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四&#xff…...

编程新知 2025/11/10 1:33:33

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题，导致车牌识别率低、逃费率高，传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法，正成为破局关键。该设备安装于车位侧方0.5-0.7米高度，直接规避树枝遮…...

编程新知 2025/11/9 7:53:33

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者：来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。我们非常高兴地宣布，Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明，Elastic 作为 …...

编程新知 2025/11/9 4:48:32

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

Scene (场景)

构造器

PerspectiveCamera (透视相机)

构造器

方法

SpotLight (聚光灯)

构造器

属性

Mesh (网格)

构造器

属性

SphereBufferGeometry (球体几何体)

构造器

PlaneGeometry (平面几何体)

构造器

MeshNormalMaterial (网格法线材质)

构造器

MeshStandardMaterial (网格标准材质)

构造器

Vector3 (三维向量)

构造器

方法

ShadowMap (阴影映射)

属性

代码

演示链接

相关文章：