threejs (三) 几何体

news2024/11/20 8:38:41

定义:用来表示物体的形状,可以定义物体的大小,可以被缩放、旋转和平移
内置几何体:

  • 二维几何体:PlaneGeometry矩形平面、CircleGeometry圆形平面、RingGeometry环形平面、ShapeGeometry二维图形
  • 三维几何体:BoxGeometry立方体、TetrahedronGeometry多面体、SphereGeometry球体、ConeGeometry圆锥、CylinderGeometry圆柱、TorusGeometry圆环
  • 路径合成几何体:TubeGeometry管道、LatheGeometry车削、ExtrudeGeometry挤压
  • 线性几何体:WireframeGeometry网格几何体、EdgesGeometry边缘几何体

创建几何体

const plane = new THREE.PlaneGeometry(2, 2); // 创建长宽为2x2的平面

const material = new THREE.MeshLambertMaterial({
  color: '#1890ff',
});
// 生成物体对象
const mesh = new THREE.Mesh(plane, material);

BufferGeometry

const geometry = new THREE.BufferGeometry();
// 创建简单的矩形. 在这里我们左上和右下顶点被复制了两次。
const vertices = new Float32Array([
  -1.0, -1.0,  1.0, // 第1个顶点 (xyz)
  1.0, -1.0,  1.0, // 第2个顶点 (xyz)
  1.0,  1.0,  1.0, // 第3个顶点 (xyz)

  1.0,  1.0,  1.0, // 第4个...
  -1.0,  1.0,  1.0,
  -1.0, -1.0,  1.0,
]);

// 第二个参数 3 表示每个顶点都是三个值构成。
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); // 这里是告诉几何体这组数据就是顶点的坐标信息

// 设置表面颜色
const material = new THREE.MeshBasicMaterial({
  color: '#1890ff',
  // wireframe: true,
});

合并几何体

		// 把小车变成一个整体,方法一:group 存mesh对象 方便操作各个对象
        const group = new THREE.Group();
        group.add(car, wheel1, wheel2, wheel3, wheel4, light1, light2);
        group.position.y = 0.2;
        this.group = group;

        // 把小车变成一个整体,方法二:合并为一个Geometry
        // const geometry = mergeBufferGeometries([carGeometry, wheelGeometry]);
        // const mesh = new THREE.Mesh(geometry,material);
        this.scene.add(group);

小车行驶动画

createObjects() {
        const carGeometry = new THREE.BoxGeometry(2, 0.2, 1);
        const material = new THREE.MeshLambertMaterial({ color: 0x1890ff });
        const car = new THREE.Mesh(carGeometry, material);

        // 车轮
        const wheelGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.3, 10);
        const wheelMaterial = new THREE.MeshBasicMaterial({ color: 0xff00ff });
        const wheel1 = new THREE.Mesh(wheelGeometry, wheelMaterial);
        const wheel2 = new THREE.Mesh(wheelGeometry, wheelMaterial);
        const wheel3 = new THREE.Mesh(wheelGeometry, wheelMaterial);
        const wheel4 = new THREE.Mesh(wheelGeometry, wheelMaterial);
        wheel1.name = 'wheel';
        wheel2.name = 'wheel';
        wheel3.name = 'wheel';
        wheel4.name = 'wheel';
        wheel1.position.set(-0.5, 0, 0.4);
        wheel1.rotation.x = -Math.PI / 2;
        wheel2.position.set(0.5, 0, 0.4);
        wheel2.rotation.x = -Math.PI / 2;
        wheel3.position.set(-0.5, 0, -0.4);
        wheel3.rotation.x = -Math.PI / 2;
        wheel4.position.set(0.5, 0, -0.4);
        wheel4.rotation.x = -Math.PI / 2;

        const lightGeometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
        const lightMaterial = new THREE.MeshBasicMaterial({
          color: 0xffff00,
        });
        const light1 = new THREE.Mesh(lightGeometry, lightMaterial);
        const light2 = new THREE.Mesh(lightGeometry, lightMaterial);
        light1.position.set(-1.05, 0, 0.2);
        light2.position.set(-1.05, 0, -0.2);

        // 把小车变成一个整体,方法一:group 存mesh对象 方便操作各个对象
        const group = new THREE.Group();
        group.add(car, wheel1, wheel2, wheel3, wheel4, light1, light2);
        group.position.y = 0.2;
        this.group = group;

        // 把小车变成一个整体,方法二:合并为一个Geometry
        // const geometry = mergeBufferGeometries([carGeometry, wheelGeometry]);
        // const mesh = new THREE.Mesh(geometry,material);
        this.scene.add(group);
      },
       runCar() {
        // console.log(this.group.children);
        const { children } = this.group;
        const delta = 4;
        // 假设一帧走delta度  一周的长度:2 * Math.PI * 0.2
        const speed = ((2 * Math.PI * 0.2) / 360) * delta;
        for (const i in children) {
          const mesh = children[i];
          if (mesh.name === 'wheel') {
            // 把度数转为弧度
            mesh.rotation.y += THREE.MathUtils.radToDeg(delta);
          }
        }
        this.group.position.x -= speed;
        if (this.group.position.x < -10) {
          this.group.position.x = 10;
        }
      },

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

