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

26. Three.js案例-自定义多面体

news 2025/12/12 19:40:43

26. Three.js案例-自定义多面体

实现效果

效果

知识点

WebGLRenderer

WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它支持 WebGL 渲染，并提供了多种配置选项。

构造器

new THREE.WebGLRenderer(parameters)

参数类型描述
parametersObject可选参数对象，用于配置渲染器。

常用参数：

  • antialias：布尔值，是否开启抗锯齿，默认为 false。
  • alpha：布尔值，是否允许透明背景，默认为 false。
  • premultipliedAlpha：布尔值，是否使用预乘 alpha，默认为 true。
  • preserveDrawingBuffer：布尔值，是否保留绘图缓冲区，默认为 false。
  • stencil：布尔值，是否创建模板缓冲区，默认为 true。
  • depth：布尔值，是否创建深度缓冲区，默认为 true。
  • logarithmicDepthBuffer：布尔值，是否使用对数深度缓冲区，默认为 false。
方法
  • setSize(width, height, updateStyle): 设置渲染器的尺寸。
  • setClearColor(color, alpha): 设置渲染器的背景颜色和透明度。
  • render(scene, camera): 渲染场景。

Scene

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

构造器

new THREE.Scene()

PerspectiveCamera

PerspectiveCamera 是 Three.js 中用于创建透视相机的类。

构造器

new THREE.PerspectiveCamera(fov, aspect, near, far)

参数类型描述
fovNumber视野角度（以度为单位）。
aspectNumber相机的宽高比。
nearNumber近裁剪面距离。
farNumber远裁剪面距离。

SpotLight

SpotLight 是 Three.js 中用于创建聚光灯的类。

构造器

new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)

参数类型描述
colorColor光源的颜色。
intensityNumber光源的强度，默认为 1。
distanceNumber光源的最大影响距离，默认为 0（无限远）。
angleNumber聚光灯的角度，默认为 π/3。
penumbraNumber半影区域的比例，默认为 0。
decayNumber光照衰减，默认为 1。

PolyhedronGeometry

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

构造器

new THREE.PolyhedronGeometry(vertices, indices, radius, detail)

参数类型描述
verticesArray顶点数组，每个顶点包含三个坐标值。
indicesArray面索引数组，每个面包含三个顶点索引。
radiusNumber多面体的半径，默认为 1。
detailNumber细分级别，默认为 0。

MeshLambertMaterial

MeshLambertMaterial 是 Three.js 中用于创建 Lambert 材质的类。

构造器

new THREE.MeshLambertMaterial(parameters)

参数类型描述
colorColor材质的颜色。
opacityNumber材质的透明度，默认为 1。
transparentBoolean是否启用透明，默认为 false。
sideNumber渲染哪一面，默认为 THREE.FrontSide。
wireframeBoolean是否使用线框模式，默认为 false。

Mesh

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

构造器

new THREE.Mesh(geometry, material)

参数类型描述
geometryGeometry网格的几何体。
materialMaterial网格的材质。

OrbitControls

OrbitControls 是 Three.js 中用于创建轨道控制器的类，用于控制相机的旋转、缩放和平移。

构造器

new THREE.OrbitControls(camera, domElement)

参数类型描述
cameraCamera控制的相机对象。
domElementHTMLElement控制器绑定的 DOM 元素。

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script><script src="ThreeJS/OrbitControls.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>// 创建渲染器var myRenderer = new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);myRenderer.setClearColor('white', 1.0);$("#myContainer").append(myRenderer.domElement);// 创建场景var myScene = new THREE.Scene();// 创建相机var myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);myCamera.position.set(-8.43, 122.11, 1.63);myCamera.lookAt(myScene.position);// 创建光源var myLight = new THREE.SpotLight('white');myLight.position.set(0, 60, 30);myScene.add(myLight);// 创建自定义多面体var myVertices = [1, 0, 1, 1, 0, -1, -1, 0, -1, -1, 0, 1, 0, 1, 0];var myFaces = [0, 1, 2, 2, 3, 0, 0, 1, 4, 1, 2, 4, 2, 3, 4, 3, 0, 4];var myGeometry = new THREE.PolyhedronGeometry(myVertices, myFaces, 1, 1);var myMaterial = new THREE.MeshLambertMaterial({color: 'cyan'});var myMesh = new THREE.Mesh(myGeometry, myMaterial);myMesh.scale.set(32, 32, 32);myScene.add(myMesh);// 渲染自定义多面体animate();function animate() {myRenderer.render(myScene, myCamera);requestAnimationFrame(animate);}// 创建轨道控制器var myOrbitControls = new THREE.OrbitControls(myCamera);
</script>
</body>
</html>

