TypeScript Object3D.add方法代码示例

( { context, require, cache, detached } ) => {
  if ( !cache.object3d ) {
    const THREE = require ( 'THREE' )
    let lights = new THREE.Object3D ()
    cache.object3d = lights
    let l
    // Sky light
    l = new THREE.PointLight ( 0xffffff, 1, 0 )
    l.position.set ( 0, 20, 0 )
    lights.add ( l )
    // Sun light
    l = new THREE.PointLight ( 0xffffff, 1, 0 )
    l.position.set ( 10, 20, 10 )
    lights.add ( l )
    // Back light
    l = new THREE.PointLight ( 0xffffff, 1, 0 )
    l.position.set ( -10, -20, -10 )
    lights.add ( l )
    
    context.object3d.add ( cache.object3d )
  }

  const object3d = cache.object3d
  if ( detached ) {
    if ( object3d.parent ) {
      object3d.parent.remove ( object3d )
    }
  }

  return { object3d }
}

 params.map(({ color, width, offsetX, offsetY }) => {
   const square = new THREE.Object3D();
   square.add(
     squareFactory({
       color,
       width,
       offsetX,
       offsetY,
     })
   );
   square.visible = false;
   squareParticles.add(square);
 });

 params.map(({ color, offsetX, offsetY }, index) => {
   var triangle = new THREE.Object3D();
   triangle.add(
     triangleFactory({
       index,
       color,
       offsetX,
       offsetY,
     })
   );
   triangle.add(blackBarsFactory(offsetX, index));
   triangle.visible = false;
   triangleParticles.add(triangle);
 });

export const circleSpectrumFactory = () => {
  const spectrum = new THREE.Object3D();
  const split = 48;
  const theta = Math.PI / split;
  const ofs = 5;
  const width = 1;

  for (let i = 0; i < split * 2; i++) {
    const rectShape = new THREE.Shape();
    rectShape.moveTo(
      ofs * Math.cos(theta * i) +
        width * 0.5 * Math.cos(theta * i - Math.PI / 2),
      ofs * Math.sin(theta * i) +
        width * 0.5 * Math.sin(theta * i - Math.PI / 2)
    );
    rectShape.lineTo(
      ofs * Math.cos(theta * i) +
        width * 0.5 * Math.cos(theta * i + Math.PI / 2),
      ofs * Math.sin(theta * i) +
        width * 0.5 * Math.sin(theta * i + Math.PI / 2)
    );
    rectShape.lineTo(
      10 * Math.cos(theta * i) +
        width * 0.5 * Math.cos(theta * i + Math.PI / 2),
      10 * Math.sin(theta * i) + width * 0.5 * Math.sin(theta * i + Math.PI / 2)
    );
    rectShape.lineTo(
      10 * Math.cos(theta * i) +
        width * 0.5 * Math.cos(theta * i - Math.PI / 2),
      10 * Math.sin(theta * i) + width * 0.5 * Math.sin(theta * i - Math.PI / 2)
    );

    const geometry = new THREE.ShapeGeometry(rectShape);
    const material = new THREE.MeshBasicMaterial({
      color: colors[2],
      fog: false,
    });
    const line = new THREE.Mesh(geometry, material);
    spectrum.add(line);
  }

  spectrum.position.set(0, 0, 30);
  spectrum.visible = false;

  return spectrum;
};

