【基础】Three.js 自定义几何体和复制几何体

通过自定义顶点数据，可以创建任意的几何体。像threejs的长方体BoxGeometry、球体SphereGeometry等几何体都是基于BufferGeometry类构建的，它表示一个没有任何形状的空几何体。
请添加图片描述

1. 自定义点模型

通过javascript 类型化数组 Float32Array创建一组xyz坐标数据用来表示几何体的顶点坐标。每3个一组为一个坐标点。
在这里插入图片描述

point.ts文件：

import * as THREE from "three";//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();//类型化数组创建顶点数据
const vertices = new Float32Array([0,0,0, //顶点1坐标20,0,0, //顶点2坐标20,20,0, //顶点3坐标0,20,0, //顶点4坐标10,30,30, //顶点5坐标10,40,15, //顶点6坐标
]);// 创建属性缓冲区对象: 3个为一组，表示一个顶点的xyz坐标
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute; // 设置几何体attributes属性的位置属性// 点材质
const material = new THREE.PointsMaterial({color: 0xffff00,size: 2.0, //点对象像素尺寸
});
const points = new THREE.Points(geometry, material); // 点对象
export {points}

主文件：

<template><div class="wrapper"><div ref="threeRef"></div></div>
</template>
<script setup lang="ts">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { points} from "./components/points";
import { onMounted, ref } from "vue";
const threeRef = ref();onMounted(() => {// 场景const scene = new THREE.Scene();// 添加点进入场景scene.add(points);// 相机const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);camera.position.set(50, 50, 50); // 相机位置// 渲染器const renderer = new THREE.WebGLRenderer({antialias: true, // 设置锯齿属性,为了获得更好的图像质量});// 定义threejs输出画布的尺寸(单位:像素px)renderer.setSize(window.innerWidth, window.innerHeight);// 为了适应不同的硬件设备屏幕，设置设备像素比renderer.setPixelRatio(window.devicePixelRatio);// 插入到任意HTML元素中threeRef.value.append(renderer.domElement);renderer.render(scene, camera);// AxesHelper：辅助观察的坐标系const axesHelper = new THREE.AxesHelper(50);scene.add(axesHelper);// 可拖拽查看模型const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener("change", function () {renderer.render(scene, camera); //执行渲染操作});window.onresize = function () {// 更新相机纵横比camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();// 更新渲染器的大小renderer.setSize(window.innerWidth, window.innerHeight);};
});
</script>
<style scoped></style>

2. 自定义线模型

new THREE.Line( geometry, material ); 创建一条连续的线
在这里插入图片描述

new THREE.LineLoop( geometry, material ); 创建环线
在这里插入图片描述

new THREE.LineSegments( geometry, material ); 创建线段
在这里插入图片描述
（为了观察由哪些点生成的线，保留了点模型）

//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();//类型化数组创建顶点数据
const vertices = new Float32Array([0,0,0, //顶点1坐标20,0,0, //顶点2坐标20,20,0, //顶点3坐标0,20,0, //顶点4坐标10,30,30, //顶点5坐标10,40,15, //顶点6坐标
]);// 创建属性缓冲区对象: 3个为一组，表示一个顶点的xyz坐标
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute; // 设置几何体attributes属性的位置属性// 点材质
const material = new THREE.PointsMaterial({color: 0xffff00,size: 2.0, //点对象像素尺寸
});
// 线材质
const material1 = new THREE.LineBasicMaterial({color: 0xff0000, //线条颜色
});
const points = new THREE.Points(geometry, material); // 点对象
const lines = new THREE.Line(geometry, material1); // 线对象
export {points，lines } // 在主文件中引入，并添加到场景中即可

4. 网格模型(三角形概念)

网格模型Mesh其实就一个一个三角形(面)拼接构成。使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。

可见性：
三个顶点的顺序是【逆时针】方向，该面视为【正面】
三个顶点的顺序是【顺时针】方向，该面视为【反面】，默认不可见
在这里插入图片描述

