three顶点位置数据解析渲染

学习顶点概率

---

前言

所有3d对象都是顶点组成

---

一、创建几何体

一个Mash对象或者Group对象的生成, 都离不开两个(几何模型, 材质)
1.1 该方法创建了一个场景,且创建了一个网格模型(new THREE.BufferGeometry()), 也就是几何模型,集合模型也可以称为几何体
1.2 几何体是由顶点组成 , 所以要创建顶点 , 其中 (new Float32Array) 是javascript中的原生方法, 创建了一个类型化数组 , 然后使用three的api (new THREE.BufferAtrribute(类型化数组 , 多少为一组)) 生成缓冲顶点 ; 缓冲顶点的定义 : (暂时认为是,为每个顶点生成xyz坐标)
1.3 顶点已经生成, 那么就需要加入到几何体中去 , 几何体有一个attributes属性, 其中向position 赋值即可,此时几何体对象就生成了

代码如下：

// 创建场景对象Scene
let scene = new THREE.Scene()

// 创建网格模型
let geometry = new THREE.BufferGeometry(); //创建一个buffer类型几何体

// 创建一个类型化数 (类型数组创建顶点数据)
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.BufferAtrribute(vertices , 3); //3个为一组 表示一个顶点的xyz坐标

// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;
// geometry.addAttribute("position" , attribue)

二、渲染模式

1.(面) 已经有了几何体, 那么就是创建材质即可, 然后使用THREE.Mesh 或 THREE.Group 来组合模型

代码如下：

// 三角形(网格)渲染模式
// 创建材质
let material = new THREE.MeshBasicMaterial({
  color : 0x0000ff,
  side : THREE.DoubleSide //两面可见
})
var mesh = new THREE.Mesh(geometry , material)
scene.add(mesh)

2.(点) 使用了点材质(PointsMaterial), 和点模型 (Points)

代码如下：

// 点渲染模式
// 创建材质 (使用点材质)
let material = new THREE.PointsMaterial({
 color: 0xff0000,
 size : 0.5 ,//点 像素尺寸
})
let points = new THREE.Points(geometry , material)
scene.add(points)

3.(线) 使用了线材质(LineBasicMaterial) , 和 线模型(Line)

代码如下：

// 线条显然模式
// 创建材质 (使用线材质)
let material = new THREE.LineBasicMaterial({
 color:0xff0000 //线条颜色
});
let line = new THREE.Line(geometry , material)
scene.add(line)

---

三、创建相机 , 渲染器对象 , 控制器对象

/**
 * 相机设置
 */
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
 * 创建渲染器对象
 */
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
}
render();
//创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
var controls = new THREE.OrbitControls(camera,renderer.domElement);
//监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
controls.addEventListener('change', render);

总结

3d渲染中 , 离不开 场景(Scene) , 相机(camera) , 渲染器(renderer) , 控制器(controls)
其中 , 如果要在场景中自定义生成一个模型 , 需要具备三大要素 , 几何体对象 , 材质 , 模型对象
几何体对象 : 由顶点组成,必须包含顶点数据
材质 : 皮肤 , 其中包含(面材质, 点材质, 线材质) 材质不能混搭使用, 必须对应
模型对象 : 取决于使用哪种渲染模式(面(Mash , Group), 点(points) , 线(line))

可以很抽象的在脑海中这样构成一个3d画面 : 一个几何体, 这个几何体是有很多个顶点组成,然后给其贴上材质,让其显示不同的颜色效果, 但是有了几何体和材质, 还不足以让其显示, 因为不知道显示什么样的状态, 所以就要用到模型对象