[Threejs]threejsの入門に関するいくつかの知識

threejsバージョンの問題について

threejsの新旧バージョン間の互換性はあまりよくないようで、数ヶ月前に使える方法は今使えないかもしれませんが、現在の最新バージョン番号はr 106です.標準ライブラリthreeにないインタフェースを使用する場合は、一般的にthree-fullで見つけることができます.他の非公式ライブラリ、特に1年半以上更新されていないライブラリは、使用を考慮しないほうがいいです.使えない可能性が高いからです.

線の問題について

線を引く過程で、正常に表示されないなどの奇妙な問題が発生しやすいので、公式exampleを参考にしたほうがいいです.例えば、https://threejs.org/examples/?q=line#webgl_lines_colors次はes 6ベースの参照コードです.

// 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);