TypeScript THREE.Geometry类代码示例

  _createMesh() {
    let geometry = new THREE.Geometry();

    // Vertical lines
    let x = 0;
    while(x <= this.width ) {
      geometry.vertices.push(new THREE.Vector3(x / this.ratio.x, 0, 0));
      geometry.vertices.push(new THREE.Vector3(x / this.ratio.x, this.direction * this.height / this.ratio.y, 0));
      x += 1;
    }

    // Horizontal lines
    let y = 0;
    while(y <= this.height) {
      geometry.vertices.push(new THREE.Vector3(0, this.direction * y / this.ratio.y, 0));
      geometry.vertices.push(new THREE.Vector3(this.width / this.ratio.x, this.direction * y / this.ratio.y, 0));
      y += 1;
    }

    geometry.computeLineDistances();

    let material = new THREE.LineDashedMaterial({
      color: 0x000000, transparent: true, opacity: 0.4,
      dashSize: 5 / 1000, gapSize: 5 / 1000, scale: 1 / this.orthographicScale
    });

    this.mesh = new THREE.LineSegments(geometry, material);
    this.actor.threeObject.add(this.mesh);
    this.mesh.updateMatrixWorld(false);
  }

    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
    }

    private addBeachball(container) {
        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 = originalPolygons
        let lowerSphere = this.polygonizedMomentTensor.momentTensor.momentTensorView.lowerHemisphere
        let upperSphere = this.polygonizedMomentTensor.momentTensor.momentTensorView.upperHemisphere

        if (lowerSphere && upperSphere) {
            polygons = originalPolygons
        } else if (lowerSphere) {
            polygons = beachballs.rawLowerHemisphere(originalPolygons)
        } else if (upperSphere) {
            polygons = beachballs.rawUpperHemisphere(originalPolygons)
        }

        this.fillGeometry(geometry, polygons)

        geometry.computeFaceNormals()
        geometry.computeVertexNormals()

        let showMesh = this.polygonizedMomentTensor.momentTensor.momentTensorView.showMesh

        var beachballMesh = three.SceneUtils.createMultiMaterialObject(geometry, [
            new three.MeshLambertMaterial({
                vertexColors: three.VertexColors,
                side: three.DoubleSide,
                wireframe: false,
                opacity: 1,
                visible: true
            }),
            new three.MeshBasicMaterial({ color: 0x222222, wireframe: showMesh, visible: showMesh })
        ])

        container.add(beachballMesh)
    }

