threejs--BufferGeometry创建线条

待我称王封你为后i 2022-09-10 15:11 265阅读 0赞

## 效果图： ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAU3RyaW5n5L2z5L2z_size_10_color_FFFFFF_t_70_g_se_x_16]

## 代码实现： ##

### 方法一： ###

const pointArr = new Float32Array([
            -347, 50, -520,
            -347, 50, 127,
            -345, 50, 145,
            -339, 50, 185,
            -284, 50, 270,
            -71, 50, 543
          ])
          const geometry = new THREE.BufferGeometry()
          geometry.setAttribute('position', new BufferAttribute(pointArr, 3))
          const lineMaterial = new THREE.LineBasicMaterial({  color: '#ff0000', side: THREE.DoubleSide })
          const line = new THREE.Line(geometry, lineMaterial)
          this.scene.add(line)

### 方法二： ###

const pointArr = [
            -347, 50, -520,
            -347, 50, 127,
            -345, 50, 145,
            -339, 50, 185,
            -284, 50, 270,
            -71, 50, 543
          ]
          const geometry = new THREE.BufferGeometry()
          geometry.setAttribute('position', new Float32BufferAttribute(pointArr, 3))
          const lineMaterial = new THREE.LineBasicMaterial({  color: '#ff0000', side: THREE.DoubleSide })
          const line = new THREE.Line(geometry, lineMaterial)
          this.scene.add(line)

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAU3RyaW5n5L2z5L2z_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/6f0581c34c704778b6992a80228c3d43.png

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关 SAI绘制飘逸渐变线条

最终效果： ![format_png][] 1.使用钢笔图层的曲线工具画出飘逸的线条，再使用笔压工具把线条首尾位置拉细。 ![format_png 1][]

- 日理万妓/ 2023年02月11日 03:14/ 0 赞/ 6 阅读

相关华容道(简约线条)

这是水文我的网络又炸了无奈之下只能搞搞html了(这玩意它不用网) 然后一上午搞了这个东西↓ ![在这里插入图片描述][20200520174434153.

た入场券/ 2023年02月10日 07:45/ 0 赞/ 1 阅读

相关 EasyExcel 设置边框样式（线条类型和线条颜色）

1 Maven配置  <dependency> <groupId>cn.h

╰+哭是因爲堅強的太久メ/ 2022年10月17日 05:24/ 0 赞/ 582 阅读

相关 CSS Login登录样式线条感

[下载地址][Link 1]漂亮的登录页面样式CSS代码，线条感的input和按钮，图片背景透明样式登录。 ![1631561289.png][] dd: [Link

怼烎@/ 2022年09月11日 13:26/ 0 赞/ 169 阅读

相关 threejs--BufferGeometry创建线条

效果图： ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAU3Rya

待我称王封你为后i/ 2022年09月10日 15:11/ 0 赞/ 266 阅读

相关 CSS3之线条特效（鼠标悬停线条从中间变长）

![这里写图片描述][SouthEast] 当鼠标悬停在红色圆上时，福字下面出现一条白色的线条从中间不断向两边延伸 ![这里写图片描述][SouthEast 1]

梦里梦外;/ 2022年07月11日 07:47/ 0 赞/ 248 阅读

相关【Word画线条5大技巧】

![1344496089_5151.png][] [1344496089_5151.png]: https://img-my.csdn.net/uploads/201208

矫情吗；*/ 2022年06月06日 11:47/ 0 赞/ 180 阅读

相关动态背景线条，鼠标移动线条汇聚---背景特效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3

快来打我*/ 2022年04月13日 14:18/ 0 赞/ 292 阅读

相关【MATLAB】线条标记符大小设置

Matlab绘图中用到的直线属性包括：（1）LineStyle：线形（2）LineWidth：线宽（3）Color：颜色（4）MarkerTyp

短命女/ 2022年01月29日 05:55/ 0 赞/ 772 阅读

相关 OpenLayers3绘制线条

OpenLayers3绘制线条本文适合能够使用openlayers3创建layer图层的开发者，并且本文使用的是vue.js进行开发，如果使用其他前端语言请自行更改。

素颜马尾好姑娘i/ 2021年11月26日 14:54/ 0 赞/ 542 阅读