演示链接

示例链接

相关文章：

26. Three.js案例-自定义多面体

26. Three.js案例-自定义多面体 实现效果 知识点 WebGLRenderer WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它支持 WebGL 渲染&#xff0c;并提供了多种配置选项。 构造器 new THREE.WebGLRenderer(parameters) 参数类型描述parametersObject可选参数对象&…...

编程日记 2024/12/13 14:40:55

HarmonyOS-高级(四)

文章目录 应用开发安全应用DFX能力介绍HiLog使用指导HiAppEvent &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;HarmonyOS专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月11日11点18分 应用开发安全 应用隐私保护 隐私声明弹窗的作…...

编程日记 2024/12/13 14:37:48

Qt-chart 画折线图(以时间为x轴)

上图 代码 #include <iostream> #include <random> #include <qcategoryaxis.h>void MainWindow::testLine() {//1、创建图表视图QChartView* view new QChartView(this);//2.创建图表QChart* chart new QChart();//3.将图表设置给图表视图view->setCh…...

编程日记 2024/12/13 14:34:44

【入门】晶晶的补习班

描述 晶晶上初中了。妈妈认为晶晶应该更加用功学习&#xff0c;所以晶晶除了上学之外&#xff0c;还要参加妈妈为她报名的各科补习班。晶晶的妈妈给了晶晶的下周每天上补习班的小时数&#xff0c;晶晶同学想知道&#xff0c;下周平均一天要上多少小时的补习班&#xff08;结果…...

编程日记 2024/12/13 14:33:41

c#动态更新替换json节点

需求项目json作为主模板&#xff0c;会应用到多个子模版&#xff0c;当后续项目变更只需要修改主模板中节点&#xff0c;并且能够动态更新到原来的子模版中去。 主模板示例&#xff1a; {"A": {"A1": "","A2": false,"A3"…...

编程日记 2024/12/13 14:32:40

cf补题日记

听退役选手建议&#xff0c;补40道C、D题。 &#xff08;又又又开新专题。。。 进度&#xff1a;2/40 原题1&#xff1a; You are given a string ss, consisting of digits from 00 to 99. In one operation, you can pick any digit in this string, except for 00 or the…...

编程日记 2024/12/13 14:31:39

Golang学习笔记_01——包

文章目录 包&#xff08;package&#xff09;1. 定义2. 导入3. 初始化4. 可见性4. 注意4.1 包声明4.2 main包4.3 包的导入4.4标识符的可见性4.5 包的初始化4.6 避免命名冲突4.7 包的路径和名称4.8 匿名导入4.9 使用Go Modules 包&#xff08;package&#xff09; 在Golang&…...

编程日记 2024/12/13 14:30:33

RPC设计--应用层缓冲区，TcpBuffer

为什么需要应用层的buffer 为了方便数据处理&#xff0c;从fd上直接读写然后做包的组装、拆解不够方便方便异步发送&#xff0c;将数据写到应用层buffer后即可返回&#xff0c;让epoll即event_loop去异步发送。提高发送效率&#xff0c;多个小包可合并发送 buffer 设计 可以…...

编程日记 2024/12/13 14:23:26

基于单片机智能控制的饮水机控制系统

基于单片机智能控制的饮水机控制系统&#xff0c;以STC89C52单片机为核心&#xff0c;利用防水型DS18B20温度传感器对饮水机内的水温做出检测&#xff0c;其次利用水位传感器对饮水机内的水量做出检测&#xff0c;并显示在OLED液晶显示屏上。用户在使用饮水机时&#xff0c;通过…...

编程日记 2024/12/13 14:21:22

路径规划 | 改进的人工势场法APF算法进行路径规划（Matlab）

目录 效果一览基本介绍程序设计参考文献 效果一览 基本介绍 改进的人工势场法&#xff08;APF&#xff09;路径规划算法 在路径规划中&#xff0c;人工势场法&#xff08;APF&#xff09;是一种常见的方法&#xff0c;但传统的APF算法容易陷入局部极小值&#xff0c;导致路径规…...

编程日记 2024/12/13 14:18:17

【云原生知识】Kubernets实践-前端服务如何访问后端服务

文章目录 概述步骤1&#xff1a;部署后端服务步骤2&#xff1a;配置Nginx步骤3&#xff1a;创建Nginx服务总结 如何确保 Nginx 能持续访问后端服务&#xff1f;相关文献 概述 假设你正在使用Kubernetes作为容器云平台&#xff0c;以下是如何配置Nginx以及相关服务&#xff0c;…...