import * as THREE from "three";//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
//顶点数据
const vertices = new Float32Array([0, 0, 0, //顶点1坐标50, 0, 0, //顶点2坐标50,50, 0, //顶点3坐标
]);
// 创建属性缓冲区对象: 3个为一组，表示一个顶点的xyz坐标
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute; // 设置几何体attributes属性的位置属性// 网格模型：
const material = new THREE.MeshBasicMaterial({color: 0xffff00, //材质颜色//   side: THREE.BackSide,// 仅有反面可见side: THREE.DoubleSide, //两面可见transparent: true, // 开启透明opacity: 0.5, //透明度
});
const flat = new THREE.Mesh(geometry, material); // 网格对象
export { flat };

4. 自定义矩形平面

一个矩形平面，可以至少通过两个三角形拼接而成，而且两个三角形是紧密贴合的，所以会存在两个相同的坐标点。
注意：为了让两个三角形的正反面显示一致，每一个三角形顶点的的顺序应该保持一致！！
在这里插入图片描述
在这里插入图片描述

import * as THREE from "three";//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
//顶点数据
const vertices = new Float32Array([0, 0, 0, //顶点1坐标80, 0, 0, //顶点2坐标80, 80, 0, //顶点3坐标0, 0, 0, //顶点4坐标   和顶点1位置相同80, 80, 0, //顶点5坐标  和顶点3位置相同0, 80, 0, //顶点6坐标
]);// 创建属性缓冲区对象: 3个为一组，表示一个顶点的xyz坐标
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute; // 设置几何体attributes属性的位置属性// 网格模型：
const material = new THREE.MeshBasicMaterial({color: 0xffff00, //材质颜色//   side: THREE.BackSide,// 仅有反面可见side: THREE.DoubleSide, //两面可见transparent: true, // 开启透明opacity: 0.5, //透明度
});
const flat = new THREE.Mesh(geometry, material); // 网格对象
export { flat };

也可以使用几何体顶点索引数据geometry.index来实现
在这里插入图片描述

import * as THREE from "three";//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
//顶点数据
const vertices = new Float32Array([0, 0, 0, //顶点1坐标80, 0, 0, //顶点2坐标80, 80, 0, //顶点3坐标0, 80, 0, //顶点6坐标
]);// Uint16Array类型数组创建顶点索引数据
const indexes = new Uint16Array([// 下面索引值对应顶点位置数据中的顶点坐标0, 1, 2, 0, 2, 3,
]);
// 索引数据赋值给几何体的index属性
geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组// 创建属性缓冲区对象: 3个为一组，表示一个顶点的xyz坐标
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute; // 设置几何体attributes属性的位置属性// 网格模型
const material = new THREE.MeshBasicMaterial({color: 0xffff00, //材质颜色//   side: THREE.BackSide,// 仅有反面可见side: THREE.DoubleSide, //两面可见transparent: true, // 开启透明opacity: 0.5, //透明度
});
const flat = new THREE.Mesh(geometry, material); // 网格对象
export { flat };

如果将材质更换成其他受光照影响的材质，比如MeshLambertMaterial,则无法正常显示平面，因为受光照影响的材质，需要给几何体设置顶点法线。

// 每个顶点的法线数据和顶点位置数据一一对应
const normals = new Float32Array([0,0,1, //顶点1法线( 法向量 )0,0,1, //顶点2法线0,0,1, //顶点3法线0,0,1, //顶点4法线
]);
// 设置几何体的顶点法线属性.attributes.normal
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3);
// 网格模型：
const material2 = new THREE.MeshLambertMaterial({color: 0xffff00, //材质颜色//   side: THREE.BackSide,// 仅有反面可见side: THREE.DoubleSide, //两面可见transparent: true, // 开启透明opacity: 0.5, //透明度
});

在场景中添加光源：

  //环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);scene.add(ambientLight);// 平行光const directionalLight = new THREE.DirectionalLight(0xffffff, 1);// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算directionalLight.position.set(10, 15, 25);// 方向光指向对象网格模型directionalLight.target = flat;