function initClouds() {

	container = document.getElementById('cd-main-overlay')!;

	// Bg gradient

	const canvas = document.createElement('canvas');
	canvas.width = 32;
	canvas.height = window.innerHeight;

	const context = canvas.getContext('2d')!;

	const gradient = context.createLinearGradient(0, 0, 0, canvas.height);
	gradient.addColorStop(0, '#1e4877');
	gradient.addColorStop(0.5, '#4584b4');

	context.fillStyle = gradient;
	context.fillRect(0, 0, canvas.width, canvas.height);

	container.style.background = `url("${canvas.toDataURL('image/png')}")`;

	//

	camera = new PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);
	camera.position.z = 3000;

	scene = new Scene();

	geometry = new Geometry();

	const texture = new TextureLoader().load('/images/cloud10.png', animateClouds);

	const fog = new Fog(0x4584b4, -100, 3000);

	const vs = document.getElementById('vs');
	const fs = document.getElementById('fs');
	const vertexShader = vs!.textContent!;
	const fragmentShader = fs!.textContent!;

	material = new ShaderMaterial({
		depthTest: false,
		depthWrite: false,
		fragmentShader,
		transparent: true,
		uniforms: {
			fogColor: {
				type: 'c',
				value: fog.color,
			},
			fogFar: {
				type: 'f',
				value: fog.far,
			},
			fogNear: {
				type: 'f',
				value: fog.near,
			},
			map: {
				type: 't',
				value: texture,
			},
		},
		vertexShader,
	});

	const plane = new Mesh(new PlaneGeometry(64, 64));

	for (let i = 0; i < 8000; i++) {

		plane.position.x = Math.random() * 1000 - 500;
		plane.position.y = -Math.random() * Math.random() * 200 - 15;
		plane.position.z = i;
		plane.rotation.z = Math.random() * Math.PI;
		plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

		plane.updateMatrix();
		geometry.merge(plane.geometry as Geometry, plane.matrix);
	}

	mesh = new Mesh(geometry, material);
	scene.add(mesh);

	mesh = new Mesh(geometry, material);
	mesh.position.z = -8000;
	scene.add(mesh);

	renderer = new WebGLRenderer({
		alpha: true,
		antialias: false,
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
	container.append(renderer.domElement);

	document.addEventListener('mousemove', onDocumentMouseMoveClouds, false);
	window.addEventListener('resize', onWindowResizeClouds, false);
}

export default function( value ) {

  const idx = geoPool.indexOf( value );
  if ( idx !== -1 ) {
    // 複数のmeshでthreejs geometryインスタンスを共有したい
    return geoCorePool[ idx ];
  } else {
    geoPool.push( value );
    let geometry;

    if ( value.type === "Buffer" ) {
      geometry = new THREE.BufferGeometry;
    } else if ( value.type === "Custom" ) {
      geometry = new THREE.Geometry;
      value.vertices.forEach( function( vec ) {
        geometry.vertices.push( new THREE.Vector3( vec[ 0 ], vec[ 1 ], vec[ 2 ] ) );
      });

      if ( value.faceVertexUvs ) {
        value.faceVertexUvs.forEach( function( faceVertexUv, i ) {
          geometry.faceVertexUvs[ i ] = geometry.faceVertexUvs[ i ] || [];
          faceVertexUv.forEach( function( uv ) {
            geometry.faceVertexUvs[ i ].push([
              new THREE.Vector2( uv[ 0 ][ 0 ], uv[ 0 ][ 1 ] ),
              new THREE.Vector2( uv[ 1 ][ 0 ], uv[ 1 ][ 1 ] ),
              new THREE.Vector2( uv[ 2 ][ 0 ], uv[ 2 ][ 1 ] ),
            ]);
          });
        });
      }

      if ( value.faces ) {
        value.faces.forEach( function( face ) {
          geometry.faces.push( new THREE.Face3(
            face[ 0 ],
            face[ 1 ],
            face[ 2 ],
            face[ 3 ] && new THREE.Vector3( face[ 3 ][ 0 ], face[ 3 ][ 1 ], face[ 3 ][ 2 ] ),
            face[ 4 ] && new THREE.Color( face[ 4 ] ),
            face[ 5 ]
          ));
        });

        if ( !value.faces[ 0 ][ 3 ] ) {
          geometry.computeFaceNormals();
          geometry.computeVertexNormals();
        }
      }

      geometry.computeBoundingBox();
      geometry.computeBoundingSphere();

    } else {
      geometry = new THREE[ value.type + "Geometry" ](
        value.value[ 0 ],
        value.value[ 1 ],
        value.value[ 2 ],
        value.value[ 3 ],
        value.value[ 4 ],
        value.value[ 5 ],
        value.value[ 6 ],
        value.value[ 7 ] );
    }

    if ( value.attrs ) {
      let tmp = value.attrs;
      let length = tmp.position.length / 3;
      let index = attrsPool.indexOf( tmp );

      if ( index !== -1 ) {
        geometry.attributes = attrsCorePool[ index ];
      } else {

        for ( let key in tmp ) {
          if ( key === "needsUpdate" ) {
            continue;
          }

          if ( key === "index" ) {
            geometry.setIndex( Array.isArray( tmp[ key ] ) ? new THREE.Uint16Attribute( tmp[ key ], 1 )
              : new THREE.BufferAttribute( tmp[ key ], 1 ) );
          } else {
            geometry.addAttribute( key, Array.isArray( tmp[ key ] ) ?
              new THREE.Float32Attribute( tmp[ key ], tmp[ key ].length / length )
                : new THREE.BufferAttribute( tmp[ key ], tmp[ key ].length / length ) );
          }
        }

        attrsPool.push( tmp );
        attrsCorePool.push( geometry.attributes );
        indexAttrsCorePool.push( geometry.getIndex() );

        Object.defineProperty( tmp, "needsUpdate", {
          get: function () {
            return attrsCorePool[ attrsPool.indexOf( this ) ].position.needsUpdate;
          },
          set: function ( bool ) {
            let index = attrsPool.indexOf( this );
            for ( let key in this ) {
              if ( key === "needsUpdate" ) {
//.........这里部分代码省略.........