Matthew Raymer
1 year ago
8 changed files with 276 additions and 4 deletions
@ -0,0 +1,3 @@ |
|||
[submodule "src/types"] |
|||
path = src/types |
|||
url = ssh://git@173.199.124.46:222/trent_larson/endorser-types.git |
|||
@ -0,0 +1,28 @@ |
|||
import { PlaneGeometry, MeshLambertMaterial, Mesh, TextureLoader, Color } from "three"; |
|||
|
|||
class Terrain { |
|||
constructor(props: { width: number; height: number; color: Color }) { |
|||
const loader = new TextureLoader(); |
|||
const heightTexture = loader.load("img/textures/leafy-autumn-forest-floor.jpg"); |
|||
const geometry = new PlaneGeometry(props.width, props.height, 64, 64); |
|||
|
|||
const material = new MeshLambertMaterial({ |
|||
color: props.color, |
|||
flatShading: true, |
|||
map: heightTexture, |
|||
}); |
|||
|
|||
const plane = new Mesh(geometry, material); |
|||
plane.position.set(0, 0, 0); |
|||
plane.rotation.x -= Math.PI * 0.5; |
|||
|
|||
// Storing our original vertices position on a new attribute
|
|||
plane.geometry.attributes.position.originalPosition = plane.geometry.attributes.position.array; |
|||
|
|||
plane.tick = () => {}; |
|||
|
|||
return plane; |
|||
} |
|||
} |
|||
|
|||
export { Terrain }; |
|||
@ -0,0 +1,137 @@ |
|||
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; |
|||
import { SkeletonUtils } from 'three/examples/jsm/utils/SkeletonUtils'; |
|||
import axios from 'axios'; |
|||
import TWEEN from '@tweenjs/tween.js'; |
|||
import * as THREE from 'three' |
|||
|
|||
class LandmarksLoader { |
|||
async load(vue, world, scene, loop, token) { |
|||
vue.setWorldProperty("animationDurationSeconds", ANIMATION_DURATION_SECS); |
|||
|
|||
try { |
|||
const url = apiServer + "/api/v2/report/claims?claimType=GiveAction"; |
|||
const headers = { |
|||
"Content-Type": "application/json", |
|||
Authorization: "Bearer " + token, |
|||
}; |
|||
const resp = await axios.get(url, { headers: headers }); |
|||
if (resp.status === 200) { |
|||
const landmarks = resp.data.data; |
|||
|
|||
const minDate = landmarks[landmarks.length - 1].issuedAt; |
|||
const maxDate = landmarks[0].issuedAt; |
|||
|
|||
world.setExposedWorldProperties("startTime", minDate.replace("T", " ")); |
|||
world.setExposedWorldProperties("endTime", maxDate.replace("T", " ")); |
|||
|
|||
const minTimeMillis = new Date(minDate).getTime(); |
|||
const fullTimeMillis = |
|||
maxDate > minDate ? new Date(maxDate).getTime() - minTimeMillis : 1; // avoid divide by zero
|
|||
// ratio of animation time to real time
|
|||
const fakeRealRatio = (ANIMATION_DURATION_SECS * 1000) / fullTimeMillis; |
|||
|
|||
// load plant model first because it takes a second
|
|||
const loader = new GLTFLoader(); |
|||
// choose the right plant
|
|||
const modelLoc = "/models/lupine_plant/scene.gltf"; // push with pokies
|
|||
const modScale = 0.1; |
|||
//const modelLoc = "/models/round_bush/scene.gltf"; // green & pink
|
|||
// modScale = 1;
|
|||
//const modelLoc = "/models/coreopsis-flower.glb"; // 3 flowers
|
|||
// modScale = 2;
|
|||
//const modelLoc = "/models/a_bush/scene.gltf"; // purple leaves
|
|||
// modScale = 15;
|
|||
|
|||
// calculate positions for each claim, especially because some are random
|
|||
const locations = landmarks.map((claim: GiveServerRecord) => |
|||
locForGive(claim, world.PLATFORM_SIZE, world.PLATFORM_EDGE_FOR_UNKNOWNS) |
|||
); |
|||
|
|||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|||
loader.load( |
|||
modelLoc, |
|||
function (gltf: GLTF) { |
|||
gltf.scene.scale.set(0, 0, 0); |
|||
for (let i = 0; i < landmarks.length; i++) { |
|||
// claim is a GiveServerRecord (see endorserServer.ts)
|
|||
const claim = landmarks[i]; |
|||
const newPlant = SkeletonUtils.clone(gltf.scene); |
|||
|
|||
const loc = locations[i]; |
|||
newPlant.position.set(loc.x, 0, loc.z); |
|||
|
|||
world.scene.add(newPlant); |
|||
const timeDelayMillis = |
|||
fakeRealRatio * |
|||
(new Date(claim.issuedAt).getTime() - minTimeMillis); |
|||
new TWEEN.Tween(newPlant.scale) |
|||
.delay(timeDelayMillis) |
|||
.to({ x: modScale, y: modScale, z: modScale }, 5000) |
|||
.start(); |
|||
world.bushes = [...world.bushes, newPlant]; |
|||
} |
|||
}, |
|||
undefined, |
|||
function (error: ErrorEvent) { |
|||
console.error(error); |
|||
} |
|||
); |
|||
|
|||
// calculate when lights shine on appearing claim area
|
|||
for (let i = 0; i < landmarks.length; i++) { |
|||
// claim is a GiveServerRecord (see endorserServer.ts)
|
|||
const claim = landmarks[i]; |
|||
|
|||
const loc = locations[i]; |
|||
const light = this.createLight(); |
|||
light.position.set(loc.x, 20, loc.z); |
|||
light.target.position.set(loc.x, 0, loc.z); |
|||
loop.updatables.push(light); |
|||
scene.add(light); |
|||
scene.add(light.target); |
|||
|
|||
// now figure out the timing and shine a light
|
|||
const timeDelayMillis = |
|||
fakeRealRatio * (new Date(claim.issuedAt).getTime() - minTimeMillis); |
|||
new TWEEN.Tween(light) |
|||
.delay(timeDelayMillis) |
|||
.to({ intensity: 100 }, 10) |
|||
.chain( |
|||
new TWEEN.Tween(light.position) |
|||
.to({ y: 5 }, 5000) |
|||
.onComplete(() => { |
|||
scene.remove(light); |
|||
light.dispose(); |
|||
}) |
|||
) |
|||
.start(); |
|||
world.lights = [...world.lights, light]; |
|||
} |
|||
} else { |
|||
console.error( |
|||
"Got bad server response status & data of", |
|||
resp.status, |
|||
resp.data |
|||
); |
|||
vue.setAlert( |
|||
"Error With Server", |
|||
"There was an error retrieving your claims from the server." |
|||
); |
|||
} |
|||
} catch (error) { |
|||
console.error("Got exception contacting server:", error); |
|||
vue.setAlert( |
|||
"Error With Server", |
|||
"There was a problem retrieving your claims from the server." |
|||
); |
|||
} |
|||
} |
|||
|
|||
private createLight() { |
|||
const light = new THREE.SpotLight(0xffffff, 0, 0, Math.PI / 8, 0.5, 0); |
|||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|||
light.tick = () => {}; |
|||
return light; |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue