[Threejs]关于threejs入门的几点知识

关于threejs版本的问题

threejs新旧版本之间的兼容性貌似不太好，几个月前能用的方法现在可能就用不了，当前最新的版本号为r106.
如果你用到一些不在标准库three里的接口，一般在three-full里面都可以找到．
其他一些非官方的库，特别是那些一年半载甚至更久没有更新的库，最好就不用考虑使用了，因为很可能用不了．

关于画线的问题

画线的过程中，很容易出现不正常显示等一些诡异的问题，最好是能参考一下官方example，比如：
https://threejs.org/examples/?q=line#webgl_lines_colors
以下是一段基于es6的参考代码：

// import {LineGeometry, Line2, LineMaterial, CatmullRomCurve3} from 'three-full';

  genLines(points: Vector3[]) {
    // const spline = new CatmullRomCurve3(points); // 增加弧度
    const divisions = points.length; // Math.round(1 * points.length);
    const color = new Color();

    const positions = [];
    const colors = [];
    for (let i = 0, l = divisions; i < l; i++) {
      const point = points[i]; // spline.getPoint(i / l);
      positions.push(point.x, point.y, point.z);
      color.setHSL(
        (i + Math.random()) / (l + 1),
        (Math.random() + 0.5) / 1.5,
        0.5
      );
      colors.push(color.r, color.g, color.b);
    }

    // Line2 ( LineGeometry, LineMaterial )
    const geometry = new LineGeometry();
    geometry.setPositions(positions);
    geometry.setColors(colors);
    if (!this.lineMaterialV2) {
      this.lineMaterialV2 = new LineMaterial({
        color: 0xffffff,
        linewidth: 0.0025, // in pixels
        vertexColors: VertexColors,
        dashed: false
      });
    }
    const line = new Line2(geometry, this.lineMaterialV2);
    line.computeLineDistances();
    return line;
  }

关于锯齿的问题

需要用到postprocessing的FXAAShader, 放在OutlinePass等特效之后来实现，比如：

// import {
//  OutlinePass, RenderPass, OrbitControls, EffectComposer, ShaderPass,FXAAShader,
//  SceneUtils } from 'three-full';

	const composerOutline = new EffectComposer(this.renderer);
    const fxaaPass = new ShaderPass(FXAAShader);
    fxaaPass.material.uniforms.resolution.value.x = 1 / (window.innerWidth * pixelRatio);
    fxaaPass.material.uniforms.resolution.value.y = 1 / (window.innerHeight * pixelRatio);
    fxaaPass.renderToScreen = true;

	// const vec = new Vector2(window.innerWidth, window.innerHeight);
	// const outlinePass = new OutlinePass(vec, this.scene, this.camera);

    composerOutline.addPass(fxaaPass);