Threejs中Geometry的用法示例

最新推荐文章于 2024-06-12 21:15:59 发布
最新推荐文章于 2024-06-12 21:15:59 发布
阅读量1.1w 收藏 8
点赞数
分类专栏： Threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yb0022/article/details/103329939
版权

       Geometry是其他很多XXXGeometry（如BoxGeometry、SphereGeometry）的基类，与之相对应的还有BufferGeometry，BufferGeometry是其他带BufferGeomerty的基类， BufferGeomerty效率比Geometry高，但是Geometry使用相对简单点，本文就说下Geometry的基本用法。

       Geometry中有顶点位置和面以及面UV等属性，可以灵活控制物体的几何形状，但是使用也更复杂（相对于它的子类），下面使用Geometry画一个最基本的形状三角形。

  1、绘制一个自定义顶点坐标的三角形，颜色为纯红色，绘制自定义形状必须要有顶点数据vertices和面数据faces。

<html>
	<head>
		<title>three.js geometry</title>
	</head>
	<body>
		<script src="three.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 90, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			camera.position.z = 5;
最低0.47元/天 解锁文章
蓬 蒿 人
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
threejs-geometry-format-custom-binary
06-08
总的来说，"threejs-geometry-format-custom-binary"项目旨在提供一种高效的方法来处理和传输Three.js的几何数据，通过自定义二进制格式和gzip压缩，可以显著提升3D应用的性能和用户体验。如果你是一个Three.js...
ThreeJS使用Curve曲线让物体沿轨迹运动DEMO
12-09
本示例"ThreeJS使用Curve曲线让物体沿轨迹运动DEMO"探讨了如何利用Three.js中的Curve类来创建自定义的路径，并使物体沿着这条路径移动。 首先，让我们理解什么是Curve。在Three.js中，Curve是定义二维空间中路径的...
基于threejs的3d学校示例
10-11
"基于threejs的3d学校示例"项目旨在展示如何使用Three.js来构建一个3D的学校环境。这个项目可能包括建筑物、道路、植被等元素，通过交互式的方式，让用户能够自由浏览、缩放、旋转这个3D空间。这样的应用可以用于...
React集成ThreeJS示例代码
02-09
**一、安装ThreeJS模块** 首先，我们需要在项目中安装Three.js库。如果你使用的是npm作为包管理器，可以在终端中输入以下命令： ```bash npm install three ``` 如果你偏好使用yarn，可以执行： ```bash yarn ...
第八章 Three.js 高级几何体
一名全栈开发工程师
06-12 535
Three.js 提供了和来创建自定义几何体。是一个较为简单和直观的方式，而更为高效，适用于更复杂的几何体。
WebGL/ThreeJS创建立体文字TextGeometry
11-30
<script src="https://threejs.org/build/three.min.js"> ``` 然后，我们可以在JavaScript中创建一个`THREE.Scene`对象，作为3D场景的基础。接着，创建一个`THREE.Camera`对象，用于观察场景，并设置一个`THREE....
基于springcloud微服务开发平台
07-22
采用前后端分离的模式，前端开源两个框架：Sword (基于 React、Ant Design)、Saber (基于 Vue、Element-UI) 后端采用SpringCloud全家桶，并同时对其基础组件做了高度的封装，单独开源出一个框架：BladeTool BladeTool已推送至Maven中央库，直接引入即可，减少了工程的臃肿，也可更注重于业务开发 集成Sentinel从流量控制、熔断降级、系统负载等多个维度保护服务的稳定性。 注册中心、配置中心选型Nacos，为工程瘦身的同时加强各模块之间的联动。 极简封装了多租户底层，用更少的代码换来拓展性更强的SaaS多租户系统。 借鉴OAuth2，自研多终端认证系统，可控制子系统的token权限互相隔离。 借鉴Security，自研Secure模块，采用JWT做Token认证，可拓展集成Redis等细颗粒度控制方案。 稳定生产了六年，经历了从 Camden -> Hoxton -> 2023 的技术架构，也经历了从fat jar -> docker -> k8s + jenkins的部署架构。 项目分包明确，规范微服务的开发模式，使包与包
毕业设计javajsp诗歌诗词网站sqlserver-qr源码含文档工具包
07-22
毕业设计javajsp诗歌诗词网站sqlserver-qr源码含文档工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 诗韵人间网站 系统管理 修改密码 年代管理 年代录入 诗词管理 诗词录入 诗词搜索 留言板 包含：源码、数据库脚本、论文、答辩ppt、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码）
07-22
【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 【Java 毕业设计】基于Java题库及试卷管理模块的设计与开发代码（完整源码） 【优秀毕业设计】主要针对计算机相关专业的正
凯度：2022凯度银行保险行业品牌建设报告：以差异化博弈变局，洞察银行保险业的品牌增长之道(1).pdf
07-22
凯度：2022凯度银行保险行业品牌建设报告：以差异化博弈变局，洞察银行保险业的品牌增长之道(1).pdf
国潮风（11）---喜爱PPT.pptx
07-22
【ppt素材】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
实现用户登录系统的前后端开发
07-22
实现用户登录系统的前后端开发
立式辊磨机健康状态综合评价与预测研究-陈作炳.pdf
07-22
立式辊磨机健康状态综合评价与预测研究-陈作炳.pdf
泰凌微8258学习日记-2:用按钮控制RGB改变小灯的颜色
07-22
泰凌微8258学习日记-2:用按钮控制RGB改变小灯的颜色
使用 JavaScript 源代码进行颜色处理.zip
07-22
项目：使用 JavaScript 进行颜色处理（含源代码） 颜色处理是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。该项目是一个小型、快速的颜色处理和转换库。用户/播放器必须输入颜色名称、颜色代码格式，并找到其他不同格式的颜色。  项目制作 颜色处理项目仅包含 HTML、CSS 和 JavaScript。它是一个用于输入颜色并以不同格式输出颜色的微框架。输入应尽可能宽松。谈到该项目的功能，用户必须输入颜色才能查看其不同的颜色格式。您必须在文本字段中输入颜色名称或代码，如果颜色有效，则将显示其颜色和其他格式。 该项目包含大量 JavaScript，以使流程能够正常运转。 如何运行该项目？ 要运行此项目，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。首先，通过单击 index.html 文件在浏览器中打开项目。 项目演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
PP88-V5 (13).apk
07-22
PP88-V5 (13).apk
全国计算机三级（网络技术）做题技巧
07-22
全国计算机三级（网络技术）做题技巧
英语四六级四大题型分类总结资料/笔记（3）：写作
最新发布
07-22
资料包含：六级作文精彩语句，六级作文开头句型6大写法，写作常用句型，四六级考试作文常考话题，作文句型荟萃，四六级写作提分锦囊，四六级写作模板句型，写作模板集合，写作亮点词汇，写作技巧与干货分享，四六级写作必备句式，四六级小贴士：作文替换词&翻译练习，三部分作文法，高分作文是这样练成的，六级写作素材，精选新概念36篇，四六级写作七项基本原则，六级作文热点话题，考试必备范文10篇，30篇四六级写作经典，作文预测，writing写作课堂笔记，作文高分模板，写作必备模板和句型，等等。
第十三届蓝桥杯EDA赛道真题
07-22
第十三届蓝桥杯EDA赛道真题
threejs geometry
07-28
Three.js中的Geometry是其他很多Geometry（如BoxGeometry、SphereGeometry）的基类，它是用来创建几何体的对象。Geometry对象包含了顶点、面和UV坐标等信息，可以用来描述一个物体的形状。\[1\] 在Three.js中，可以通过添加顶点、面和UV坐标来创建一个Geometry对象。顶点是物体的顶点坐标，面是由顶点组成的三角形或四边形，而UV坐标则是用来贴上纹理的坐标。通过设置这些属性，可以创建出各种不同形状的物体。 例如，可以通过以下代码创建一个三角形，并为其贴上纹理： ```javascript var vertices = \[ new THREE.Vector3(-1.0, -1.0, 0.0), new THREE.Vector3(1.0, -1.0, 0.0), new THREE.Vector3(1.0, 1.0, 0.0) \]; var face = new THREE.Face3(0, 1, 2); var faces = \[face\]; var uvs = \[ \[ new THREE.Vector2(0.0, 0.0), new THREE.Vector2(1.0, 0.0), new THREE.Vector2(1.0, 1.0) \] \]; var geometry = new THREE.Geometry(); geometry.vertices = vertices; geometry.faces = faces; geometry.faceVertexUvs\[0\] = uvs; var texture = new THREE.TextureLoader().load('test.jpg'); var material = new THREE.MeshBasicMaterial({ map: texture }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); ``` 这段代码创建了一个三角形的Geometry对象，并为其贴上名为'test.jpg'的纹理。最后，通过创建一个Mesh对象，将Geometry和Material结合起来，并将其添加到场景中。\[2\] 除了基本的几何体，Three.js还提供了许多其他类型的Geometry，如ConeGeometry、BoxGeometry等，可以根据需要选择合适的Geometry来创建不同形状的物体。例如，可以使用ConeGeometry来创建一个圆锥体： ```javascript var cone = new THREE.Mesh(new THREE.ConeGeometry(100, 100, 100, 10, false, 0, Math.PI * 3 / 2), material); scene.add(cone); ``` 这段代码创建了一个圆锥体的Geometry对象，并使用相应的Material创建了一个Mesh对象，最后将其添加到场景中。\[3\] #### 引用[.reference_title] - *1* *2* [Threejs中Geometry的用法示例](https://blog.csdn.net/yb0022/article/details/103329939)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [THREE.JS之几何体（Geometry）](https://blog.csdn.net/u011135260/article/details/52725162)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值