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

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

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可选参数对象&…...

HarmonyOS-高级(四)

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

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…...

【入门】晶晶的补习班

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

c#动态更新替换json节点

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

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…...

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&…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MySql:数据类型

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

Couchbase的OLAP支持情况

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

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

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

Elasticsearch的一些介绍

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

音乐网站设计与实现

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

UE5 蓝图节点中文化

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

java抽奖系统登录下(四)

6.4 关于登录 最简单的登录&#xff1a; 1、web登录页填写登录信息&#xff0c;前端发送登录信息到后端&#xff1b; 2、后端接受登录信息&#xff0c;并校验。校验成功&#xff0c;返回成功结果。 这种登录会出现一个问题&#xff0c;用户1成功登录之后&#xff0c;获取到后台…...

解决阿里云轻量级服务器 Ubuntu 24.04.1 LTS 没网也 ping 不通 8.8.8.8 以及 route -n 没有输出任何转发信息

事情发生在两天前&#xff0c;位于公网的阿里云轻量级服务器&#xff08;Ubuntu 24.04.1 LTS&#xff09;忽然没网。主要是上次上服务器进行配置已经是一个多月前&#xff0c;最近也没有做什么事情&#xff0c;就忽然没网了&#xff0c;让人纳闷。更主要的是&#xff0c;上次备…...

跨域问题及其解决方案

跨域问题及其解决方案 在Web开发中&#xff0c;跨域问题是一个常见的安全限制&#xff0c;它涉及到浏览器的同源策略&#xff08;Same-Origin Policy&#xff09;。本文将详细解释跨域问题的原因、影响以及几种常见的解决方案&#xff0c;并提供在Java中的实现方法。 目录 跨…...

在CentOS中安装和卸载mysql

在CentOS7中安装和卸载mysql 卸载mysql1、查看是否安装过mysql2、查看mysql服务状态3、关闭mysql服务4、卸载mysql相关的rpm程序5、删除mysql相关的文件6、删除mysql的配置文件my.cnf 安装mysql1、下载mysql相关的rpm程序2、检查/tmp临时目录权限3、安装mysql前的依赖检查3、安…...

React简单入门 - [Next.js项目] - 页面跳转、AntD组件、二级目录等

须知 1Next.js 官网(英文)https://nextjs.org/2Next.js 文档(中文)https://nextjscn.org/docs/3Ant Design组件总览https://ant-design.antgroup.com/components/overview-cn4tailwindcss类名大全 官网https://www.tailwindcss.cn/docs/justify-content 5tailwindcss常用类…...

Redis安装和Python练习(Windows11 + Python3.X + Pycharm社区版)

环境 Windows11 Python3.X Pycharm社区版 思路 1 github下载redis压缩包 &#xff0c;安装并启动redis服务&#xff0c;在客户端连接redis服务。 2 在pycharm中运行python程序&#xff0c;连接redis服务&#xff0c;熟悉redis的使用和巩固python语言。 3 python开发环境…...

Sqoop脚本编写(Mysql---->>hdfs)

目录 语法手册编写方式脚本文件类型文件编写.jar路径指定 执行效果执行方式效果 语法手册 参考博客 编写方式 脚本文件类型 只要是可读的文件即可&#xff08;.txt或者.sh等其他类型&#xff0c;不带文件后缀也可以&#xff0c;但二进制文件最好不要&#xff09; 文件编写…...

帝可得项目redis连接不上

首先我一切配置都没问题&#xff1a; 1. redis-server启动 2. 可视化界面显示redis已连接 原因&#xff1a; 不知道是不是因为不同版本的问题(因为我之前的sky就没这个问题) 这里把password改成auth就可以了...

JS中this的值详细讲解以及面试指向练习

this 的值取决于它出现的上下文&#xff1a;函数、类或全局。 在函数内部&#xff0c;this 的值取决于函数如何被调用&#xff0c;this 是语言在函数体被执行时为你创建的绑定 对于典型的函数&#xff0c;this 的值是函数被访问的对象。换句话说&#xff0c;如果函数调用的形…...

显示浮动式窗口的方法

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了AlertDialog Widget相关的内容,本章回中将介绍BottomSheet Widget.闲话休提,让我们一起Talk Flutter吧。 1 概念介绍 我们在这里说的BottomSheet是一种弹出式窗口,和上一章回中介绍的AlertDialog类似,但是也…...

网站被劫持怎么修复/免费网站怎么申请

1、经验误差与过拟合通常我们把分类错误的样本数占样本总数的比例称为“错误率”(error rate)&#xff0c;即如果在m个样本中有a个样本分类错误&#xff0c;则错误率Ea/m&#xff1b;相应的&#xff0c;1-a/m称为“精度”(accuracy)&#xff0c;即“精度1一错误率”。更一般地&…...

17网站一起做网店靠谱吗/网站优化价格

ps&#xff1a;查看当前进程(ps -aef)例子&#xff1a;查看当前进程用户ID 进程ID 父进程ID CPU占用率 开始时间 终端ID 运行总时间 命令名pidof&#xff1a;查看某项服务的所有进程Kill&#xff1a;中止进程例子&#xff1a;中止进程ID为3393的进程killall&#xff1a…...

网站怎么做英语和中文的/迅雷磁力

//case 1 forkjoin none wait fork//case 2 forkjoin区别&#xff1f;&#xff1f;&#xff1f;...

哪家网站建设公司靠谱/手机百度正式版

今天在看王爽的《汇编语言》&#xff0c;看到地址总线的时候&#xff0c;由于那个图画的是并行传输&#xff0c;于是我就去搜了下地址总线是不是并行总线&#xff0c;结果看到一篇文章说现在串行总线的传输速度比并行总线要快&#xff0c;我就奇怪了。 在我的印象中&#xff0c…...

苏州公司建站/网络推广需要多少钱

Http1.0 、Http1.1 、Http2.0区别 长连接和短链接 在解释区别之前&#xff0c;我们要先理解TCP的长连接和短链接&#xff1a; **短链接&#xff1a;**你朋友给你发信息拉你打游戏&#xff08;发送连接请求&#xff09;&#xff0c;你说行&#xff08;应答&#xff09;&#xf…...

网站商城系统建设/雷神代刷推广网站

点击上方“iOS开发”&#xff0c;选择“置顶公众号” 关键时刻&#xff0c;第一时间送达&#xff01; 我是照骗 前言 最近逛博客看到了一篇帖子&#xff0c;里面介绍了自己如何设计一套星球大战主题的UI&#xff0c;里面有一个界面破碎的特效&#xff0c;看着很炫酷&#xff0…...