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

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

news 2025/9/16 9:28:19

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

wordpress后台更新后前端没变化的解决方法

使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...

编程新知 2025/9/16 2:41:23

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器支持多种策略分发流量…...

编程新知 2025/9/14 11:16:46

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/9/14 11:46:41

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2025/9/3 16:32:53

MySQL 知识小结（一）

一、my.cnf配置详解我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...

编程新知 2025/9/3 15:58:14

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看一个默认的页面，gobuster扫一下目录可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到这…...

编程新知 2025/9/4 8:01:03

tomcat指定使用的jdk版本

说明有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置设置方式找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

MySQL 主从同步异常处理

阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示&#xff…...

编程新知 2025/8/4 1:00:56

抽象类和接口（全）

一、抽象类 1.概念：如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象，这样的类就是抽象类。像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法，包含抽象⽅法的类我们称为抽象类。 2.语法在Java中，⼀个类如果被 abs…...

编程新知 2025/9/13 5:37:06

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

Scene (场景)

构造器

PerspectiveCamera (透视相机)

构造器

方法

SpotLight (聚光灯)

构造器

属性

Mesh (网格)

构造器

属性

SphereBufferGeometry (球体几何体)

构造器

PlaneGeometry (平面几何体)

构造器

MeshNormalMaterial (网格法线材质)

构造器

MeshStandardMaterial (网格标准材质)

构造器

Vector3 (三维向量)

构造器

方法

ShadowMap (阴影映射)

属性

代码

演示链接

相关文章：