Error: onBeforeCompile does not exist in type LineDashedMaterialParameters

Question

我想创建一个带有隐藏虚线的旋转立方体，如下所示。

但是，我在 VS Code 中遇到以下错误

(parameter) shader: any Argument of type '{ color: ColorRepresentation; dashSize: number; gapSize: number; onBeforeCompile: (shader: any) => void; }' is not assignable to parameter of type 'LineDashedMaterialParameters'. Object literal may only specify known properties, and 'onBeforeCompile' does not exist in type 'LineDashedMaterialParameters'.

SpinningCube.ts

console.clear();
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 100);
camera.position.set(-10, 10, 10);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x202020);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', onWindowResize);

let controls = new OrbitControls(camera, renderer.domElement);

let grid = new THREE.GridHelper(10, 10, 0x808080, 0x808080);
grid.position.y = -0.01;
//scene.add(grid);

let box = DashedHiddenEdgesBox(10, 6, 3, "yellow");
box.geometry.translate(0, 2.5, 0);
scene.add(box);

renderer.setAnimationLoop((_) => {
    box.rotation.x += 0.01;
    box.rotation.y += 0.01;
    renderer.render(scene, camera);
});

function DashedHiddenEdgesBox(w: number, h: number, d: number, color: THREE.ColorRepresentation) {
    //box base points
    let basePts = [
        [0, 0, 0], [1, 0, 0], [1, 0, 1], [0, 0, 1],
        [0, 1, 0], [1, 1, 0], [1, 1, 1], [0, 1, 1]
    ].map(p => { return new THREE.Vector3(p[0], p[1], p[2]) });
    // box sides normals
    let baseNor = [
        [0, 0, -1], [1, 0, 0], [0, 0, 1], [-1, 0, 0], [0, 1, 0], [0, -1, 0]
    ].map(n => { return new THREE.Vector3(n[0], n[1], n[2]) });

    let pts = [];
    let n1 = [];
    let n2 = [];

    //bottom
    for (let i = 0; i < 4; i++) {
        // bottom
        pts.push(basePts[i].clone());
        pts.push(basePts[(i + 1) > 3 ? 0 : (i + 1)].clone());
        n1.push(baseNor[i].x, baseNor[i].y, baseNor[i].z, baseNor[i].x, baseNor[i].y, baseNor[i].z);
        n2.push(baseNor[5].x, baseNor[5].y, baseNor[5].z, baseNor[5].x, baseNor[5].y, baseNor[5].z);
        // top
        pts.push(basePts[4 + i].clone());
        pts.push(basePts[(4 + i + 1) > 7 ? 4 : (4 + i + 1)].clone());
        n1.push(baseNor[i].x, baseNor[i].y, baseNor[i].z, baseNor[i].x, baseNor[i].y, baseNor[i].z);
        n2.push(baseNor[4].x, baseNor[4].y, baseNor[4].z, baseNor[4].x, baseNor[4].y, baseNor[4].z);
        // middle
        pts.push(basePts[i].clone());
        pts.push(basePts[i + 4].clone());
        n1.push(baseNor[i].x, baseNor[i].y, baseNor[i].z, baseNor[i].x, baseNor[i].y, baseNor[i].z);
        let prev = (i - 1) < 0 ? 3 : (i - 1);
        n2.push(baseNor[prev].x, baseNor[prev].y, baseNor[prev].z, baseNor[prev].x, baseNor[prev].y, baseNor[prev].z);
    }
    //console.log(pts)

    let g = new THREE.BufferGeometry().setFromPoints(pts);
    g.setAttribute("n1", new THREE.Float32BufferAttribute(n1, 3));
    g.setAttribute("n2", new THREE.Float32BufferAttribute(n2, 3));
    g.translate(-0.5, -0.5, -0.5);
    g.scale(w, h, d);
    let m = new THREE.LineDashedMaterial({
        color: color,
        dashSize: 0.3,
        gapSize: 0.14,
        onBeforeCompile: shader => {
            shader.vertexShader = `
            attribute vec3 n1;
            attribute vec3 n2;
            varying float isDashed;
            ${shader.vertexShader}
          `.replace(
            `#include <fog_vertex>`,
            `#include <fog_vertex>
            
              vec3 nor1 = normalize(normalMatrix * n1);
              vec3 nor2 = normalize(normalMatrix * n2);
              vec3 vDir = normalize(mvPosition.xyz);
              //vDir = vec3(0, 0, -1);
              float v1 = step( 0., dot( vDir, nor1 ) );
              float v2 = step( 0., dot( vDir, nor2 ) );
              isDashed = min(v1, v2);
            `
          );
          console.log(shader.vertexShader);
          shader.fragmentShader = `
            varying float isDashed;
            ${shader.fragmentShader}
          `.replace(
            `if ( mod( vLineDistance, totalSize ) > dashSize ) {
            discard;
        }`,
            `
              if ( isDashed > 0.0 ) {
                if ( mod( vLineDistance, totalSize ) > dashSize ) {
                  discard;
                }
              }`
          );
          console.log(shader.fragmentShader)
        }
      });
      let l = new THREE.LineSegments(g, m);
      l.computeLineDistances();
      return l;
    }

function onWindowResize() {
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(innerWidth, innerHeight);
}

问题

如何解决这个错误？

编辑

├── @types/three@0.134.0
├── three@0.135.0
├── ts-loader@9.2.6
├── typescript@4.5.2
├── webpack-cli@4.9.1
├── webpack-dev-server@4.6.0
├── webpack-merge@5.8.0
└── webpack@5.65.0

My repo that might be removed later.

Answer 1

尝试在没有参数 onBeforeCompile 的情况下创建 material

const m = new THREE.LineDashedMaterial({
  ...
  onBeforeCompile: ()=>{} //<-- delete this
})
m.onBeforeCompile = ()=>{} //<-- add this