5. 内置原始几何体

请添加图片描述

import * as THREE from "three";
// 立方体
const geometry1 = new THREE.BoxGeometry(8, 8, 8);
// 球体
const geometry2 = new THREE.SphereGeometry(10);const material1 = new THREE.MeshLambertMaterial({color: 0x00ffff,wireframe: true, //线条模式渲染mesh对应的三角形数据
});
const material2 = new THREE.MeshLambertMaterial({color: 0xffffff,wireframe: true, //线条模式渲染mesh对应的三角形数据
});
const box = new THREE.Mesh(geometry1, material1);
const sphere = new THREE.Mesh(geometry2, material2);
// 位置平移
sphere.translateX(-15);
box.translateX(-15);// 克隆一个box对象
const box2 = box.clone();
// 克隆几何体材质，并重新设置的材质和几何体属性
box2.material = box.material.clone();
box2.material.color.set(0xff0000);
box2.translateY(15);
// 缩小尺寸
box2.scale.set(0.5, 0.5, 0.5);
export {  sphere, box, box2 };

https://threejs.org/docs/index.html?q=geo#api/zh/geometries/BoxGeometry

添加循环动画：

  // 渲染循环function render() {box.rotateY(0.01); // 旋转动画sphere.rotateY(-0.01);// 同步mesh2和mesh的姿态角度一样，不管mesh姿态角度怎么变化，mesh2始终保持同步box2.rotation.copy(box.rotation);renderer.render(scene, camera);requestAnimationFrame(render);}render();

🔍【基础】Three.js的零基础入门篇（附案例代码）
🔍【基础】Three.js中添加操作面板，GUI可视化调试（附案例代码）
🔍【基础】Three.js加载纹理贴图、加载外部gltf格式文件

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/878776.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

pycharm破解教程

pycharm破解教程

下载pycharm https://www.jetbrains.com/pycharm/download/other.html 破解网站 https://hardbin.com/ipfs/bafybeih65no5dklpqfe346wyeiak6wzemv5d7z2ya7nssdgwdz4xrmdu6i/ 点击下载破解程序 安装pycharm 自己选择安装路径 安装完成后运行破解程序 等到Done图标出现 选择Ac…
阅读更多...
IMU腕带评估轮椅用户运动健康

IMU腕带评估轮椅用户运动健康

近期&#xff0c;美国的研究团队利用惯性测量单元&#xff08;IMU&#xff09;和机器学习来准确评估手动轮椅使用者的运动健康状况&#xff0c;这在康复训练和慢性病管理领域具有广阔的应用前景。 研究小组将运用高性能的IMU传感器固定到轮椅使用者佩戴的手腕带上&#xff0c;用…
阅读更多...
分享一套外链系统，付费进群系统

分享一套外链系统，付费进群系统

本系统特点&#xff0c;活码系统以及卡片系统&#xff0c;付费进群系统 分享一套外链系统其中带付费进群系统插件&#xff0c;前端做了美化
阅读更多...
第90集《大佛顶首楞严经》

第90集《大佛顶首楞严经》

《大佛顶如来密因修正了义诸菩萨万行首楞严经》。监院法师慈悲&#xff0c;诸位法师&#xff0c;诸位同学&#xff0c;阿弥陀佛&#xff01; 请大家打开讲义197面 子一、现化表法 诵持『楞严神咒』在整个修学《首楞严王三昧》的过程&#xff0c;它所扮演的角色有两个&#x…
阅读更多...
记录一下idea的一些使用技巧和遇到的异常（持续更新）

记录一下idea的一些使用技巧和遇到的异常（持续更新）

技巧 自己的模板——live template 有些代码在项目中通常会被用到或会被重复使用&#xff0c;可以自己写一个模板存起来&#xff0c;要用的时候用快捷键生成就可以了。 在这里选择生效范围 现在&#xff0c;就有我们自己的模板了&#xff0c;一回车就自动生成 idea的全局配置…
阅读更多...
蓄水池漂浮物识别摄像机

