Three.js-硬要自学系列7 (查看几何体顶点位置和索引、旋转，缩放，平移几何体)

本章主要学习知识点

学会如何查看几何体的顶点位置数据以及索引
设置几何体旋转、缩放、平移，以及居中模型

查看几何体顶点位置和索引

首先创建几个常见的几何体，方便我们进行查看

js 复制代码

// 创建长方体
const boxGeometry = new THREE.BoxGeometry(3,3,3,4,3);
// 创建球体
const sphereGeometry = new THREE.SphereGeometry(2,64,32);
// 创建圆柱体 
const cylinderGeometry = new THREE.CylinderGeometry(2,2,5);
// 创建矩形平面
const planeGeometry = new THREE.PlaneGeometry(3,3,4,4);
// 创建圆形平面
const circleGeometry = new THREE.CircleGeometry(2)

几何体的顶点数据存储在 posistion属性上

js 复制代码

//输出立方体的顶点信息
console.log(boxGeometry.attributes.position);

顶点数据集合以数组的形式存储在array字段中，count表示顶点数

索引存储在几何体对象的index属性上

js 复制代码

//输出立方体的索引
console.log(boxGeometry.index);

这里要注意的是count为228，表示拥有228个索引，每三个索引组成一个顶点

你可以尝试输出其它几何体的顶点和索引，查看它们彼此之间的区别

索引、旋转，缩放，平移几何体

创建一个矩形平面，它是两面可见的

通过scale设置缩放

js 复制代码

// x轴和z轴上缩放2倍，Y轴不变
geometry.scale(2,1,2)

通过translate设置平移

js 复制代码

// 将几何体在X轴上平移至3，Y轴平移至1，Z轴保持不变
geometry.translate(3,1,0)

通过rotate设置旋转

js 复制代码

// 将几何体在x,y,z轴上各旋转45度
geometry.rotateX(Math.PI/4)
geometry.rotateY(Math.PI/4)
geometry.rotateZ(Math.PI/4)

通过center将几何体设置到原点

当我们缩放，平移，旋转几何体后，其已经不在原点，通过调用几何体对象的center方法,可快速将几何体修正到原点

js 复制代码

geometry.scale(2,1,2)
// 平移
geometry.translate(3,1,0)

// // 旋转 
geometry.rotateX(Math.PI/4)
geometry.rotateY(Math.PI/4)
geometry.rotateZ(Math.PI/4)

js 复制代码

geometry.center()

以上就是本章的全部内容，内容不难，但需要通过大量的练习和实操才能更快的上手，其实很多东西并没有想象的那么困难，每天啃一点，学一点，时间总会给出答案，我很反感一开始就扣概念搞原理，任何一门知识的学习都要经过由浅入深这个过程，先做，做出个东西，哪怕是狗屎，管它完美不完美，在学习的过程中阶段性拿到结果，获得成就感，难到不是学习过程中的正向反馈么，加油！敬自己

以上案例均可在案例中心查看体验

THREE 案例中心