threejs物体扫描

threejs物体扫描

目录

前言

二、材质

1.shader

2.使用

总结

---

前言

在 vue2 中实现 threejs单物体扫描

---

一、地形

地形是基于 ImprovedNoise 创建,可以创建具有一定规律的随机点，用来模拟地形效果很好。

//引入
import{ ImprovedNoise } from'three/examples/jsm/math/ImprovedNoise'//柏林噪声

funZ(width, height) {
      let size = width * height;
      let data = new Uint8Array(size);
      let perlin = new ImprovedNoise();
      // 控制地面显示效果  可以尝试0.01  0.1  1等不值
      // 0.1凹凸不平的地面效果  1山脉地形效果
      let quality = 1.2;
      // z值不同每次执行随机出来的地形效果不同
      let z = Math.random() * 100;
      for (let j = 0; j < 4; j++) {
        for (let i = 0; i < size; i++) {
          // x的值0 1 2 3 4 5 6...
          let x = i % width;
          // ~表示按位取反 两个~就是按位取反后再取反
          // ~~相当于Math.floor(),效率高一点
          // y重复若干个值
          let y = ~~(i / width);
          // 通过噪声生成数据
          data[i] += Math.abs(perlin.noise(x / quality, y / quality, z) * quality * 1.75);
          // console.log(y);
        }
        // 循环执行的时候，quality累乘  乘的系数是1  显示效果平面
        quality *= 5;
      }

      return data;
    }

// width，height两个变量用控制平面几何体顶点数量
      // 行列两个方向顶点数量不同  显示效果不同   分别为100和250显示不同的效果
      let width = 250, height = 250;
      // 生成地形顶点高度数据
      let dat