UI和UX设计师实用高效的设计工具大全

真正专业和优秀的UX设计师不会介意使用哪个工具。因为&#xff0c;只要能力足够&#xff0c;即使条件不同&#xff0c;工具不同&#xff0c;也可以设计出让人眼前一亮的作品。也许&#xff0c;这种理解本身并没有什么大问题。然而&#xff0c;如今&#xff0c;设计师显然有如此…

【汇编语言基础入门】—— 汇编的基础介绍

文章目录 一、机器语言二、汇编语言三、CPU 与 CPU 内存1、CPU 对存储器的读写 四、CPU 的典型构成1、寄存器2、通用寄存器3、物理地址的计算方法4、CS5、DS6、SS SP 一、机器语言 在学习汇编语言之前&#xff0c;我们应该先了解一下什么是机器语言。机器语言是机器指令的集合&…

网络渗透测试(被动扫描)

被动扫描 主要是指的是在目标无法察觉的情况下进行信息搜集。在Google上进行人名的搜素就是一次被动扫描。最经典的被动扫描技术就是"Google Hacking"技术。由于Google退出中国&#xff0c;暂时无法使用。在此介绍三个优秀的信息搜集工具 被动扫描范围 1.企业网络…

Kafka(三)生产者发送消息

文章目录 生产者发送思路自定义序列化类配置生产者参数提升吞吐量 发送消息关闭生产者结语示例源码仓库 生产者发送思路 如何确保消息格式正确的前提下最终一定能发送到Kafka? 这里的实现思路是 ack使用默认的all开启重试在一定时间内重试不成功&#xff0c;则入库&#xff…

基于Python实现,调用百度通用翻译API-详解

概述 在工作上需要各个国家语言的翻译方面很多地方用的上。 获取API权限: 登录百度账号,在个人信息界面,包括修改密码、绑定手机、身份人证等 https://api.fanyi.baidu.com/api/trans/product/desktop?req=developer 百度翻译开放平台 在开发者中心:需要开通个人账号…

13.利用辗转相除法求两个整数的最大公约数和最小公倍数。如96,36

文章目录 前言一、题目描述 二、题目分析 三、解题 前言 本系列为循环结构编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 利用辗转相除法求两个整数的最大公约数和最小公倍数,如96,36 二、题目分析 最小公倍数(输入的两个数之积)除(它们的最大公约数) 三…

【斗破年番】老婆们见面针锋相对,万蝎门勾结魂殿,大战一触即发

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 深度爆料&#xff0c;斗破苍穹年番70集剧情内容。萧炎对小医仙的信任可谓是深不可测&#xff0c;然而美杜莎与小医仙之间的隔阂却始终存在。尽管美杜莎和紫妍都已加入毒宗&#xff0c;但两人之间的冲突从未停…

模型剪枝Lab

这里是MIT 6.5940 Fall 2023的第一个实验Lab1的一些笔记&#xff0c;课程传送门&#xff1a;Han Lab Setup First, install the required packages and download the datasets and pretrained model. Here we use CIFAR10 dataset and VGG network which is the same as what…

java 之 泛型的详细介绍

