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

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

news 2026/1/16 3:29:22

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

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。可以通过配置不同的记录提供程…...

编程新知 2026/1/14 22:54:10

【WiFi帧结构】

文章目录帧结构MAC头部管理帧帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...

编程新知 2026/1/15 6:53:59

蓝桥杯 2024 15届国赛 A组儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐题目描述五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。今天是六一儿童节，小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

Java面试专项一-准备篇

一、企业简历筛选规则一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历例如：Boss直聘（招聘方平台） 直接按照条件进行筛选例如&#xff1a…...

编程新知 2026/1/15 6:33:45

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字不要使用 Kotlin 的任何硬关键字作为方法的名称或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/1/15 6:53:38

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

腾讯云V3签名

想要接入腾讯云的Api，必然先按其文档计算出所要求的签名。之前也调用过腾讯云的接口，但总是卡在签名这一步，最后放弃选择SDK，这次终于自己代码实现。可能腾讯云翻新了接口文档，现在阅读起来，清晰了很多&…...

编程新知 2025/10/19 18:56:12

并发编程 - go版

1.并发编程基础概念进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2026/1/15 5:03:04

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

Scene (场景)

构造器

PerspectiveCamera (透视相机)

构造器

方法

SpotLight (聚光灯)

构造器

属性

Mesh (网格)

构造器

属性

SphereBufferGeometry (球体几何体)

构造器

PlaneGeometry (平面几何体)

构造器

MeshNormalMaterial (网格法线材质)

构造器

MeshStandardMaterial (网格标准材质)

构造器

Vector3 (三维向量)

构造器

方法

ShadowMap (阴影映射)

属性

代码

演示链接

相关文章：