Three中线条颜色渐变设置

最新推荐文章于 2024-04-23 15:58:15 发布

快乐的小青蛙。

最新推荐文章于 2024-04-23 15:58:15 发布

阅读量426

点赞数 4

文章标签： three.js 前端

本文链接：https://blog.csdn.net/weixin_46002223/article/details/136307265

版权

import * as THREE from 'three'

const geometry = new THREE.BufferGeometry();

// 三维向量曲线
const arr = [
  new THREE.Vector3(-50, 20, 90),
  new THREE.Vector3(-10, 40, 40),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(60, -60, 0),
  new THREE.Vector3(70, 0, 80)
]
const curve = new THREE.CatmullRomCurve3(arr);
geometry.setFromPoints(curve.getSpacedPoints(100));


const pos = geometry.attributes.position;
const count = pos.count

// 计算每个顶点的颜色值
const colorsArr = []
for (let i = 0; i < count; i++) {
  const color = new THREE.Color();
  color.setHSL(i / count, 1, 0.5);
  colorsArr.push(color.r, color.g, color.b);

}
geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colorsArr), 3));

console.log(pos);
const material = new THREE.LineBasicMaterial({
  vertexColors: true,

});
const mesh = new THREE.Line(geometry, material);

export default mesh