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

来源：互联网发布：电脑网络重置命令编辑：程序博客网时间：2024/06/05 16:44

简介

通过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是一次性应用到整个路径

案例代码

这里写图片描述
通过上面的方法一步一步的实现的下面的效果

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        html, body {            margin: 0;            height: 100%;        }        canvas {            display: block;        }    </style></head><body onload="draw();"></body><script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/QuickHull.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/geometries/ConvexGeometry.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script><script>    var renderer;    function initRender() {        renderer = new THREE.WebGLRenderer({antialias:true});        renderer.setSize(window.innerWidth, window.innerHeight);        document.body.appendChild(renderer.domElement);    }    var camera;    function initCamera() {        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);        camera.position.set(0, 0, 100);    }    var scene;    function initScene() {        scene = new THREE.Scene();    }    var light;    function initLight() {        scene.add(new THREE.AmbientLight(0x404040));        light = new THREE.DirectionalLight(0xffffff);        light.position.set(1,1,1);        scene.add(light);    }    function initModel() {        var shape = new THREE.ShapeGeometry(drawShape());        var material = new THREE.MeshPhongMaterial({color:0xff00ff});        material.side = THREE.DoubleSide;//设置成两面都可见        var mesh = new THREE.Mesh(shape,material);        scene.add(mesh);        /*此方法是创建两种纹理的方法        * var shape = new THREE.ShapeGeometry(drawShape());        var mesh = createMesh(shape);        scene.add(mesh);        * */    }    //生成2d图形    function drawShape() {        // 实例化shape对象        var shape = new THREE.Shape();        // 设置开始点的位置        shape.moveTo(20, 10);        // 从起始点绘制直线到当前位置        shape.lineTo(20, 40);        //设置一条曲线到30 40        shape.bezierCurveTo(15, 25, -5, 25, -30, 40);        // 设置一条通过当前所有顶点的光滑曲线        shape.splineThru(            [new THREE.Vector2(-22, 30),                new THREE.Vector2(-18, 20),                new THREE.Vector2(-20, 10),            ]);        // 设置曲线回到顶点        shape.quadraticCurveTo(0, -15, 20, 10);        // 添加第一个眼        var hole1 = new THREE.Path();        hole1.absellipse(6, 20, 2, 3, 0, Math.PI * 2, true);        shape.holes.push(hole1);        // 添加第二个眼        var hole2 = new THREE.Path();        hole2.absellipse(-10, 20, 2, 3, 0, Math.PI * 2, true);        shape.holes.push(hole2);        // 添加嘴巴，一半的圆        var hole3 = new THREE.Path();        hole3.absarc(0, 5, 2, 0, Math.PI, true);        shape.holes.push(hole3);        // 返回shape        return shape;    }    //生成模型    function createMesh(geom) {        // 创建两个纹理        var meshMaterial = new THREE.MeshNormalMaterial();        meshMaterial.side = THREE.DoubleSide; //两面都可见        var wireFrameMat = new THREE.MeshBasicMaterial();        wireFrameMat.wireframe = true; //打开线框        // 创建生成模型        var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);        return mesh;    }    //初始化性能插件    var stats;    function initStats() {        stats = new Stats();        document.body.appendChild(stats.dom);    }    //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放    var controls;    function initControls() {        controls = new THREE.OrbitControls( camera, renderer.domElement );        // 如果使用animate方法时，将此函数删除        //controls.addEventListener( 'change', render );        // 使动画循环使用时阻尼或自转 意思是否有惯性        controls.enableDamping = true;        //动态阻尼系数 就是鼠标拖拽旋转灵敏度        //controls.dampingFactor = 0.25;        //是否可以缩放        controls.enableZoom = true;        //是否自动旋转        controls.autoRotate = false;        //设置相机距离原点的最远距离        controls.minDistance  = 20;        //设置相机距离原点的最远距离        controls.maxDistance  = 160;        //是否开启右键拖拽        controls.enablePan = true;    }    function render() {        renderer.render( scene, camera );    }    //窗口变动触发的函数    function onWindowResize() {        camera.aspect = window.innerWidth / window.innerHeight;        camera.updateProjectionMatrix();        render();        renderer.setSize( window.innerWidth, window.innerHeight );    }    function animate() {        //更新控制器        controls.update();        render();        //更新性能插件        stats.update();        requestAnimationFrame(animate);    }    function draw() {        initRender();        initScene();        initCamera();        initLight();        initModel();        initControls();        initStats();        animate();        window.onresize = onWindowResize;    }</script></html>

阅读全文

1 0