three.js顶点概念知识点_three.js float32array-程序员宅基地

技术标签: 3D-webGL-three.js  

three.js-顶点

在这里插入图片描述

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
// 点
let material = new THREE.PointsMaterial({
    
    color: 0x6c92fa,
    size: 10.0
});
let point = new THREE.Points(geometry, material);
this.scene.add(point);
线

在这里插入图片描述

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
// 线
let material = new THREE.LineBasicMaterial({
    
    color: 0x6c92fa,
});
let line = new THREE.Line(geometry, material);
this.scene.add(line);
mesh面

在这里插入图片描述

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
// mesh模型
let material = new THREE.MeshLambertMaterial({
     color: 0x3dce6f });
let cube = new THREE.Mesh(geometry, material);
this.scene.add(cube);
box模型

在这里插入图片描述

let geometry = new THREE.BoxGeometry(100, 100, 100);
let material = new THREE.MeshLambertMaterial({
    
    color: 0x0000ff
});
let mesh = new THREE.Mesh(geometry, material);
this.scene.add(mesh);
点着色

在这里插入图片描述

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
let colors = new Float32Array([
    1, 0, 0, //顶点1颜色
    0, 1, 0, //顶点2颜色
    0, 0, 1, //顶点3颜色
    1, 1, 0, //顶点4颜色
    0, 1, 1, //顶点5颜色
    1, 0, 1, //顶点6颜色
]);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
let material = new THREE.PointsMaterial({
    
    // color: 0xff0000,
    vertexColors: THREE.VertexColors,
    size: 10.0
});
let points = new THREE.Points(geometry, material);
this.scene.add(points);
线-着色-渐变

在这里插入图片描述

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
let colors = new Float32Array([
    1, 0, 0, //顶点1颜色
    0, 1, 0, //顶点2颜色
    0, 0, 1, //顶点3颜色
    1, 1, 0, //顶点4颜色
    0, 1, 1, //顶点5颜色
    1, 0, 1, //顶点6颜色
]);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
// line
let material = new THREE.LineBasicMaterial({
    
    // color: 0x3dce6f,
    vertexColors: THREE.VertexColors,
});
let cube = new THREE.Line(geometry, material);
this.scene.add(cube);
面-着色-渐变

在这里插入图片描述

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
let colors = new Float32Array([
    1, 0, 0, //顶点1颜色
    0, 1, 0, //顶点2颜色
    0, 0, 1, //顶点3颜色
    1, 1, 0, //顶点4颜色
    0, 1, 1, //顶点5颜色
    1, 0, 1, //顶点6颜色
]);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
// mesh模型
let material = new THREE.MeshBasicMaterial({
    
    // color: 0x3dce6f,
    vertexColors: THREE.VertexColors,
});
let cube = new THREE.Mesh(geometry, material);
this.scene.add(cube);

three.js-顶点法向量

设置法向量之后,在光照下,模型更有棱角感。
在这里插入图片描述

let geometry = new THREE.BufferGeometry();
let vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 0, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 0, //顶点6坐标
]);
let attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
var normals = new Float32Array([
    0, 0, 1, //顶点1法向量
    0, 0, 1, //顶点2法向量
    0, 0, 1, //顶点3法向量
    0, 1, 0, //顶点4法向量
    0, 1, 0, //顶点5法向量
    0, 1, 0, //顶点6法向量
]);
// normal属性访问几何体顶点法向量数据
// 设置几何体attributes属性的位置normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3);
let material = new THREE.MeshLambertMaterial({
     color: 0x3dce6f });
let cube = new THREE.Mesh(geometry, material);
this.scene.add(cube);
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41993525/article/details/115381381

智能推荐

Java 微服务之 SpringCloud快速入门day01 (四)Eureka注册中心高级部分(集群)(高可用)-程序员宅基地

文章浏览阅读606次,点赞30次,收藏13次。分享一份自己整理好的Java面试手册,还有一些面试题pdf。

基于深度学习的人脸检测与静默活体检测——C++实现_人脸识别c++-程序员宅基地

文章浏览阅读7.5k次,点赞2次,收藏38次。C++实现工业级静默活体检测,判别机器前出现的人脸是真实还是伪造。用于判别虚假人脸。_人脸识别c++

GitHub 弃用TLS 1.0、1.1导致SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version_github 不支持 tls 1.1.2-程序员宅基地

文章浏览阅读1.8w次,点赞2次,收藏4次。报错git push 到 Github 的时候出现异常:fatal: unable to access 'https://github.com/huihut/interview.git/': error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol versionPushing to https:/..._github 不支持 tls 1.1.2

FPGA实验六:PWM信号调制器设计_fpga pwm-程序员宅基地