蓄水池漂浮物识别摄像机

蓄水池是重要的水资源储备设施&#xff0c;但常常会受到漂浮物的影响&#xff0c;影响水质和使用效果。为了及时监测和清理蓄水池中的漂浮物&#xff0c;蓄水池漂浮物识别摄像机 被广泛应用于各类水库、湖泊等场所。这种摄像机结合了图像识别技术和人工智能算法&#xff0c;能够…
阅读更多...
照片信息的读取与分类（1）

照片信息的读取与分类（1）

通过Python的各种模块我们可以很方便的获取到文件的各种属性数据&#xff0c;比如文件修改时间、文件大小或是本节课获取到的照片拍摄时间等。获取到了这些数据后&#xff0c;我们就可以对文件按照需求进行移动、改名甚至删除等操作。配合Python批量处理文件的优势&#xff0c;…
阅读更多...
elementUI table 给表头添加气泡显示（鼠标悬浮显示注释）

elementUI table 给表头添加气泡显示（鼠标悬浮显示注释）

elementUI table 给表头添加气泡显示&#xff08;鼠标悬浮显示注释&#xff09; 前言&#xff1a;文档显示&#xff1a;&#xff08;使用插槽&#xff0c;我看看到底是怎么个事儿&#xff09;文档代码:修改后的效果&#xff1a;页面效果&#xff1a; 前言&#xff1a; 公司出现…
阅读更多...
【ACM出版】2024年第四届工商管理与数据科学国际学术会议 (BADS 2024，10月25-27)

【ACM出版】2024年第四届工商管理与数据科学国际学术会议 (BADS 2024，10月25-27)

2024年第四届工商管理与数据科学国际学术会议(BADS 2024)将于2024年10月25-27日在中国重庆召开&#xff0c;大会由喀什大学支持。 在当今全球化与数字化迅速发展的时代&#xff0c;工商管理与数据科学作为推动经济增长和技术进步的重要力量&#xff0c;正以前所未有的速度交叉融…
阅读更多...
骨传导耳机哪款好？精选五款热门骨传导耳机分享让你避免踩雷

骨传导耳机哪款好？精选五款热门骨传导耳机分享让你避免踩雷

目前在市面当中&#xff0c;骨传导耳机被称之为是黑科技耳机&#xff0c;骨传导耳机拥有很多优势&#xff0c;在听歌时不需要入耳&#xff0c;不会伤耳朵。随着骨传导耳机品牌的不断发展&#xff0c;人们在选购骨传导耳机时&#xff0c;也会觉得非常困难&#xff0c;可能一不小…
阅读更多...
【知识图谱】4、LLM大模型结合neo4j图数据库实现AI问答的功能

【知识图谱】4、LLM大模型结合neo4j图数据库实现AI问答的功能

昨天写了一篇文章&#xff0c;使用fastapi直接操作neo4j图数据库插入数据的例子&#xff0c; 本文实现LLM大模型结合neo4j图数据库实现AI问答功能。 废话不多说&#xff0c;先上代码 import gradio as gr from fastapi import FastAPI, HTTPException, Request from pydantic…
阅读更多...
STM32CubeMX软件配置及点灯操作（基于STM32F4系列+HAL库）

STM32CubeMX软件配置及点灯操作（基于STM32F4系列+HAL库）

注:本文主要记录一下STM32CubeMX软件的使用流程。 01 软件安装 1.keil 需要安装以下支持包(keil在线安装里没有对应芯片支持包)。 2.STM32CubeMX 安装库&#xff1a; 3.串口助手 02 硬件连接 该原理图来源于学益得在线课堂教学项目《RTOS项目实战&#xff1a;从PCB到Free…
阅读更多...
STM32F407ZGT6单片机HAL库——DAC输出

STM32F407ZGT6单片机HAL库——DAC输出

