43 Three.js自定义二维图形THREE.ShapeGeometry

简介

通过THREE.ShapeGeometry，你可以调用几个函数来创建自己的图形。我们可以使用线条（line）、曲线（curve）和样条曲线（spline）创建图形的轮廓。还可以使用THREE.Shape对象的holes属性给这个图形打几个孔。

创建THREE.ShapeGeometry对象

使用THREE.Shape对象绘制完成后，需要创建THREE.ShapeGeometry几何体，我们有两种方式创建

直接实例化

var shapeGeometry = new THREE.ShapeGeometry(shapes,options);
直接使用shape的内置方法makeGeometry()

var shapeGeometry = shape.makeGeometry(options);
参数表
属性|是否必需|描述
–|--|–
shapes|是|用来创建THREE.Geometry的一个或多个THREE.Shape对象。可以传入单个THREE.Shape对象或是一个THREE.Shape对象数组
options|否|还可以传入一些选项，这些选项可以应用于使用shapes参数传入的所有图形。关于这些选项的解释如下：
curveSegments—此属性确定从图形创建的曲线的平滑程度。默认值为12。
material—这是用于为指定图形创建的面的materialIndex属性。当把THREE.MeshFaceMaterial和此几何体一起使用时，materialIndex属性决定传入的材质中的哪些材质用于传入的图形的面
UVGenerator—当对材质使用纹理时，UV映射决定纹理的哪个部分用于特定的面。使用UVGenerator属性，可以传入自己的对象，这将为传入的图形穿件的面创建UV设置。

THREE.Shape的绘图函数

THREE.ShapeGeometry中最重要的部分是THREE.Shape，它可以用来创建图形。所以下面介绍用来创建THREE.Shape的绘画函数

名称

描述

moveTo(x,y)

该函数将绘图点移动到指定的x、y坐标处

lineTo(x,y)

该函数从当前位置（例如由moveTo函数设定的位置）绘制一条线到指定的x和y坐标处

quadraticCurveTo(aCPx,aCPy,x,y)

可以使用两种不同方式来指定曲线：使用quadraticCurveTo函数，或使用bezierCurveTo函数。两个函数的区别在于指定曲线曲率的方法。下面展示了这两个选项之间的区别：
这里写图片描述
对于二次曲线，我们要额外指定一个点（使用aCPx和aCPy参数），曲线仅基于该点绘制，当然还需要指定端点（x和y参数）。对于三次曲线（由bezierCurveTo函数绘制），你需要多指定两个点才能定义曲线。起始点是路径的当前位置。

bezierCurveTo(aCPx1,aCPy1,aCPx2,aCPy2,x,y)

根据提供的参数绘制一条曲线。相关说明可以参考钱一行的内容。该曲线的绘制局域两个定义曲线的坐标(aCPx1和aCPy1,aCPx2和aCPy2)以及终点坐标(x和y)。起始点是路径的当前位置。

splineThru(pts)

该函数沿着提供的坐标集合pts绘制一条光滑曲线。这个参数应该是一个THREE.Vector2对象数组。起始点是路径的相对位置

arc(aX,aY,aRadius,aStartAngle,andAngle,aClockwise)

该函数用来画圆（或一段圆弧）。圆弧起始于路径的当前位置。aX和aY用来指定于当前位置的偏移量。aRadius设置圆的大小，而aStartAngle和aEndAngle则用来定义圆弧要画多长。布尔属性aClockwise决定这段圆弧是顺时针还是逆时针画。

absArc(aX,aY,aRadius,aStartAngle,andAngle,aClockwise)

参考arc函数的描述。其位置是绝对位置，而不是相对于当前的位置

ellipse(aX,aY,aRadius,aStartAngle,andAngle,aClockwise)

参考arc函数的描述。作为补充，通过ellipse函数，可以分别指定x轴半径和y轴半径

absEllipse(aX,aY,aRadius,aStartAngle,andAngle,aClockwise)

参考ellipse函数的描述。其位置是绝对位置，而不是相对于当前的位置。

fromPoints(vectors)

如果给该函数传入一个THREE.Vector2(或THREE.Vector3)对象数组，Three.js会创建一条通过提供的顶点使用直线绘制的路径

holes

holes属性包含一个THREE.Shape对象数组。这个数组中的每一个对象会渲染为一个孔。关于这个属性的一个很好的例子就是我们在本节开头看到的例子。在那段代码段中，我们添加了三个THREE.Shape对象到这个数组，一个用来渲染左边的孔，一个用来渲染右边的孔，还有一个渲染主要THREE.Shape对象—嘴

THREE.Shape创建几何体的函数

名称

描述

makeGeometry(options)

该函数从THREE.Shape对象返回一个THREE.ShapeGeometry对象。

createPointsGeometry(divisions)

该函数将图形转换成一个点集。divisions属性定义返回点的数量。这个值越高，返回的点越多，最终的曲线也就越平滑。divisions会分别应用到路径的每一部分

createSpacedPointsGeometry(divisions)

该函数也是讲图形转换成一个点集，只不过这里的divisions是一次性应用到整个路径

案例代码

这里写图片描述

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/45.html

通过上面的方法一步一步的实现的下面的效果