文章浏览阅读2.8k次,点赞7次,收藏33次。(1)掌握通信信号调制过程及实现原理;(2)了解设计中的优化方案;(3)进一步学习复杂数字系统设计;(4)培养工程思维及创新思维。(1)实现单路PWM 信号模块,可通过端口设置初始相位,频率,占空比;(2)通过模块调用方法,实现三路PWM信号输出,分辨展示相位,频率,占空比可调;(3)加入正弦波形VTH(t)实现SPWM波形;1.顶层文件代码限于篇幅,此处仅给出顶层代码。_fpga pwm

uml学习_用例规约的分支过程描述-程序员宅基地

文章浏览阅读423次。《Thinking in UML》学习总结@(总结)[思考|学习|记录]Thinking in UML学习总结简要面向过程和面向对象面向过程面向对象建模公式用例驱动抽象层次视图对象分析的方法获取需求定义边界发现主角获取业务用例业务建模业务用例场景业务用例规约业务规则业务对象模型业务用例实现视图业务用例实现场景包图领域模型提取业务_用例规约的分支过程描述

Maven导包小插曲-程序员宅基地

文章浏览阅读170次。Maven导包小插曲问题一:尝试解决方法解决方法问题二:解决方法问题三:解决方法pom配置冒红小技巧问题一:为什么Maven用pom配置后,可以在本地仓库看见导进来的文件夹,但没看见到jar包,只能看见尾缀为lastUpdated的文件。尝试解决方法一开始以为是未配置maven镜像,使用的是原来默认的,太慢了,没下载成功的原因,因为之前使用是不会的。后来发现是自己默认选择用的.m2的settings原因,换成idea自带maven3中setting,又不行。解决方法①换完setting后还需要进

随便推点

Kubernetes高可用集群二进制部署(四)部署kubectl和kube-controller-manager、kube-scheduler_kube-controller-manager 配置-程序员宅基地

文章浏览阅读1.1k次,点赞11次,收藏8次。scheduler通过 kubernetes 的监测(Watch)机制来发现集群中新创建且尚未被调度到 Node 上的 Pod。 scheduler会将发现的每一个未调度的 Pod 调度到一个合适的 Node 上来运行。 scheduler会依据下文的调度原则来做出调度选择。Controller Manager作为集群内部的管理控制中心,负责集群内的Node、Pod副本、服务端点(Endpoint)、命名空间(Namespace)、服务账号(ServiceAccount)、资源定额(ResourceQuot_kube-controller-manager 配置

Adobe Spry 中文文档库 -- 使用Spry XML数据集(中)-程序员宅基地

文章浏览阅读112次。Working with Spry XML Data SetsSpry主要和明细区域概要和结构使用Spry数据集,你可以创建主要和明细动态区域去显示详细数据,一个区域(主要)控制另一个区域(明细)的数据显示。 A. Master Region (主要区域)B. Detail Region (明细区域)通常..._spry:detailregion

MDA(模型驱动架构)_mda模型层包含-程序员宅基地

文章浏览阅读894次。 C语言花费了二十年从蛮荒之中杀出一条血路,Java苦心耕耘了近十年方成大气,C#在Beta版本推出两年前就开始通过各种途径营造气氛,砸下了数不清的美金,直到现在还未被主流应用所完全接受。而MDA(Model Driven Architecture 模型驱动架构)自从2002年被OMG(Object Management Group 国际对象管理集团)提出以后,"随风潜入夜,润物细无声",未见_mda模型层包含

Android Html.fromHtml() 设置字体颜色-程序员宅基地

文章浏览阅读6.3k次,点赞3次,收藏4次。android常见对文本处理的方法,及Html.fromHtml(),SpannableString的详细使用和注意事项_android html.fromhtml

Spring Cloud微服务架构优化实践,高效稳定的分布式系统构建_如何优化部署微服务项目-程序员宅基地

文章浏览阅读431次。Spring Cloud微服务架构优化实践,高效稳定的分布式系统构建一、简介1. Spring Cloud 微服务架构2. 微服务架构的发展和优势优化实践的意义和重要性二、优化实践1. 微服务治理的优化1.1 服务注册与发现1.2 负载均衡1.3 服务容错和故障转移2. 服务调用的优化2.1 服务调用方式的选择服务调用的高效性和稳定性服务调用的安全性和可控性3. 数据访问的优化数据库访问的优化策略数据库集群的部署和管理数据库访问的安全性和可控性4. 配置管理的优化4.1 配置中心的选择和使用配置管理的高效性_如何优化部署微服务项目

基于springboot+java+vue的健身房课程预约信息网站-计算机毕业设计-程序员宅基地

文章浏览阅读334次,点赞10次,收藏10次。运行环境开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven项目介绍。

推荐文章

热门文章

相关标签