WEB 3D技术 three.js 通过分组顶点 给同一个物体设置多个材质

上文 WEB 3D技术 three.js 集合体 讲解三角形构建图形 顶点概念 顶点值重用 我们讲到 一个元素是由多个面组成的
那么 我们是不是可以一个物体用多个材质? 简单说 一个面用一种材质

我们还是在官网中搜索 geome 如下图选择
在这里插入图片描述
然后 找到 groups 顶点组 它能够将我们的顶点 划分成多个组
在这里插入图片描述
我们编写代码如下

//创建集合体
const geometry  = new THREE.BufferGeometry();
// 创建顶点数据
const vertices = new Float32Array([-1.0 ,-1.0 ,0.0,1.0 ,-1.0, 0.0,1.0 ,1.0 ,0.0,-1.0 ,1.0, 0.0
])
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0 ,1 ,2, 0, 3, 2]);
geometry.addGroup(0, 3, 0);
geometry.addGroup(3, 3, 1);
const material = new THREE.MeshBasicMaterial({color: 0x08ffee,wireframe: false,side: THREE.DoubleSide
})
const material1 = new THREE.MeshBasicMaterial({color: 0x08ffe,wireframe: false,side: THREE.DoubleSide
})
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
const cube = new THREE.Mesh(geometry, [material,material1]);
scene.add(cube)

首先 我们创建了两个组 addGroup 函数用于创建顶点分组 第一个组 设置 从第0个顶点开始 取 3个 就是 (0 1 2)下标顶点 然后 采用 第0个下标的材质
第二个组 从第3个下标顶点开始 取3个下标 用第一个下标的材质

然后 我们创建了两个材质 material1 和 material
THREE.Mesh第二个参数代表材质 我们传了一个数组
运行结果如下
在这里插入图片描述
这样 我们 012 345 下标顶点 分成了两个组 用了不同的材质

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

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

相关文章

Shell脚本应用(三)

一、使用for循环语句 1、for语句的结构 使用for 循环语句时,需要指定一个变量及可能的取值列表,针对每个不同的取值重复执行相同的命令序列.直到变量值用完退出循环。在这里."取值列表”称为for语句的执行条件,其中包括多个…

第七部分 二元关系

目录 主要内容 例1 笛卡儿积的性质 例2 注意&#xff1a;对于整除x整除y则&#xff0c;y/x为整数 例如 例3 关系的基本运算 例4 R{<1,2>,<1,3>,<2,4>,<4,3>} 例5 例6 关系运算的性质 例7 设A {a,b,c,d}, R {,,,},d>,c>,a>,b> 等价关系的…

UE和Android互相调用

ue和android互调 这两种方式都是在UE打包的Android工程之上进行的。 一、首先是UE打包Android&#xff0c;勾选下面这项 如果有多个场景需要添加场景 工程文件在这个路径下 然后可以通过Android Studio打开&#xff0c;选择gradle打开 先运行一下&#xff0c;看看是否可以发布…

第八部分 函数

定义 8.1 设 F 为二元关系 , 若 ∀ x ∈ dom F 都存在唯一的 y ∈ ran F 使 xFy 成立 , 则称 F 为 函数 对于函数 F , 如果有 xFy , 则记作 y F ( x ), 并称 y 为 F 在 x 的 值 . 例 F 1 {< x 1 , y 1 >,< x 2 , y 2 >,< x 3 , y 2 >…

Python实验:关灯游戏

文章目录 前言一、设计表二、关键代码三、运行结果小地图&#xff0c;容易难度&#xff1a;中地图&#xff0c;中等难度&#xff1a;大地图&#xff0c;困难难度&#xff1a; 四、完整代码链接总结 前言 这是一个Python实验作业&#xff0c;内容如下&#xff1a; 题目要求&am…

多维时序 | MATLAB实CNN-BiGRU-Mutilhead-Attention卷积网络结合双向门控循环单元网络融合多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现CNN-BiGRU-Mutilhead-Attention卷积网络结合双向门控循环单元网络融合多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现CNN-BiGRU-Mutilhead-Attention卷积网络结合双向门控循环单元网络融合多头注意力机制多变量时间序列预测预测效果基本介…

NUAA-云计算-考试

19级期末 问题 答案: md格式 自己想办法看 # 随堂测验#### 一、请简述GFS 的系统架构和特点。**1. 系统架构**- GFS将整个系统节点分为三类角色&#xff1a;- Client&#xff08;客户端&#xff09;&#xff1a;Client是GFS提供给应用程序的访问接口&#xff0c;以库文件的…

SpringBoot2.x+mybatis plus3.x集成Activit7版本

文/朱季谦 在Activiti6版本当中&#xff0c;若要集成到Springboot里&#xff0c;需要写一些额外的配置类&#xff0c;我曾经在Activiti工作流框架学习笔记&#xff08;二&#xff09;之springboot2.0整合工作流Activiti6.0一文当中总结过相关配置过程&#xff0c;感兴趣的同学…

ssh工具 向指定的ssh服务器配置公钥

此文分享一个python脚本,用于向指定的ssh服务器配置公钥,以达到免密登录ssh服务器的目的。 效果演示 🔥完整演示效果 👇第一步,显然,我们需要选择功能 👇第二步,确认 or 选择ssh服务器 👇第三步,输入ssh登录密码,以完成公钥配置 👇验证,我们通过ssh登录…

AI时代下,如何看待“算法利维坦”?程序员客栈程序员客栈​

ChatGPT的浪潮从2022年袭来后&#xff0c;至今热度不减&#xff0c;呈现出蓬勃发展的趋势。AI家居、医疗、教育、金融、公益、农业、艺术......AI真的已经走进了生活的方方面面&#xff0c;我们仿佛已经进入了AI时代&#xff0c;势不可挡。人工智能水平如此之高&#xff0c;不禁…

学习在UE中通过Omniverse实现对USD文件的Live-Sync(实时同步编辑)

目标 前一篇 学习了Omniverse的一些基础概念。本篇在了解这些概念的基础上&#xff0c;我想体验下Omniverse的一些具体的能力&#xff0c;特别是 Live-Sync (实时同步) 相关的能力。 本篇实践了使用Omniverse的力量在UE中建立USD文件的 Live-Sync 编辑。由于相关的知识我是从…

AI进化太快了!Stability AI开源视频生成大模型Stable Video Diffusion

对于 Stable Diffusion&#xff0c;想必读者朋友们对此都不陌生。 自 Stability AI 公司发布 SD&#xff08;全称&#xff1a;Stable Diffusion) 以来&#xff0c;受到了很多人的喜爱。 SDXL 效果 随后技术升级&#xff0c;又发布了 SDXL&#xff0c;名字很有喜感&#xff0c…