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