编程日记 2024/12/13 14:16:13

【ubuntu18.04】ubuntu18.04安装EasyCwmp操作说明

参考链接 Tutorial – EasyCwmphttps://easycwmp.org/tutorial/ EasyCwmp 介绍 EasyCwmp 设计包括 2 个部分&#xff1a; EasyCwmp 核心&#xff1a;它包括 TR069 CWMP 引擎&#xff0c;负责与 ACS 服务器的通信。它是用 C 语言开发的。EasyCwmp DataModel&#xff1a;它包…...

编程日记 2024/12/13 14:10:05

使用Jackson库的ObjectMapper类将JSON字符串转换为Java的Map对象

本教程展示如何使用Jackson库的ObjectMapper类将JSON字符串转换为Java的Map对象。 下面是具体的步骤和代码示例&#xff0c;包括添加依赖项以及编写用于反序列化JSON字符串为Map的代码。 添加依赖项 首先&#xff0c;在你的项目中添加Jackson库的依赖。如果你使用的是Maven构…...

编程日记 2024/12/13 14:07:59

ASP.NET Core实现鉴权授权的几个库

System.IdentityModel.Tokens.Jwt 和 Microsoft.AspNetCore.Authentication.JwtBearer 是两个常用的库&#xff0c;分别用于处理 JWT&#xff08;JSON Web Token&#xff09;相关的任务。它们在功能上有一定重叠&#xff0c;但侧重点和使用场景有所不同。 1. System.IdentityM…...

编程日记 2024/12/13 14:05:56

MySql：数据类型

✨✨作者主页&#xff1a;嶔某✨✨ ✨✨所属专栏&#xff1a;MySql✨✨ 数据类型分类 分类数据类型说明数值类型BIT(M)位类型&#xff0c;M指定位数&#xff0c;默认值1&#xff0c;范围1~64TINYINT [UNSIGNED]占用一个字节&#xff0c;带符号的范围 -128~127&#xff0c;无符…...

编程日记 2024/12/13 14:04:54

Couchbase的OLAP支持情况

Couchbase 是一个高性能的 NoSQL 数据库&#xff0c;主要用于在线事务处理&#xff08;OLTP&#xff09;场景&#xff0c;但它也提供了一些功能来支持在线分析处理&#xff08;OLAP&#xff09;需求。以下是 Couchbase 对 OLAP 支持的几个方面&#xff1a; 1. N1QL 查询语言 …...

编程日记 2024/12/13 14:03:53

企业级包管理器之搭建 npm 私有服务器 （6）

在企业级应用开发中&#xff0c;常常需要处理私有包的发布和管理。搭建 npm 私有服务器是一个理想的解决方案&#xff0c;它不仅能保证代码的私密性&#xff0c;还能提供更快的下载速度和更精细的权限设置。 一、搭建 npm 私有服务器的优势 保证代码私密性&#xff1a;在企业…...

编程日记 2024/12/13 14:01:51

Elasticsearch的一些介绍

你想问的可能是 **Elasticsearch**&#xff0c;以下是关于它的一些介绍&#xff1a; ### 概述 Elasticsearch是一个基于Apache Lucene库构建的开源分布式搜索和分析引擎&#xff0c;采用Java语言编写&#xff0c;具有高性能、可扩展性和易用性等特点&#xff0c;可用于各种数据…...

编程日记 2024/12/13 13:59:46

音乐网站设计与实现

文末获取源码和万字论文&#xff0c;制作不易&#xff0c;感谢点赞支持。 音乐网站设计与实现 摘 要 本音乐网站是针对目前音乐网站管理的实际需求&#xff0c;从实际工作出发&#xff0c;对过去的音乐网站管理系统存在的问题进行分析&#xff0c;结合计算机系统的结构、概念、…...

编程日记 2024/12/13 13:58:44

UE5 蓝图节点中文化

文章目录 一、问题背景二、解决方法 一、问题背景 在虚幻引擎5.4、5.5版本中&#xff0c;即使将编辑器语言设置为中文&#xff0c;还是会出现大部分蓝图节点没有中文化。 蓝图节点没有中文化图示&#xff1a; 二、解决方法 在左上角找到 编辑&#xff0c;打开 编辑器偏好设置…...

编程日记 2024/12/13 13:52:37

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/12/11 14:27:41

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/12/10 15:33:21

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/12/9 11:10:10

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/12/8 9:12:36

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/12/9 0:02:55

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/12/9 0:43:43

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/12/9 4:10:18

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/9/24 10:52:31

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/12/8 19:02:25