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

34. Three.js案例-创建球体与模糊阴影

news 2025/11/6 18:54:00

34. Three.js案例-创建球体与模糊阴影

实现效果

知识点

WebGLRenderer

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

构造器

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	Object	可选参数对象，包含以下属性：
antialias	Boolean	是否开启抗锯齿，默认为 `false`。
alpha	Boolean	是否透明，默认为 `false`。
premultipliedAlpha	Boolean	是否使用预乘 Alpha，默认为 `true`。
preserveDrawingBuffer	Boolean	是否保留绘图缓冲区，默认为 `false`。
stencil	Boolean	是否启用模板缓冲区，默认为 `true`。
depth	Boolean	是否启用深度缓冲区，默认为 `true`。

方法

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

Scene

Scene 是 Three.js 中用于存储场景中所有对象的容器。

构造器

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): 设置相机的朝向。

DirectionalLight

DirectionalLight 是 Three.js 中用于创建方向光的类。

构造器

new THREE.DirectionalLight(color, intensity)

参数	类型	描述
color	Color	光源颜色。
intensity	Number	光源强度，默认为 `1`。

属性

castShadow: 是否投射阴影，默认为 false。
shadow.radius: 阴影半径，用于产生模糊效果。

SphereBufferGeometry

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

构造器

new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments)

参数	类型	描述
radius	Number	球体半径。
widthSegments	Number	经度方向上的分段数，默认为 `8`。
heightSegments	Number	纬度方向上的分段数，默认为 `6`。

Mesh

Mesh 是 Three.js 中用于创建网格对象的类。

构造器

new THREE.Mesh(geometry, material)

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

属性

castShadow: 是否投射阴影，默认为 false。
receiveShadow: 是否接收阴影，默认为 false。

PlaneGeometry

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

构造器

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

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

MeshStandardMaterial

MeshStandardMaterial 是 Three.js 中用于创建标准材质的类。

构造器

new THREE.MeshStandardMaterial(parameters)

参数	类型	描述
color	Color	材质颜色。
metalness	Number	金属度，默认为 `0`。
roughness	Number	粗糙度，默认为 `1`。

Vector3

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

构造器

new THREE.Vector3(x, y, z)

参数	类型	描述
x	Number	X 轴坐标。
y	Number	Y 轴坐标。
z	Number	Z 轴坐标。

方法

set(x, y, z): 设置向量的坐标。
rotateX(angle): 绕 X 轴旋转。
rotateY(angle): 绕 Y 轴旋转。
rotateZ(angle): 绕 Z 轴旋转。

代码

<!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 myLight = new THREE.DirectionalLight('white', 1);myLight.castShadow = true;myLight.position.set(0, 14, 0);myLight.shadow.radius = 16;myScene.add(myLight);// 创建球体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, -4.5, 0);myPlaneMesh.receiveShadow = true;myScene.add(myPlaneMesh);// 渲染场景myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接

34. Three.js案例-创建球体与模糊阴影

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

编程日记 2024/12/20 17:33:25

头文件 #include "InsScpi.h" #include <QObject> #include <QSerialPort>class TestSerial : public QObject {Q_OBJECT public:explicit TestSerial(QObject *parent nullptr);//打开设备bool openDevice(const QString &portName);//关闭设备…...

编程日记 2024/12/20 17:32:24

如何用上AI视频工具Sora，基于ChatGPT升级Plus使用指南

没有GPT，可以参考这个教程：详情移步至底部参考原文查看哦~ 1.准备工作详情移步至底部参考原文查看哦~ 详情移步至底部参考原文查看哦~ 4.Sora使用详情移步至底部参考原文查看哦参考文章：【包教包会】如何用上AI视频工具Sora&#xff…...

编程日记 2024/12/20 17:30:20

对象的状态变化处理与工厂模式实现

一、引言在 C 编程中，有效地处理对象的状态变化以及合理运用设计模式可以极大地提高代码的可维护性、可扩展性和可读性。本文将深入探讨 C 如何处理对象的状态变化以及如何实现工厂模式。二、C 中对象的状态变化处理使用成员变量表示状态 class GameCharacte…...

