34. Three.js案例-创建球体与模糊阴影
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可选参数对象,包…...
Qt同步读取串口
头文件 #include "InsScpi.h" #include <QObject> #include <QSerialPort>class TestSerial : public QObject {Q_OBJECT public:explicit TestSerial(QObject *parent nullptr);//打开设备bool openDevice(const QString &portName);//关闭设备…...
如何用上AI视频工具Sora,基于ChatGPT升级Plus使用指南
没有GPT,可以参考这个教程:详情移步至底部参考原文查看哦~ 1.准备工作 详情移步至底部参考原文查看哦~ 详情移步至底部参考原文查看哦~ 4.Sora使用 详情移步至底部参考原文查看哦 参考文章:【包教包会】如何用上AI视频工具Soraÿ…...
对象的状态变化处理与工厂模式实现
一、引言 在 C 编程中,有效地处理对象的状态变化以及合理运用设计模式可以极大地提高代码的可维护性、可扩展性和可读性。本文将深入探讨 C 如何处理对象的状态变化以及如何实现工厂模式。 二、C 中对象的状态变化处理 使用成员变量表示状态 class GameCharacte…...
关于IP代理API,我应该了解哪些功能特性?以及如何安全有效地使用它来隐藏我的网络位置?
IP代理API是一种服务,允许用户通过访问经过中间服务器的网络连接来改变其公开的互联网协议地址(IP),从而达到隐藏真实地理位置的效果。以下是您在选择和使用IP代理API时应关注的一些功能和安全性考虑: 匿名度ÿ…...
在Linux上将 `.sh` 脚本、`.jar` 包或其他脚本文件添加到开机自启动
在Linux上将 .sh 脚本、.jar 包或其他脚本文件添加到开机自启动 在Linux环境中,有时需要将一些程序、脚本或应用程序设置为开机时自动启动。这对于那些需要在系统启动时启动的服务或应用非常有用。本文将介绍如何将 .sh 脚本、.jar 包或其他脚本文件添加到Linux系统…...
[Maven]构建项目与高级特性
有关于安装配置可以看我的另一篇文章:Maven下载安装配置与简介。 构建项目的生命周期和常用命令 这一节的内容熟记即可,要用了认得出来即可。 在Maven出现之前,项目构建的生命周期就已经存在。对项目进行清理、编译、测试、部署等一系列工作…...
【系统架构设计师】真题论文: 论数据分片技术及其应用(包括解题思路和素材)
更多内容请见: 备考系统架构设计师-专栏介绍和目录 文章目录 真题题目(2020年 试题1)解题思路论文素材参考Hash 分片原理一致性 Hash 分片原理按照数据范围(Range Based)分片原理项目采用的分片方式的实现过程和效果真题题目(2020年 试题1) 数据分片就是按照一定的规则…...
【bWAPP】XSS跨站脚本攻击实战
别低头,皇冠会掉;别流泪,贱人会笑。 0x01、XSS - Reflected (GET) Low 输入的内容直接输出到页面中: 后台服务端没有对输入的参数进行过滤, 构造一个注入xss payload即可: <script>alert(1)</script> 成功弹窗 Medium 审查…...
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…...
多协议视频监控汇聚/视频安防系统Liveweb搭建智慧园区视频管理平台
智慧园区作为现代化城市发展的重要组成部分,不仅承载着产业升级的使命,更是智慧城市建设的重要体现。随着产业园区竞争的逐渐白热化,将项目打造成完善的智慧园区是越来越多用户关注的内容。 然而我们往往在规划前期就开始面临众多难题&#…...
如何高效获取Twitter数据:Apify平台上的推特数据采集解决方案
引言 在数据分析和市场研究领域,Twitter(现在的X)数据一直是重要的信息来源。但是,自从Twitter更改API定价策略后,获取数据的成本大幅提升。本文将介绍一个经济实惠的替代方案。 为什么需要Twitter数据? …...
第二部分:进阶主题 15 . 安全管理 --[MySQL轻松入门教程]
MySQL 数据库的安全管理是一个多方面的工作,涉及到了解和配置数据库的访问控制、加密、备份与恢复策略、日志记录等多个方面。以下是一些关键点: 1. 用户权限管理 最小权限原则:每个用户应该只被授予完成其工作所需的最低限度的权限。定期审查权限:定期检查用户的权限,确…...
力扣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];}} }; 双指针,一个指…...
【代码随想录day58】【C++复健】 117. 软件构建(拓扑排序);47. 参加科学大会(dijkstra(朴素版)精讲)
117. 软件构建(拓扑排序) 继续边看解析边做题,思考时的问题做个如下的总结: 1. 存边用什么数据结构? 在题目中,我们需要存储节点之间的依赖关系(边信息)。选择适合的数据结构非常重…...
【NLP 16、实践 ③ 找出特定字符在字符串中的位置】
看着父亲苍老的白发和渐渐老态的面容 希望时间再慢一些 —— 24.12.19 一、定义模型 1.初始化模型 ① 初始化父类 super(TorchModel, self).__init__(): 调用父类 nn.Module 的初始化方法,确保模型能够正确初始化。 ② 创建嵌入层 self.embedding n…...
费解的开关(bfs + 哈希表 or 递推)
题目描述: 25盏灯排成一个5x5的方形。每一个灯都有一个开关,游戏者可以改变它的状态。每一步,游戏者可以改变某一个灯的状态。游戏者改变一个灯的状态会产生连锁反应:和这个灯上下左右相邻的灯也要相应地改变其状态。 我们用数字“1”表示一盏开着的灯,用数字“0”表示关…...
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…...
基于微信小程序的短视频系统(SpringBoot)+文档
💗博主介绍💗:✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示:文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...
Flutter 中 Sliver 的各种装饰器介绍与使用
在 Flutter 中,Sliver 是一种可以在滚动视图中实现自定义效果的组件。Sliver 组件可以根据滚动位置动态改变其外观和行为。本文将介绍几种常用的 Sliver 装饰器及其使用方法。 1. SliverAppBar SliverAppBar 是一个可以随着滚动而变化的应用栏。它可以在用户向下滚…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
