TypeScript THREE.Mesh类代码示例

    private _setupLevel () {
        //todo: load from levelfile
        
        var cubeGeo = new THREE.CubeGeometry(10, 10, 10);

        var geo = new THREE.Geometry();
        var mesh = new THREE.Mesh(cubeGeo);

        var wall = this.getPhysics().world.CreateBody(this.getPhysics().defaultWallDefinition);
        wall.SetUserData({type: 'wall'});
        
        var isBoxToCreate = false;
        for (var x = 0; x < 100; x++ ) {
            for (var y = 0; y < 100; y++) {
                
                if (x== 0 || x == 99 || y == 0 || y == 99) {
                    isBoxToCreate = true;
                } else {
                    isBoxToCreate = Math.random() * 10 < 1;
                }
                
                if ((x > 45 && x < 55 ) && (y > 45 && y < 55)) {
                    isBoxToCreate = false;
                }
                
                if (isBoxToCreate) {
                    var posx = (x - 50) * 10;
                    var posy = (y - 50) * 10;
                    mesh.position.x = posx;
                    mesh.position.y = posy;
                    
                    
                    THREE.GeometryUtils.merge(geo, mesh);
                    
                    this.getPhysics().defaultWallFixture.shape.SetAsOrientedBox(5 / this._physScale, 5 / this._physScale, new Box2D.b2Vec2(posx / this._physScale, posy / this._physScale), 0);
                    wall.CreateFixture(this.getPhysics().defaultWallFixture);
                    
                    
                }
            }
        }
        
        var group = new THREE.Mesh(geo, new THREE.MeshLambertMaterial({color: 0xffff00}));
        group.matrixAutoUpdate = false;
        group.updateMatrix();
        
        this.getScene().add(group);
    }

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;
};

    private generateFaultPlane(orientation, size, color, opacity) {
        let circleRadius = size
        let circleShape = new three.Shape()
        circleShape.moveTo(0, circleRadius)
        circleShape.quadraticCurveTo(circleRadius, circleRadius, circleRadius, 0)
        circleShape.quadraticCurveTo(circleRadius, -circleRadius, 0, -circleRadius)
        circleShape.quadraticCurveTo(-circleRadius, -circleRadius, -circleRadius, 0)
        circleShape.quadraticCurveTo(-circleRadius, circleRadius, 0, circleRadius)

        let geometry = new three.ShapeGeometry(circleShape)
        let material = new three.MeshLambertMaterial({
            color: color,
            vertexColors: three.VertexColors,
            side: three.DoubleSide,
            transparent: true,
            opacity: opacity
        })

        let plane = new three.Mesh(geometry, material)
        plane.lookAt(new three.Vector3(orientation[0], orientation[1], orientation[2]))
        return plane
    }

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

const spotLight2 = new THREE.PointLight(0xffffff, 0.5);
spotLight2.position.x = -4;
spotLight2.position.y = 6;
spotLight2.position.z = -2;
root.add(spotLight2);

const spotLight3 = new THREE.PointLight(0xffffff, 0.2);
spotLight3.castShadow = true;
spotLight3.shadow.mapSize.set(1024, 1024);
spotLight3.position.x = 0;
spotLight3.position.y = 6;
spotLight3.position.z = 2;
root.add(spotLight3);

const floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(shared.court.width + shared.court.border * 2, shared.court.depth + shared.court.border * 2), floorMaterial);
floor.receiveShadow = true;
floor.rotateX(-Math.PI / 2);
root.add(floor);

const largerWallGeometry = new THREE.PlaneBufferGeometry(shared.court.width + shared.court.border * 2, 5);
const smallerWallGeometry = new THREE.PlaneBufferGeometry(shared.court.depth + shared.court.border * 2, 5);

const backWall = new THREE.Mesh(largerWallGeometry, wallMaterial);
(backWall.geometry as THREE.BufferGeometry).getAttribute("uv").setX(1, 2.8);
(backWall.geometry as THREE.BufferGeometry).getAttribute("uv").setX(3, 2.8);
backWall.receiveShadow = true;
backWall.position.y = 2.5;
backWall.position.z = -5;
root.add(backWall);

export function makeModel(avatar: Game.AvatarPub, name: string, isMe: boolean): Model {
  const root = new THREE.Group();
  root.position.x = avatar.x;
  root.position.z = avatar.z;

  const nametagCanvas = document.createElement("canvas");
  nametagCanvas.width = 256;
  nametagCanvas.height = 64;
  const nametagCtx = nametagCanvas.getContext("2d");

  const nametagTexture = new THREE.Texture(nametagCanvas, null, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.LinearFilter);
  const nametag = new THREE.Mesh(nametagGeometry, new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.5, map: nametagTexture }));
  nametag.position.y = 1.8;
  root.add(nametag);

  const body = new THREE.Mesh(bodyGeometry, teamMaterials[avatar.teamIndex]);
  body.rotateY(avatar.angleY);
  body.castShadow = true;
  body.receiveShadow = true;
  body.position.y = 0.7;
  root.add(body);

  const head = new THREE.Mesh(headGeometry, headMaterial);
  head.castShadow = true;
  head.receiveShadow = true;
  head.position.y = 0.5;
  body.add(head);

  const shoulders = new THREE.Group();
  // NOTE: Global Y must match up with shared.shoulderHeight
  shoulders.position.y = 0.2;
  shoulders.rotateX(avatar.angleX);
  body.add(shoulders);

  // NOTE: Arm length must match up with shared.armLength
  const leftArm = new THREE.Mesh(armGeometry, skinMaterial);
  leftArm.castShadow = true;
  leftArm.receiveShadow = true;
  leftArm.position.z = 0.3;
  shoulders.add(leftArm);

  const rightArm = new THREE.Mesh(armGeometry, skinMaterial);
  rightArm.castShadow = true;
  rightArm.receiveShadow = true;
  rightArm.position.z = -0.3;
  shoulders.add(rightArm);

  const pelvis = new THREE.Group();
  pelvis.position.y = -0.1;
  body.add(pelvis);

  const leftLeg = new THREE.Mesh(legGeometry, skinMaterial);
  leftLeg.castShadow = true;
  leftLeg.receiveShadow = true;
  leftLeg.position.z = 0.1;
  pelvis.add(leftLeg);

  const rightLeg = new THREE.Mesh(legGeometry, skinMaterial);
  rightLeg.castShadow = true;
  rightLeg.receiveShadow = true;
  rightLeg.position.z = -0.1;
  pelvis.add(rightLeg);

  const model = { root, nametag, nametagCtx, body, head, shoulders, leftArm, rightArm, leftLeg, rightLeg };
  updateNametag(model, name, isMe);

  return model;
}

