miaoYu

3D WebGL入门之几何体

原文链接: codepen.io

这是3D WebGL入门的系列文章的第二部分。如果你没有看过其他部分,请务必看一看。


在上一篇文章中,我们知道了如何创建一个拥有相机和一些灯光的Three.js的场景。下一步我们要把物体放到场景中。

为了方便学习如何将3D几何体加入场景中,我们先了解一点3D建模的技术术语。

3D模型(或者网格)由顶点,边和面组成。

顶点: 三条边的交点。

边: 两个面相交那条线(想象一下立方体的边)。

面: 多边形(三角形)组成模型的面。

所有的3D模型(或者说网格)可以被分解成一个个的三角形。你可以通过制定顶点的位置来构造几何体,好消息是Three.js提供了一系列方法来帮你创建各种形状。

注:在我的例子中我将使用普通的网格材料,目的是不牵涉过多材料的部分,因为在这篇文章中我们只关注几何体。在之后的文章我会讲材料的部分!

下面来看看是如何将几何体放到3D场景中。

创建立方体

// 创建几何体使用BoxGeometry方法
var geometry = new THREE.BoxGeometry( 20, 20, 20);
// 创建材料
var material = new THREE.MeshNormalMaterial();
// 几何体网格化,以及把材料应用到几何体中
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

结果

<iframe height='265' scrolling='no' title='A Three.js cube' src='//codepen.io/rachsmith/embed/qbgBNo/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A Three.js cube by Rachel Smith (@rachsmith) on CodePen. </iframe>

正如你所看到的,通过使用scene.add(cube)把我们创建的几何体网格放到了我们的场景中,坐标为(0,0,0)。这个和我们的相机,灯光一样,我们可以更新立方体的位置。我们也可以更新立方体的角度。

位置和旋转

 // 让立方体旋转
cube.rotation.x = 0.45;
cube.rotation.y = -0.25;

// 让立方体在x方向移动
cube.position.x = -30;

<iframe height='265' scrolling='no' title='A Three.js cube - rotated' src='//codepen.io/rachsmith/embed/GozRMb/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A Three.js cube - rotated by Rachel Smith (@rachsmith) on CodePen. </iframe>

现在看起来像一个立方了!不仅仅是立方体,Three.js提供很多选项,你可以创建一个20立面体:

<iframe height='265' scrolling='no' title='A Three.js icosahedron - spinning' src='//codepen.io/rachsmith/embed/Rrvwpv/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A Three.js icosahedron - spinning by Rachel Smith (@rachsmith) on CodePen. </iframe>

记住一件事情,不管是立方体,20面体还是其他的物体,他们都一样,都是几何体,只是它们的顶点数量和位置不同而已。

修改几何体的顶点

Three.js可以帮助你修改立方体的样子,你可以把几何体修改成你想要的样子。几何体有一个属性叫做vertices - 它是包含所有顶点的数组。你可以修改这些顶点的位置,甚至可以从顶点数组中新增或者移除。

// 修改立方体的顶点
for (var i = 0, l = geometry.vertices.length; i<l; i++) {
  // 我们通过一个随机数将每个顶点沿x轴和y轴移动
  geometry.vertices[i].x += -10 + Math.random()*20;
  geometry.vertices[i].y += -10 + Math.random()*20;
}

随机结果如下:

<iframe height='265' scrolling='no' title='A Three.js cube - modified vertices' src='//codepen.io/rachsmith/embed/adXbqG/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A Three.js cube - modified vertices by Rachel Smith (@rachsmith) on CodePen. </iframe>

你可以对几何体进行微调,得到任何你想要得到的几何体!

下面是一些我很喜欢的例子:

@yakudoo超可爱小鸟

<iframe height='265' scrolling='no' title='Paranoid vs shy birds' src='//codepen.io/Yakudoo/embed/LVyJXw/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Paranoid vs shy birds by Karim Maaloul (@Yakudoo) on CodePen. </iframe>

@aglosson水晶 (用你的鼠标旋转它)

<iframe height='265' scrolling='no' title='Spinning Ball of Crystal' src='//codepen.io/aglosson/embed/rVyRGm/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Spinning Ball of Crystal by Amanda Glosson (@aglosson) on CodePen. </iframe>

现在我们已经可以把几何体引入到场景中了,并且可以尝试创建不同的形状。

创建一个场景,尝试着加入不同的网格以及改变他们的位置以及角度。打乱顶点的位置,会得到意想不到的结果!如果你不想写JavaScript,只是想查看Three.js提供的几何体,可以用Three.js编辑器 ,这个编辑器是一个非常棒的资源,允许你快速创建几何体到一个场景中。

你甚至可以从3D软件中获取更复杂的几何体,然后把它放到你的Three.js场景中,这个部分我会之后写:)

感谢您的阅读!