文章目录 1. 为什么需要泛型&#xff1f;2. 泛型的基本概念3. 泛型类的例子4. 泛型方法的例子5. 泛型的好处 泛型使用的位置1. 泛型类&#xff08;Generic Class&#xff09;&#xff1a;2. 泛型接口&#xff08;Generic Interface&#xff09;&#xff1a;3. 泛型方法&#xf…

vue2按需导入Element(vite打包)

1.安装element 说明&#xff1a;-S是生产依赖。 npm install element-ui2 -S 2.安装babel-plugin-component 说明&#xff1a;-D是开发模式使用。 npm install babel-plugin-component -D 3. vite.config.js 说明&#xff1a;借助 babel-plugin-component &#xff0c;我们可…

人工智能极简史:一文读懂ChatGPT的前世今生

2022年11月30日&#xff0c;OpenAI推出的一款人工智能技术驱动的自然语言处理工具——ChatGPT&#xff0c;迅速在社交媒体上走红&#xff0c;短短5天&#xff0c;注册用户数就超过100万。 2023年1月末&#xff0c;ChatGPT的月活用户已突破1亿&#xff0c;一度成为史上增长最快的…

JSON.parse --- 搜索框

一 &#xff0c; JSON.parse this.num_normsTwo JSON.parse(res.result.normsTwo) 二. 搜索框 <template><div class"app-container"><span style"margin-left:120px;margin-right: 20px;width: 100px; display: inline-block;">物…

大语言模型可以学习规则11.13

大型语言模型可以学习规则 摘要1 引言2 准备3 从假设到理论3.1 诱导阶段&#xff1a;规则生成和验证3.2 演绎阶段&#xff1a;使用规则库进行显式推理 4 实验评估实验装置4.2 数字推理 5 相关工作 摘要 当提示一些例子和中间步骤时&#xff0c;大型语言模型&#xff08;LLM&am…

【网络豆送书第六期】《嵌入式虚拟化技术与应用》

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 公众号&#xff1a;网络豆云计算学堂 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a; 网络豆的主页​​​​​ 本期好书推荐&#xff1a;《嵌入式虚拟化技术与应用…

面试 | 再也不怕被问 Binder 机制了

Binder 机制 Binder 机制是 Android 特有的一种进程间通信&#xff08;IPC&#xff09;方式 1.1 Binder 机制的作用和原理&#xff1f; Linux系统将一个进程分为用户空间和内核空间。对于进程之间来说&#xff0c;用户空间的数据不可共享&#xff0c;内核空间的数据可共享&a…

Django下的Race Condition漏洞

目录 环境搭建 无锁无事务的竞争攻击复现 无锁有事务的竞争攻击复现 悲观锁进行防御 乐观锁进行防御 环境搭建 首先我们安装源码包&#xff1a;GitHub - phith0n/race-condition-playground: Playground for Race Condition attack 然后将源码包上传到Ubuntu 为了方便使…

python双端队列_中间是头两边是尾_两边是头中间是尾

双端队列的顺序表存储结构以及两种特殊的双端队列 双端队列 是一种允许我们同时从前端和后端添加和删除元素的特殊队列&#xff0c;它是队列和栈的结合体。 双端队列&#xff08;deque&#xff09;与队列&#xff08;queue&#xff09;就差了两个字&#xff0c;队列里元素只能…

uniapp——项目day04

购物车页面——商品列表区域 渲染购物车商品列表的标题区域 1. 定义如下的 UI 结构&#xff1a; 2.美化样式 渲染商品列表区域的基本结构 1. 通过 mapState 辅助函数&#xff0c;将 Store 中的 cart 数组映射到当前页面中使用&#xff1a; import badgeMix from /mixins/tab…

2023年【建筑电工(建筑特殊工种)】找解析及建筑电工(建筑特殊工种)复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 建筑电工(建筑特殊工种)找解析是安全生产模拟考试一点通生成的&#xff0c;建筑电工(建筑特殊工种)证模拟考试题库是根据建筑电工(建筑特殊工种)最新版教材汇编出建筑电工(建筑特殊工种)仿真模拟考试。2023年【建筑电…

1 Supervised Machine Learning Regression and Classification

文章目录 Week1OverViewSupervised LearningUnsupervised LearningLinear Regression ModelCost functionGradient Descent Week2Muliple FeatureVectorizationGradient Descent for Multiple RegressionFeature ScalingGradient DescentFeature EngineeringPolynomial Regress…