|
|
|
@ -1,5 +1,9 @@ |
|
|
|
// from https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80
|
|
|
|
|
|
|
|
import axios from "axios"; |
|
|
|
import { SpotLight, SpotLightHelper } from "three"; |
|
|
|
import * as TWEEN from "@tweenjs/tween.js"; |
|
|
|
|
|
|
|
import { createCamera } from "./components/camera.js"; |
|
|
|
import { createLights } from "./components/lights.js"; |
|
|
|
import { createScene } from "./components/scene.js"; |
|
|
|
@ -8,68 +12,173 @@ import { Loop } from "./systems/Loop.js"; |
|
|
|
import { Resizer } from "./systems/Resizer.js"; |
|
|
|
import { createControls } from "./systems/controls.js"; |
|
|
|
import { createRenderer } from "./systems/renderer.js"; |
|
|
|
import { AppString } from "@/constants/app"; |
|
|
|
|
|
|
|
// These variables are module-scoped: we cannot access them
|
|
|
|
// from outside the module
|
|
|
|
|
|
|
|
const color = "#42b883"; |
|
|
|
const color2 = "#0055aa"; |
|
|
|
|
|
|
|
let camera; |
|
|
|
let renderer; |
|
|
|
let scene; |
|
|
|
let loop; |
|
|
|
const PLATFORM_SIZE = 100; |
|
|
|
const PLATFORM_BORDER = 10; |
|
|
|
const PLATFORM_EDGE_FOR_UNKNOWNS = 10; |
|
|
|
const BASE32 = "0123456789ABCDEFGHJKMNPQRSTVWXYZ"; |
|
|
|
|
|
|
|
class World { |
|
|
|
constructor(container) { |
|
|
|
this.update = this.update.bind(this); |
|
|
|
this.renderLight = this.renderLight.bind(this); |
|
|
|
|
|
|
|
// Instances of camera, scene, and renderer
|
|
|
|
camera = createCamera(); |
|
|
|
scene = createScene(color2); |
|
|
|
renderer = createRenderer(); |
|
|
|
this.camera = createCamera(); |
|
|
|
this.scene = createScene(color2); |
|
|
|
this.renderer = createRenderer(); |
|
|
|
|
|
|
|
this.light = null; |
|
|
|
this.helper = null; |
|
|
|
|
|
|
|
// Initializate Loop
|
|
|
|
loop = new Loop(camera, scene, renderer); |
|
|
|
this.loop = new Loop(this.camera, this.scene, this.renderer); |
|
|
|
|
|
|
|
container.append(renderer.domElement); |
|
|
|
container.append(this.renderer.domElement); |
|
|
|
|
|
|
|
// Orbit Controls
|
|
|
|
const controls = createControls(camera, renderer.domElement); |
|
|
|
const controls = createControls(this.camera, this.renderer.domElement); |
|
|
|
|
|
|
|
// Light Instance, with optional light helper
|
|
|
|
const { light } = createLights(color); |
|
|
|
|
|
|
|
// Terrain Instance
|
|
|
|
const terrain = createTerrain({ color: color }); |
|
|
|
const terrain = createTerrain({ |
|
|
|
color: color, |
|
|
|
height: PLATFORM_SIZE + PLATFORM_BORDER, |
|
|
|
width: PLATFORM_SIZE + PLATFORM_BORDER + PLATFORM_EDGE_FOR_UNKNOWNS, |
|
|
|
}); |
|
|
|
|
|
|
|
this.loop.updatables.push(controls); |
|
|
|
this.loop.updatables.push(light); |
|
|
|
this.loop.updatables.push(terrain); |
|
|
|
|
|
|
|
loop.updatables.push(controls); |
|
|
|
loop.updatables.push(light); |
|
|
|
loop.updatables.push(terrain); |
|
|
|
this.scene.add(light, terrain); |
|
|
|
|
|
|
|
scene.add(light, terrain); |
|
|
|
const cube = createCube(-10, 5, 0, 1, 1, 1); |
|
|
|
this.loop.updatables.push(cube); |
|
|
|
this.scene.add(cube); |
|
|
|
|
|
|
|
const cube = createCube(); |
|
|
|
loop.updatables.push(cube); |
|
|
|
scene.add(cube); |
|
|
|
new TWEEN.Tween(cube.position).to({ x: 10 }, 5000).start(); |
|
|
|
this.loadClaims(); |
|
|
|
|
|
|
|
requestAnimationFrame(this.update); |
|
|
|
requestAnimationFrame(this.renderLight); |
|
|
|
|
|
|
|
// Responsive handler
|
|
|
|
const resizer = new Resizer(container, camera, renderer); |
|
|
|
const resizer = new Resizer(container, this.camera, this.renderer); |
|
|
|
resizer.onResize = () => { |
|
|
|
this.render(); |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
update(time) { |
|
|
|
TWEEN.update(time); |
|
|
|
requestAnimationFrame(this.update); |
|
|
|
} |
|
|
|
|
|
|
|
async loadClaims() { |
|
|
|
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER; |
|
|
|
try { |
|
|
|
const url = endorserApiServer + "/api/v2/report/claims"; |
|
|
|
const headers = { "Content-Type": "application/json" }; |
|
|
|
const resp = await axios.get(url, { headers: headers }); |
|
|
|
if (resp.status === 200) { |
|
|
|
resp.data.data.map((claim) => { |
|
|
|
const randomness = claim.id.substring(10); |
|
|
|
const x = |
|
|
|
(100 * BASE32.indexOf(randomness.substring(0, 1))) / 32 - 50; |
|
|
|
const z = |
|
|
|
(100 * BASE32.indexOf(randomness.substring(8, 9))) / 32 - 50; |
|
|
|
console.log( |
|
|
|
"randomness", |
|
|
|
randomness, |
|
|
|
randomness.substring(0, 1), |
|
|
|
BASE32.indexOf(randomness.substring(0, 1)), |
|
|
|
x, |
|
|
|
randomness.substring(8, 9), |
|
|
|
BASE32.indexOf(randomness.substring(8, 9)), |
|
|
|
z |
|
|
|
); |
|
|
|
|
|
|
|
this.light = new SpotLight(0xffffff, 100, 0, Math.PI / 32, 0.5, 0); |
|
|
|
this.light.position.set(x, 20, z); |
|
|
|
this.light.target.position.set(x, 0, z); |
|
|
|
this.scene.add(this.light); |
|
|
|
|
|
|
|
this.helper = new SpotLightHelper(this.light); |
|
|
|
this.scene.add(this.helper); |
|
|
|
}); |
|
|
|
console.log("done adding cube"); |
|
|
|
} else { |
|
|
|
console.log( |
|
|
|
"Got bad response status & data of", |
|
|
|
resp.status, |
|
|
|
resp.data |
|
|
|
); |
|
|
|
// this.alertTitle = "Error With Server";
|
|
|
|
// this.alertMessage =
|
|
|
|
// "Got an error retrieving your given time from the server.";
|
|
|
|
// this.isAlertVisible = true;
|
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.log("Got error of", error); |
|
|
|
// this.alertTitle = "Error With Server";
|
|
|
|
// this.alertMessage =
|
|
|
|
// "Got an error retrieving your given time from the server.";
|
|
|
|
// this.isAlertVisible = true;
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
renderLight(time) { |
|
|
|
time *= 0.001; // convert time to seconds
|
|
|
|
|
|
|
|
if (!this.light && Math.round(time) % 2 === 0) { |
|
|
|
//const xPos = Math.random() * 100;
|
|
|
|
//const yPos = Math.random() * 100;
|
|
|
|
this.light = new SpotLight(0xffffff, 100, 0, Math.PI / 32, 0.5, 0); |
|
|
|
this.light.position.set(0, 20, 0); |
|
|
|
this.light.target.position.set(-5, 0, 0); |
|
|
|
this.scene.add(this.light); |
|
|
|
//this.scene.add(this.light.target);
|
|
|
|
|
|
|
|
this.helper = new SpotLightHelper(this.light); |
|
|
|
this.scene.add(this.helper); |
|
|
|
|
|
|
|
console.log("added light"); |
|
|
|
} else if (Math.round(time) % 2 != 0 && this.light) { |
|
|
|
this.scene.remove(this.light); |
|
|
|
this.light.dispose(); |
|
|
|
this.light = null; |
|
|
|
this.scene.remove(this.helper); |
|
|
|
this.helper.dispose(); |
|
|
|
this.helper = null; |
|
|
|
console.log("disposed light"); |
|
|
|
} |
|
|
|
|
|
|
|
this.renderer.render(this.scene, this.camera); |
|
|
|
|
|
|
|
requestAnimationFrame(this.renderLight); |
|
|
|
} |
|
|
|
|
|
|
|
render() { |
|
|
|
// draw a single frame
|
|
|
|
renderer.render(scene, camera); |
|
|
|
this.renderer.render(this.scene, this.camera); |
|
|
|
} |
|
|
|
|
|
|
|
// Animation handlers
|
|
|
|
start() { |
|
|
|
loop.start(); |
|
|
|
this.loop.start(); |
|
|
|
} |
|
|
|
|
|
|
|
stop() { |
|
|
|
loop.stop(); |
|
|
|
this.loop.stop(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