编程日记 2024/12/20 17:29:19

关于IP代理API，我应该了解哪些功能特性？以及如何安全有效地使用它来隐藏我的网络位置？

IP代理API是一种服务，允许用户通过访问经过中间服务器的网络连接来改变其公开的互联网协议地址（IP），从而达到隐藏真实地理位置的效果。以下是您在选择和使用IP代理API时应关注的一些功能和安全性考虑： 匿名度&#xff…...

编程日记 2024/12/20 17:27:17

在Linux上将 `.sh` 脚本、`.jar` 包或其他脚本文件添加到开机自启动

在Linux上将 .sh 脚本、.jar 包或其他脚本文件添加到开机自启动在Linux环境中，有时需要将一些程序、脚本或应用程序设置为开机时自动启动。这对于那些需要在系统启动时启动的服务或应用非常有用。本文将介绍如何将 .sh 脚本、.jar 包或其他脚本文件添加到Linux系统…...

编程日记 2024/12/20 17:25:14

[Maven]构建项目与高级特性

有关于安装配置可以看我的另一篇文章：Maven下载安装配置与简介。构建项目的生命周期和常用命令这一节的内容熟记即可，要用了认得出来即可。在Maven出现之前，项目构建的生命周期就已经存在。对项目进行清理、编译、测试、部署等一系列工作…...

编程日记 2024/12/20 17:24:13

【系统架构设计师】真题论文: 论数据分片技术及其应用（包括解题思路和素材）

更多内容请见：备考系统架构设计师-专栏介绍和目录文章目录真题题目（2020年试题1）解题思路论文素材参考Hash 分片原理一致性 Hash 分片原理按照数据范围（Range Based）分片原理项目采用的分片方式的实现过程和效果真题题目（2020年试题1）数据分片就是按照一定的规则…...

编程日记 2024/12/20 17:23:12

【bWAPP】XSS跨站脚本攻击实战

别低头，皇冠会掉；别流泪，贱人会笑。 0x01、XSS - Reflected (GET) Low 输入的内容直接输出到页面中: 后台服务端没有对输入的参数进行过滤, 构造一个注入xss payload即可: <script>alert(1)</script> 成功弹窗 Medium 审查…...

编程日记 2024/12/20 17:22:11

Ubuntu 22.04，Rime / luna_pinyin.schema 输入法：外挂词库，自定义词库（****) OK

测试平台： Ubuntu 22.04 sudo apt install ibus-rime 实例 1 ：不实用的实例 2 ：实用的文件使用说明：已经内嵌在文件中了。 ====================================== 实例 1 ：不实用的一共需要 3 个文件，放在用户文件夹下：~/.config/ibus/rime/ # Test A @ Fi…...

编程日记 2024/12/20 17:21:08

多协议视频监控汇聚/视频安防系统Liveweb搭建智慧园区视频管理平台

智慧园区作为现代化城市发展的重要组成部分，不仅承载着产业升级的使命，更是智慧城市建设的重要体现。随着产业园区竞争的逐渐白热化，将项目打造成完善的智慧园区是越来越多用户关注的内容。然而我们往往在规划前期就开始面临众多难题&#…...

编程日记 2024/12/20 17:20:05

如何高效获取Twitter数据：Apify平台上的推特数据采集解决方案

引言在数据分析和市场研究领域，Twitter（现在的X）数据一直是重要的信息来源。但是，自从Twitter更改API定价策略后，获取数据的成本大幅提升。本文将介绍一个经济实惠的替代方案。为什么需要Twitter数据？ …...

编程日记 2024/12/20 17:18:03

第二部分：进阶主题 15 . 安全管理 --[MySQL轻松入门教程]

MySQL 数据库的安全管理是一个多方面的工作，涉及到了解和配置数据库的访问控制、加密、备份与恢复策略、日志记录等多个方面。以下是一些关键点： 1. 用户权限管理最小权限原则：每个用户应该只被授予完成其工作所需的最低限度的权限。定期审查权限：定期检查用户的权限，确…...

