threejs：二维绘图（基础点，线，不规则图形等）

最新推荐文章于 2025-06-30 10:46:35 发布

小新快跑123

最新推荐文章于 2025-06-30 10:46:35 发布

阅读量1.3w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： threejs 文章标签： threejs JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_42755384/article/details/89180309

总目录 >> threejs入门进阶到实战(目前已更新入门篇、基础篇和进阶篇)

此处点线面的基础教学比较好:http://www.yanhuangxueyuan.com/Three.js_course/face.html

其实对于threejs来说,只有点,线,以及其他形状.

知识补充:0x0000ff 0x表示16进制,ff为256,中间两个0就是0.此处采用的是RGB制

点的绘制

 var geometry = new THREE.Geometry();//声明一个空几何体对象
    var p1 = new THREE.Vector3(10,0,0);//顶点1坐标
    var p2 = new THREE.Vector3(0,20,0);//顶点2坐标
    var p3 = new THREE.Vector3(15,15,0);//顶点3坐标
    geometry.vertices.push(p1,p2,p3); //顶点坐标添加到geometry对象
    var material=new THREE.PointsMaterial({
   
   
        color:0x0000ff,
        size:1.0//点对象像素尺寸
    });//材质对象
    var points=new THREE.Points(geometry,material);//点模型对象
    sceneB.add(points);//点对象添加到场景中

在这里插入图片描述会发现这个点并不符合我们的要求,因为实际的点应当是圆的.因为默认形状是像素点.因此我们需要加载适当的形状…(相当于为点加了纹理.)map: sprite,

function drawPoints(){
   
   
  var sprite = new THREE.TextureLoader().load( 'images/disc.png' );//点的纹理
  var geometry = new THREE.Geometry();//声明一个空几何体对象
    var p1 = new THREE.Vector3(-10,0,0);//顶点1坐标
    var p2 = new THREE.Vector3(0,10