注意：顶点必须按照逆时针方向绘制，才能够实现里面添加hole

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <style type="text/css">
7        html, body {
8            margin: 0;
9            height: 100%;
10        }
11
12        canvas {
13            display: block;
14        }
15
16    </style>
17</head>
18<body onload="draw();">
19
20</body>
21<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
22<script src="https://johnson2heng.github.io/three.js-demo/lib/js/QuickHull.js"></script>
23<script src="https://johnson2heng.github.io/three.js-demo/lib/js/geometries/ConvexGeometry.js"></script>
24<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
25<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
26<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
27<script>
28    var renderer;
29    function initRender() {
30        renderer = new THREE.WebGLRenderer({antialias:true});
31        renderer.setSize(window.innerWidth, window.innerHeight);
32        document.body.appendChild(renderer.domElement);
33    }
34
35    var camera;
36    function initCamera() {
37        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
38        camera.position.set(0, 0, 100);
39    }
40
41    var scene;
42    function initScene() {
43        scene = new THREE.Scene();
44    }
45
46    var light;
47    function initLight() {
48        scene.add(new THREE.AmbientLight(0x404040));
49
50        light = new THREE.DirectionalLight(0xffffff);
51        light.position.set(1,1,1);
52        scene.add(light);
53    }
54
55    function initModel() {
56        var shape = new THREE.ShapeGeometry(drawShape());
57        var material = new THREE.MeshPhongMaterial({color:0xff00ff});
58        material.side = THREE.DoubleSide;//设置成两面都可见
59        var mesh = new THREE.Mesh(shape,material);
60        scene.add(mesh);
61        /*此方法是创建两种纹理的方法
62        * var shape = new THREE.ShapeGeometry(drawShape());
63        var mesh = createMesh(shape);
64        scene.add(mesh);
65        * */
66    }
67
68    //生成2d图形
69    function drawShape() {
70
71        // 实例化shape对象
72        var shape = new THREE.Shape();
73
74        // 设置开始点的位置
75        shape.moveTo(20, 10);
76
77        // 从起始点绘制直线到当前位置
78        shape.lineTo(20, 40);
79
80        //设置一条曲线到30 40
81        shape.bezierCurveTo(15, 25, -5, 25, -30, 40);
82
83        // 设置一条通过当前所有顶点的光滑曲线
84        shape.splineThru(
85            [new THREE.Vector2(-22, 30),
86                new THREE.Vector2(-18, 20),
87                new THREE.Vector2(-20, 10),
88            ]);
89
90        // 设置曲线回到顶点
91        shape.quadraticCurveTo(0, -15, 20, 10);
92
93        // 添加第一个眼
94        var hole1 = new THREE.Path();
95        hole1.absellipse(6, 20, 2, 3, 0, Math.PI * 2, true);
96        shape.holes.push(hole1);
97
98        // 添加第二个眼
99        var hole2 = new THREE.Path();
100        hole2.absellipse(-10, 20, 2, 3, 0, Math.PI * 2, true);
101        shape.holes.push(hole2);
102
103        // 添加嘴巴，一半的圆
104        var hole3 = new THREE.Path();
105        hole3.absarc(0, 5, 2, 0, Math.PI, true);
106        shape.holes.push(hole3);
107
108        // 返回shape
109        return shape;
110    }
111
112    //生成模型
113    function createMesh(geom) {
114
115        // 创建两个纹理
116        var meshMaterial = new THREE.MeshNormalMaterial();
117        meshMaterial.side = THREE.DoubleSide; //两面都可见
118        var wireFrameMat = new THREE.MeshBasicMaterial();
119        wireFrameMat.wireframe = true; //打开线框
120
121        // 创建生成模型
122        var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
123
124        return mesh;
125    }
126
127    //初始化性能插件
128    var stats;
129    function initStats() {
130        stats = new Stats();
131        document.body.appendChild(stats.dom);
132    }
133
134    //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
135    var controls;
136    function initControls() {
137
138        controls = new THREE.OrbitControls( camera, renderer.domElement );
139
140        // 如果使用animate方法时，将此函数删除
141        //controls.addEventListener( 'change', render );
142        // 使动画循环使用时阻尼或自转 意思是否有惯性
143        controls.enableDamping = true;
144        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
145        //controls.dampingFactor = 0.25;
146        //是否可以缩放
147        controls.enableZoom = true;
148        //是否自动旋转
149        controls.autoRotate = false;
150        //设置相机距离原点的最远距离
151        controls.minDistance  = 20;
152        //设置相机距离原点的最远距离
153        controls.maxDistance  = 160;
154        //是否开启右键拖拽
155        controls.enablePan = true;
156    }
157
158    function render() {
159        renderer.render( scene, camera );
160    }
161
162    //窗口变动触发的函数
163    function onWindowResize() {
164        camera.aspect = window.innerWidth / window.innerHeight;
165        camera.updateProjectionMatrix();
166        render();
167        renderer.setSize( window.innerWidth, window.innerHeight );
168
169    }
170
171    function animate() {
172        //更新控制器
173        controls.update();
174        render();
175
176        //更新性能插件
177        stats.update();
178        requestAnimationFrame(animate);
179    }
180
181    function draw() {
182        initRender();
183        initScene();
184        initCamera();
185        initLight();
186        initModel();
187        initControls();
188        initStats();
189
190        animate();
191        window.onresize = onWindowResize;
192    }
193</script>
194</html>