import * as THREE from "three";
import * as shared from "../../shared";
import loadTexture from "./loadTexture";

const markerTexture = loadTexture("textures/ball-marker.png", false);

const markerMaterial = new (THREE as any).MeshStandardMaterial({ color: 0xffffff, roughness: 0.8, metalness: 0.3, map: markerTexture, transparent: true });

const marker = new THREE.Mesh(new THREE.PlaneGeometry(shared.ballPhysics.radius * 2, shared.ballPhysics.radius * 2), markerMaterial);
marker.setRotationFromEuler(new THREE.Euler(-Math.PI / 2, 0, 0));
marker.castShadow = true;
marker.receiveShadow = true;
marker.position.y = 1;

export default marker;

function init() : void {
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 )
  scene.add(camera)
  const crosshair = new THREE.Mesh(
    new THREE.RingGeometry( 0.02, 0.04, 32 ),
    new THREE.MeshBasicMaterial( {
      color: 0xffffff,
      opacity: 0.5,
      transparent: true
    } )
  )
  crosshair.position.z = - 2
  camera.add(crosshair)
  room = new THREE.Mesh(
    new THREE.BoxGeometry(6, 6, 6, 10, 10, 10),
    new THREE.MeshBasicMaterial({ color: 0x202020, wireframe: true })
  )

  scene.add(room)
  scene.add(new THREE.HemisphereLight(0x404020, 0x202040, 0.5))

  const light = new THREE.DirectionalLight(0xffffff)
  light.position.set(1, 1, 1).normalize()
  scene.add(light)

  const geometry = new THREE.BoxGeometry( 0.15, 0.15, 0.15 )
  for(let i = 0; i < 200; i++) {
    const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) )
    object.position.x = Math.random() * 4 - 2
    object.position.y = Math.random() * 4 - 2
    object.position.z = Math.random() * 4 - 2
    object.rotation.x = Math.random() * 2 * Math.PI
    object.rotation.y = Math.random() * 2 * Math.PI
    object.rotation.z = Math.random() * 2 * Math.PI
    object.scale.x = Math.random() + 0.5
    object.scale.y = Math.random() + 0.5
    object.scale.z = Math.random() + 0.5
    object.userData.velocity = new THREE.Vector3()
    object.userData.velocity.x = Math.random() * 0.01 - 0.005
    object.userData.velocity.y = Math.random() * 0.01 - 0.005
    object.userData.velocity.z = Math.random() * 0.01 - 0.005
    room.add( object )
  }
  raycaster = new THREE.Raycaster()


  // renderer = new THREE.WebGLRenderer({ antialias: true })
  // renderer.setClearColor(0x101010)
  // renderer.setPixelRatio(window.devicePixelRatio)
  // renderer.setSize(window.innerWidth, window.innerHeight)
  // renderer.sortObjects = false

  renderer2 = new CSS3DRenderer()
  renderer2.setSize(window.innerWidth, window.innerHeight)
  renderer2.domElement.style.position = 'absolute'
  renderer2.domElement.style.top = '0'

  const container = document.createElement('div')
  document.body.appendChild(container)
  // container.appendChild(renderer.domElement)
  container.appendChild(renderer2.domElement)

  controls = new VRControls(camera, e => console.error(e))
  // effect = new VREffect(renderer, (err : string) => console.error('VREffect: ' + err) )
  effect2 = new CSS3DVREffect(renderer2, (err : string) => console.error('CSS3DVREffect: ' + err))


  // CSS Object
  const element = document.createElement('div')
  element.innerHTML = 'Plain text inside a div.'
  element.className = 'three-div'
  
  const div = new CSSObject3D(element)
  div.position.x = 0
  div.position.y = 0
  div.position.z = -185
  div.rotation.y = 0
  // div.rotation.y = Math.PI
  scene.add(div)

  if(WebVR.isAvailable()) {
    // document.body.appendChild(WebVR.getButton(effect))
    document.body.appendChild(WebVR.getButton(effect2))
  }
  // renderer.domElement.addEventListener('mousedown', onMouseDown, false)
  // renderer.domElement.addEventListener('mouseup', onMouseUp, false)
  // renderer.domElement.addEventListener('touchstart', onMouseDown, false)
  // renderer.domElement.addEventListener('touchend', onMouseUp, false)

  renderer2.domElement.addEventListener('mousedown', onMouseDown, false)
  renderer2.domElement.addEventListener('mouseup', onMouseUp, false)
  renderer2.domElement.addEventListener('touchstart', onMouseDown, false)
  renderer2.domElement.addEventListener('touchend', onMouseUp, false)

  window.addEventListener('resize', onWindowResize, false)
}