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

Stella981
• 阅读 1073

简介

通过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函数。两个函数的区别在于指定曲线曲率的方法。下面展示了这两个选项之间的区别:
43 Three.js自定义二维图形THREE.ShapeGeometry
对于二次曲线,我们要额外指定一个点(使用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设置圆的大小,而aStartAngleaEndAngle则用来定义圆弧要画多长。布尔属性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是一次性应用到整个路径

案例代码

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

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

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

注意:顶点必须按照逆时针方向绘制,才能够实现里面添加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>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这