一、输出直流电压 1.cubemax的配置&#xff08;通道1&#xff09; 2.直流电压大小计算 3.主函数加入初始化的程序 float DAC_voltage1.5;HAL_DAC_SetValue(&hdac, DAC_CHANNEL_1, DAC_ALIGN_12B_R, DAC_voltage*4095/3.3);//HAL_DAC_Start(&hdac,DAC_CHANNEL_1); 二、…
阅读更多...
（一）模式识别——基于SVM的道路分割实验（附资源）

（一）模式识别——基于SVM的道路分割实验（附资源）

写在前面&#xff1a;本报告所有代码公开在附带资源中&#xff0c;无法下载代码资源的伙伴私信留下邮箱&#xff0c;小编24小时内回复 一、实验目的 1、实验目标 学习掌握SVM&#xff08;Support Vector Machine&#xff09;算法思想&#xff0c;利用MATLAB的特定工具箱和库函…
阅读更多...
【2024高教社杯全国大学生数学建模竞赛】ABCDEF题 问题分析、模型建立、参考文献及实现代码

【2024高教社杯全国大学生数学建模竞赛】ABCDEF题 问题分析、模型建立、参考文献及实现代码

【2024高教社杯全国大学生数学建模竞赛】ABCDEF题 问题分析、模型建立、参考文献及实现代码 1 比赛时间 北京时间&#xff1a;2024年9月5日 18:00-2024年9月8日20:00 2 思路内容 2.1 往届比赛资料 【2022高教社杯数学建模】C题&#xff1a;古代玻璃制品的成分分析与鉴别方案…
阅读更多...
AI学习记录 - 旋转位置编码

AI学习记录 - 旋转位置编码

创作不易&#xff0c;有用点赞&#xff0c;写作有利于锻炼一门新的技能&#xff0c;有很大一部分是我自己总结的新视角 1、前置条件&#xff1a;要理解旋转位置编码前&#xff0c;要熟悉自注意力机制&#xff0c;否则很难看得懂&#xff0c;在我的系列文章中有对自注意力机制的…
阅读更多...
OpenFeign请求拦截器，注入配置属性类（@ConfigurationProperties），添加配置文件（yml）中的token到请求头

OpenFeign请求拦截器，注入配置属性类（@ConfigurationProperties），添加配置文件（yml）中的token到请求头

一、需求 OpenFeign请求拦截器&#xff0c;注入配置属性类&#xff08;ConfigurationProperties&#xff09;&#xff0c;添加配置文件&#xff08;yml&#xff09;中的token到请求头 在使用Spring Boot结合OpenFeign进行微服务间调用时&#xff0c;需要在发起HTTP请求时添加一…
阅读更多...
MLLM（二）| 阿里开源视频理解大模型：Qwen2-VL

MLLM（二）| 阿里开源视频理解大模型：Qwen2-VL

2024年8月29日&#xff0c;阿里发布了 Qwen2-VL&#xff01;Qwen2-VL 是基于 Qwen2 的最新视觉语言大模型。与 Qwen-VL 相比&#xff0c;Qwen2-VL 具有以下能力&#xff1a; SoTA对各种分辨率和比例的图像的理解&#xff1a;Qwen2-VL在视觉理解基准上达到了最先进的性能&#…
阅读更多...
Apache Guacamole 安装及配置VNC远程桌面控制

Apache Guacamole 安装及配置VNC远程桌面控制

文章目录 官网简介支持多种协议无插件浏览器访问配置和管理应用场景 Podman 部署 Apache Guacamole拉取 docker 镜像docker-compose.yml部署 PostgreSQL生成 initdb.sql 脚本部署 guacamole Guacamole 基本用法配置 VNC 连接 Mac 电脑开启自带的 VNC 服务 官网 https://guacam…
阅读更多...
Gmtracker安装中存在的问题

Gmtracker安装中存在的问题

Gmtracker安装中存在的问题 GMtracker安装问题该如何解决&#xff1f; 使用用服务器&#xff0c;在云服务器中使用conda环境 python 3.6的版本环境. pip install -r requirements.txt 在网上查找资料&#xff1a;opencv安装失败卡在这里是因为没有使用高版本的python环境 切换…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023