threejs创建平面几何形状
创建平面几何形状
平面几何形状有三种：点，线，面三种，下面说说用threejs创建这几种形状的方法。
创建点
创建点可以使用Points类。
function createPoints(){//创建一个Geometry，并添加点let geometry = new THREE.Geometry();geometry.vertices.push(new THREE.Vector3(0,0,0));geometry.vertices.push(new THREE.Vector3(15,15,0));geometry.vertices.push(new THREE.Vector3(-15,2,0));//使用PointsMaterial，记得加上size属性，用来设置点的大小let material = new THREE.PointsMaterial({color:0xff0000,size:4});let points = new THREE.Points(geometry,material);return points;
}
默认情况下，点是一个正方形，当然，也可以使用材质，改变点的形状，如下：
function createShapePoints(){//创建一个圆形的材质，记得一定要加上texture.needsUpdate = true;let canvas = document.createElement("canvas");canvas.width = 100;canvas.height = 100;let context = canvas.getContext("2d");context.fillStyle = "#ffff00";context.arc(50,50,45,0,2*Math.PI);;context.fill();let texture = new THREE.Texture(canvas);texture.needsUpdate = true;//创建点，是用PointsMaterial的map属性来设置材质let geometry = new THREE.Geometry();geometry.vertices.push(new THREE.Vector3(0,0,0));geometry.vertices.push(new THREE.Vector3(15,15,0));geometry.vertices.push(new THREE.Vector3(-15,2,0));let material = new THREE.PointsMaterial({color:0xff0000,size:4,map:texture});let points = new THREE.Points(geometry,material);return points;
}
效果如图：
注意，既然点可以使用材质，那么点其实可以表示任何形状，从这个意义上讲，点也是一个平面。
创建线
可以使用Line创建线：
function createLine(){let geometry = new THREE.Geometry();geometry.vertices.push(new THREE.Vector3(15,15,0));geometry.vertices.push(new THREE.Vector3(-15,2,0));let material = new THREE.LineBasicMaterial({color:0xff0000}); //注意这里使用的是LineBasicMateriallet line = new THREE.Line(geometry,material);return line;
}
使用LineSegments创建虚线：
function createDashedLine(){let geometry = new THREE.Geometry();geometry.vertices.push(new THREE.Vector3(15,15,0));geometry.vertices.push(new THREE.Vector3(-15,2,0));geometry.computeLineDistances(); //注意加上这句let material = new THREE.LineDashedMaterial({color:0xff0000,dashSize:3,gapSize:2,lineWidth:1 });let line = new THREE.LineSegments(geometry,material);return line;
}
其中，LineDashedMaterial的属性dashSize和gapSize分别制定线段的长度和间隔的长度。注意一开始不要设得太大，否则整条虚线就只有一个线段，那你看到的就是一条直线了。创建效果如图：
创建面
ShapeGeometry
要创建面可以使用ShapeGeometry。面的形状是可以任意的，threejs用路径来画形状，并且提供了shape类来帮助我们创建形状。下面使用ShapeGeometry来创建一个圆弧：
function createArc(){//通过Shape来创建圆弧这个形状，而Shape是通过定义路径来定义形状的let shape = new THREE.Shape();shape.absarc( 0, 0, 40, 0/180*Math.PI ,45/180*Math.PI, false );//做为ShapeGeometry的参数let arcGeometry = new THREE.ShapeGeometry(shape);let arcMaterial = new THREE.LineBasicMaterial({color:0xff0000});let arc = new THREE.Line(arcGeometry,arcMaterial);return arc;
}
效果如下：
注意，图中红色的部分才是我们创建的，其它是辅助线。
当然，也可以创建一个扇形，如下：
function createArc(){let shape = new THREE.Shape();shape.absarc( 0, 0, 40, 0/180*Math.PI ,45/180*Math.PI, false );shape.lineTo(0,0); //（1）做一条线到圆心let arcGeometry = new THREE.ShapeGeometry(shape);//（2）使用网格模型来表示arcMaterial = new THREE.MeshBasicMaterial({color:0xff0000});arc = new THREE.Mesh(arcGeometry,arcMaterial);return arc ;
}
效果如下：
shape 类还有很多方法，可以创建各种形状，请参考其父类【path对象】
CircleGeometry
threejs提供这个类用于创建2维的圆形或扇形。
function createArc(){let geometry = new THREE.CircleGeometry(30,10,0,45/180*Math.PI);let material = new THREE.LineBasicMaterial({color:0xff0000});let arc = new THREE.Line(geometry,material);return arc;
}
效果如下：
可以看到多了一条线，可以将Geometry的第一个点删掉即可：
function createArc(){let geometry = new THREE.CircleGeometry(30,80,0,360/180*Math.PI);** geometry.vertices.shift(); //添加这句**let material = new THREE.LineBasicMaterial({color:0xff0000});let arc = new THREE.Line(geometry,material);return arc;
}
PlaneGeometry
PlaneGeometry可以创建2维矩形：
function createRect(){let geometry = new THREE.PlaneGeometry(10,10);let material = new THREE.MeshBasicMaterial({color:0x00ff00});let rect = new THREE.Mesh(geometry,material);return rect;
}
效果如图：
总之，Geometry是点集，各种Geometry只是为了更方便的创建各种形状的点集。
持续更新，请看【这里】
threejs创建平面几何形状相关推荐
- html5仿腾讯,高仿腾讯QQ Xplan（X计划）的H5页面（1）：threejs创建地球
上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5"的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成, 除了手机端的media控 ...
- threejs 绘制球体_实战：用 threejs 创建一个地球
原标题:实战:用 threejs 创建一个地球 提示: 讲座 前端大型免费公开课讲座 教程 从零基础学前端教程,都在这~ 上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5" ...
- draw.io创建自定义形状
使用文本编辑器在diagrams.net中创建自定义形状 你可以在diagrams.net中创建自己的自定义模板(形状),通过XML格式描述模板中组件的几何形状.连接点和样式. 提示:你可以将自定义模 ...
- threejs创建3d交互地图
文章目录 前言 关键点 源码 总结 前言 基于react-hooks创建的三维地图,只实现了基本的交互展示,可根据个人喜好增加各种交互和展示效果,效果如下. 关键点 使用threejs创建3d地图注意 ...
- ThreeJs创建天空盒
ThreeJS创建天空盒比较简单,可以理解成给一个立方体贴图,所以需要给六个面分别贴图,6张图构建整个场景的图片.这六张图分别是朝前的(posz).朝后的(negz).朝上的(posy).朝下的(ne ...
- 使用Threejs创建几何体，动态添加几何体，删除几何体，添加坐标轴
1,介绍 该示例使用的是 r95版本Three.js库.将创建一个场景并添加几何体,动态添加几何体,删除几何体,获取场景所有对象,添加坐标轴.效果图如下: 引入文件: three.js // thr ...
- threejs入门第一节如何用threejs创建一个简单的场景
什么是threejs? threejs是一个用于在浏览器中绘制3D图像的JS库.它是基于webgl实现了,包括了webgl1和webgl2的渲染引擎.同时也包括了最新的webgpu.(部分浏览器基本不 ...
- Threejs创建几何体并贴材质
目录 一 创建球体 二 创建正方体 三 创建圆柱体 四 创建管道 更多内容见小白gis threejs如何创建比如球体,正方体,圆柱体,并贴材质: 一 创建球体 纯色纹理和图片纹理的两种球体 代码: ...
- freeCodeCamp “使用 CSS 和 HTML 创建更复杂的形状”练习-----创建“爱心”❤️形状
在本挑战中将用纯 CSS 创建一个心形. 首先需要了解伪元素 ::before 和 ::after.伪元素可以在所选元素之前或之后添加一些内容. 在下面的代码中,::before 伪元素用来给 cla ...
最新文章
- vmware 虚拟机控制台打开慢的解决方案
- 量子位「MEET 2022智能未来大会」启动，邀你一起见证AI价值
- imdb数据集_朴素贝叶斯分类imdb（代码分享）
- 解决function id unknown issue
- 【AI视野·今日Robot 机器人论文速览 第三十一期】Fri, 15 Apr 2022
- Linux高级编程（四）
- Java案例：Log4J基本使用
- 服务器宕机不再愁！Docker 内置功能帮您解决
- 微课|玩转Python轻松过二级（2.1.4节）：列表、元组、字典、集合概述
- 活动子项父项的复杂CSS选择器[重复]
- debian安装gcolor2
- Linux下squid代理缓存服务环境部署
- Java设计模式总结
- 这家自动驾驶公司，或将引领半封闭物流搬运领域的变革
- Python批量提取Excel文件中所有单元格批注
- Windows安装pip方法
- 手机使用电脑自带功能进行投屏
- 长租公寓全员「戒掉」租金贷会怎样？
- Python Tkinter——数字拼图游戏
- Linux：乌班图安装jdk