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

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

news 2025/9/12 7:08:50

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

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

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

编程新知 2025/9/2 17:00:17

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/9/9 10:13:15

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/9/10 1:16:45

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/8/12 6:01:40

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/7/9 2:49:50

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/8/11 22:22:05

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/9/3 20:41:41

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/9/9 16:16:08