threejs 计算 uv position normal 等

有时候自定义几何体 需要贴各种图怎么办？

比如加载geojson数据

简单描述一下 计算方法吧...

const texture =  this.app.textureLoader.load(
 'https://www.wellyyss.cn/public/logo.png'
)

    texture.wrapS = texture.wrapT = this._3d.RepeatWrapping;
    texture.repeat.set( 1, 1);

    const _3d = this._3d
    const geometry = new _3d.BufferGeometry();

    const vertices = [
      0, 0, 0, // 0
      30, 0, 0,  // 1
      30, 0, 30, // 2
      0, 0, 30  // 3  这种顺序 将会 构成 三角面的 index角标规划

    ];

    let normals = [];

    const indices = new _3d.Uint16BufferAttribute([0, 3, 1, 1, 3, 2], 1); 
    // 每个数字代表 vertices 中的 顶点顺序 位置 —— 多种排序方法 构成三角面的正反面

    const number = 10 // uv 的 x y 都是 从 0 到 1 ; 
    // 当 number > 1 时候 如果没有写 Repeat方式 那么 超出的 会显示空白
    // 当 number < 1 时候 那么 就会显示 ‘裁剪后’得图片
    const uvs = [
      0, 0, 
      0, number,
      number, number, 
      number, 0
    ]


    // 类球面法向量计算
    const v = new this._3d.Vector3()
    vertices.forEach((e, i) => {
      if(i > vertices.length -2) return
      if(i % 3 === 0) {
        v.x = vertices[i]
        v.y = vertices[i + 1]
        v.z = vertices[i + 2]
        v.normalize();
        normals.push( v.x, v.y, v.z );
      }

    })

    // // 单平面 向上的 法向量
    // normals = [
    //   0, 0, 1,
    //   0, 0, 1,
    //   0, 0, 1,
    //   0, 0, 1
    // ]

    geometry.setIndex(indices);
    geometry.setAttribute('position', new this._3d.Float32BufferAttribute(vertices, 3));
    geometry.setAttribute('normal', new this._3d.Float32BufferAttribute(normals, 3));
    geometry.setAttribute('uv', new this._3d.Float32BufferAttribute( uvs, 2));



    const mesh = new _3d.Mesh(
      geometry,
      new _3d.MeshPhongMaterial({ side: _3d.DoubleSide, map: texture }),

    );

    this.scene.add(mesh)

   

 图例示意

更多教程 见

@跃焱邵隼