编程日记 2024/12/20 17:15:59

力扣hot100——双指针

283. 移动零 class Solution { public:void moveZeroes(vector<int>& nums) {for (int i 0, j 0; j < nums.size() || i < nums.size(); j) {if (j > nums.size()) {nums[i] 0;continue;}if (nums[j]) nums[i] nums[j];}} }; 双指针，一个指…...

编程日记 2024/12/20 17:14:58

【代码随想录day58】【C++复健】 117. 软件构建（拓扑排序）；47. 参加科学大会（dijkstra（朴素版）精讲）

117. 软件构建（拓扑排序） 继续边看解析边做题，思考时的问题做个如下的总结： 1. 存边用什么数据结构？ 在题目中，我们需要存储节点之间的依赖关系（边信息）。选择适合的数据结构非常重…...

编程日记 2024/12/20 17:10:54

【NLP 16、实践 ③ 找出特定字符在字符串中的位置】

看着父亲苍老的白发和渐渐老态的面容希望时间再慢一些 —— 24.12.19 一、定义模型 1.初始化模型 ① 初始化父类 super(TorchModel, self).__init__()： 调用父类 nn.Module 的初始化方法，确保模型能够正确初始化。 ② 创建嵌入层 self.embedding n…...

编程日记 2024/12/20 17:07:50

费解的开关（bfs + 哈希表 or 递推）

题目描述： 25盏灯排成一个5x5的方形。每一个灯都有一个开关，游戏者可以改变它的状态。每一步，游戏者可以改变某一个灯的状态。游戏者改变一个灯的状态会产生连锁反应：和这个灯上下左右相邻的灯也要相应地改变其状态。我们用数字“1”表示一盏开着的灯，用数字“0”表示关…...

编程日记 2024/12/20 17:02:45

C语言——实现求出最大值

问题描述：利用C语言自定义函数求出一维数组里边最大的数字 //利用函数找最大数#include<stdio.h>int search(int s[9]) //查找函数 {int i , max s[0] , max_xia 0;for(i0;i<9;i){if(s[i] > max){max_xia i;max s[max_xia];}}return max; } in…...

编程日记 2024/12/20 16:52:35

基于微信小程序的短视频系统（SpringBoot）+文档

💗博主介绍💗：✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示：文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...

编程日记 2024/12/20 16:51:34

Flutter 中 Sliver 的各种装饰器介绍与使用

在 Flutter 中，Sliver 是一种可以在滚动视图中实现自定义效果的组件。Sliver 组件可以根据滚动位置动态改变其外观和行为。本文将介绍几种常用的 Sliver 装饰器及其使用方法。 1. SliverAppBar SliverAppBar 是一个可以随着滚动而变化的应用栏。它可以在用户向下滚…...

编程日记 2024/12/20 16:50:32

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2025/10/30 20:34:49

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

Opencv中的addweighted函数

一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...

编程新知 2025/11/3 23:52:34

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式：数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本模型并行：将模型分割到不同设备，每个设备处理部分模型计算现代大模型训练通常结合…...

编程新知 2025/11/4 22:16:08

企业如何增强终端安全？

在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/11/3 2:05:07

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...

编程新知 2025/10/27 5:23:59

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...

编程新知 2025/8/15 1:44:58

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/10/27 6:30:35

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

Bean 作用域有哪些？如何答出技术深度？

导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答&#xff0c…...

编程新知 2025/11/4 7:58:33

34. Three.js案例-创建球体与模糊阴影

实现效果

知识点

WebGLRenderer

构造器

方法

Scene

构造器

PerspectiveCamera

构造器

方法

DirectionalLight

构造器

属性

SphereBufferGeometry

构造器

Mesh

构造器

属性

PlaneGeometry

构造器

MeshStandardMaterial

构造器

Vector3

构造器

方法

代码

演示链接

相关文章：