没有合适的资源?快使用搜索试试~ 我知道了~
最近在学习three.js,将学习中遇到的知识点总结分享出来,下面这篇文章主要给大家介绍了关于Three.js利用顶点绘制立方体的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
资源推荐
资源详情
资源评论
Three.js利用顶点绘制立方体的方法详解利用顶点绘制立方体的方法详解
最近在学习three.js,将学习中遇到的知识点总结分享出来,下面这篇文章主要给大家介绍了关于Three.js利用顶
点绘制立方体的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
前言前言
之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置,法向量,绘制下标什么的。虽然复杂,但是毕竟原生,性
能没得说。
three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型,下面话不多说了,来一起看看详细的介绍吧。
下面是我的个人一个案例。下面是我的个人一个案例。
首先,我创建了一个空白的形状:
//立方体
var cubeGeometry = new THREE.Geometry();
立方体的形状如下:
// 创建一个立方体
// v6----- v5
// /| /|
// v1------v0|
// | | | |
// | |v7---|-|v4
// |/ |/
// v2------v3
然后添加了立方体的顶点,一共8个
//创建立方体的顶点
var vertices = [
new THREE.Vector3(10, 10, 10), //v0
new THREE.Vector3(-10, 10, 10), //v1
new THREE.Vector3(-10, -10, 10), //v2
new THREE.Vector3(10, -10, 10), //v3
new THREE.Vector3(10, -10, -10), //v4
new THREE.Vector3(10, 10, -10), //v5
new THREE.Vector3(-10, 10, -10), //v6
new THREE.Vector3(-10, -10, -10) //v7
];
cubeGeometry.vertices = vertices;
接着通过顶点的坐标生成了立方体的面
//创建立方的面
var faces=[
new THREE.Face3(0,1,2),
new THREE.Face3(0,2,3),
new THREE.Face3(0,3,4),
new THREE.Face3(0,4,5),
new THREE.Face3(1,6,7),
new THREE.Face3(1,7,2),
new THREE.Face3(6,5,4),
new THREE.Face3(6,4,7),
new THREE.Face3(5,6,1),
new THREE.Face3(5,1,0),
new THREE.Face3(3,2,7),
new THREE.Face3(3,7,4)
];
cubeGeometry.faces = faces;
在这里需要注意:在这里需要注意:
(1)面是由三个顶点组成的一个三角形面,也是WebGL的实现面的方式。如果需要一个长方形,那就需要由两个三角形组合
而成。
(2)如果要绘制的面是朝向相机的,那这个面的顶点的书写方式是逆时针绘制的,比如图上模型的第一个面的添加里面书写
的是(0,1,2)。
(3)如果能使模型有灯光的效果,还需要设置法向量,让three.js自动生成即可,如下
资源评论
weixin_38641111
- 粉丝: 1
- 资源: 931
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 520我爱您爱情表白卡片模板.pptx
- 红色婚礼邀请函喜帖中式婚礼手机配图模板.pptx
- 复古中国风古风婚礼邀请函封面模板.pptx
- 红色金色喜庆婚礼邀请函手机图模板封面.pptx
- 项目参考MATLAB GUI的水果识别(第28期).zip
- 满屏红玫瑰花叶素材婚礼策划话动方案模板.pptx
- 夕阳红风景婚礼策划模板素材.pptx
- 婚礼策划风景照片模板素材.pptx
- 西式简约婚礼邀请函模板.pptx
- 《MySQL 从入门到精通教程》:教程由浅入深,涵盖安装、配置、优化等知识,助您精通 MySQL,轻松管理数据库
- 项目参考MATLAB GUI漂浮物垃圾分类检测(第28期).zip
- 丧尸电影数据分析数据源
- 8f1173a3-c45a-441f-a164-1137cfece937.zip
- 项目参考MATLAB ORL的人脸考勤系统(第28期).zip
- 基于pyqt5+OpenPose的太极拳姿态识别系统可视化界面python源码+模型+数据集
- 基于pyqt5+OpenPose的太极拳姿态识别系统可视化界面python源码+数据集
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功