threejs创建平面几何形状

最新推荐文章于 2025-04-26 22:08:45 发布

目尽地平线

最新推荐文章于 2025-04-26 22:08:45 发布

阅读量1.9w

点赞数 4

分类专栏： threejs three.js基础教程文章标签： threejs 2d 平面几何

本文链接：https://blog.youkuaiyun.com/ruangong1203/article/details/55259155

版权

创建平面几何形状

平面几何形状有三种：点，线，面三种，下面说说用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();