export const blackBarsFactory = (offsetX: number, index: number) => {
  const geometry = new THREE.PlaneBufferGeometry(1024, 8, 1, 1);
  const material = new THREE.MeshBasicMaterial({
    color: 0x212121,
    fog: false,
    transparent: true,
    opacity: 1,
  });

  const lines = new THREE.Object3D();
  const split = 6;
  for (let i = 0; i < split; i++) {
    const line = new THREE.Mesh(geometry, material);
    line.position.set(i * 50 - 112 + offsetX, 0, -400 + index);
    line.rotateZ(Math.PI / 3);
    lines.add(line);
  }

  return lines;
};

    buildSceneContainer() {
        let container = new three.Object3D()

        let geometry = new three.Geometry()

        let momenttensor = this.polygonizedMomentTensor.momentTensor
        
        // moment tensor representing only double couple
        let sphericalTensor = beachballs.sdr2mt({ strike: momenttensor.strike, dip: momenttensor.dip, rake: momenttensor.slip })
        
        let doubleCouple = {
            Mrr: sphericalTensor.Mrr,
            Mtt: sphericalTensor.Mtt,
            Mpp: sphericalTensor.Mpp,
            Mrt: sphericalTensor.Mrt,
            Mrp: sphericalTensor.Mrp,
            Mtp: sphericalTensor.Mtp,
            strike: momenttensor.strike,
            dip: momenttensor.dip,
            slip: momenttensor.slip
        }

        let polygons = beachballs.lowerHemisphereEqualAreaNet(doubleCouple).map(polygon =>
            ({ vertices: polygon.vertices.map(point => point.map(v => v)), compressional: polygon.compressional }))

        this.fillGeometry(geometry, polygons)

        geometry.computeFaceNormals()
        geometry.computeVertexNormals()

        let mesh = new three.Mesh(geometry, new three.MeshBasicMaterial({
            vertexColors: three.VertexColors,
            side: three.DoubleSide,
            wireframe: false,
            opacity: 1,
            visible: true
        }))
        container.add(mesh)

        return container
    }

    buildSceneContainer() {
        let container = new three.Object3D()

        let geometry = new three.Geometry()

        let originalPolygons = this.polygonizedMomentTensor.polygons.map(polygon => 
            ({vertices: polygon.vertices.map(point => point.map(v => v)), compressional: polygon.compressional}))
                
        let polygons = []
        switch (this.projection) {
            case "equalarea":
            polygons = beachballs.rawLowerHemisphereEqualAreaNet(originalPolygons)
                break;
            case "wulff":
                polygons = beachballs.rawLowerHemisphereWulffNet(originalPolygons)
                break;
            case "orthographic":
                polygons = beachballs.rawLowerHemisphereOrthographic(originalPolygons)
                break;         
            default:
                polygons = []
        }

        this.fillGeometry(geometry, polygons)

        geometry.computeFaceNormals()
        geometry.computeVertexNormals()

        let mesh = new three.Mesh(geometry, new three.MeshBasicMaterial({
            vertexColors: three.VertexColors,
            side: three.DoubleSide,
            wireframe: false,
            opacity: 1,
            visible: true
        }))
        container.add(mesh)

        return container
    }

export const speakerConeFactory = () => {
  const speakerCone = new THREE.Object3D();

  const circleGeometry1 = new THREE.CircleGeometry(8.0, 1024);
  const circleMaterial1 = new THREE.MeshBasicMaterial({
    color: colors[2],
    fog: false,
  });
  speakerCone.add(new THREE.Mesh(circleGeometry1, circleMaterial1));

  const circleGeometry2 = new THREE.CircleGeometry(6.5, 1024);
  const circleMaterial2 = new THREE.MeshBasicMaterial({
    color: 0x000000,
    fog: false,
  });
  speakerCone.add(new THREE.Mesh(circleGeometry2, circleMaterial2));

  const circleGeometry3 = new THREE.CircleGeometry(6.0, 1024);
  const circleMaterial3 = new THREE.MeshBasicMaterial({
    color: colors[2],
  });
  speakerCone.add(new THREE.Mesh(circleGeometry3, circleMaterial3));

  const circleGeometry4 = new THREE.CircleGeometry(5.7, 1024);
  const circleMaterial4 = new THREE.MeshBasicMaterial({
    color: 0x001827,
  });
  speakerCone.add(new THREE.Mesh(circleGeometry4, circleMaterial4));

  const circleGeometry5 = new THREE.CircleGeometry(2.3, 1024);
  const circleMaterial5 = new THREE.MeshBasicMaterial({
    color: colors[2],
  });
  speakerCone.add(new THREE.Mesh(circleGeometry5, circleMaterial5));

  const circleGeometry6 = new THREE.CircleGeometry(2.0, 1024);
  const circleMaterial6 = new THREE.MeshBasicMaterial({
    color: 0x000000,
  });
  speakerCone.add(new THREE.Mesh(circleGeometry6, circleMaterial6));

  speakerCone.visible = false;

  return speakerCone;
};

 params.map(({ color, r, z }) => {
   const circle = new THREE.Object3D();
   circle.add(circleFactory({ color, r, z }));
   circle.visible = false;
   circleParticles.add(circle);
 });