24 changed files with 1076 additions and 3 deletions
|
After Width: | Height: | Size: 4.5 MiB |
@ -0,0 +1,11 @@ |
|||||
|
Model Information: |
||||
|
* title: Lupine Plant |
||||
|
* source: https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439 |
||||
|
* author: rufusrockwell (https://sketchfab.com/rufusrockwell) |
||||
|
|
||||
|
Model License: |
||||
|
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) |
||||
|
* requirements: Author must be credited. Commercial use is allowed. |
||||
|
|
||||
|
If you use this 3D model in your project be sure to copy paste this credit wherever you share it: |
||||
|
This work is based on "Lupine Plant" (https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439) by rufusrockwell (https://sketchfab.com/rufusrockwell) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) |
||||
Binary file not shown.
@ -0,0 +1,229 @@ |
|||||
|
{ |
||||
|
"accessors": [ |
||||
|
{ |
||||
|
"bufferView": 2, |
||||
|
"componentType": 5126, |
||||
|
"count": 2759, |
||||
|
"max": [ |
||||
|
41.3074951171875, |
||||
|
40.37548828125, |
||||
|
87.85917663574219 |
||||
|
], |
||||
|
"min": [ |
||||
|
-35.245540618896484, |
||||
|
-36.895416259765625, |
||||
|
-0.9094290137290955 |
||||
|
], |
||||
|
"type": "VEC3" |
||||
|
}, |
||||
|
{ |
||||
|
"bufferView": 2, |
||||
|
"byteOffset": 33108, |
||||
|
"componentType": 5126, |
||||
|
"count": 2759, |
||||
|
"max": [ |
||||
|
0.9999382495880127, |
||||
|
0.9986748695373535, |
||||
|
0.9985831379890442 |
||||
|
], |
||||
|
"min": [ |
||||
|
-0.9998949766159058, |
||||
|
-0.9975876212120056, |
||||
|
-0.411094069480896 |
||||
|
], |
||||
|
"type": "VEC3" |
||||
|
}, |
||||
|
{ |
||||
|
"bufferView": 3, |
||||
|
"componentType": 5126, |
||||
|
"count": 2759, |
||||
|
"max": [ |
||||
|
0.9987699389457703, |
||||
|
0.9998998045921326, |
||||
|
0.9577858448028564, |
||||
|
1.0 |
||||
|
], |
||||
|
"min": [ |
||||
|
-0.9987726807594299, |
||||
|
-0.9990445971488953, |
||||
|
-0.999801516532898, |
||||
|
1.0 |
||||
|
], |
||||
|
"type": "VEC4" |
||||
|
}, |
||||
|
{ |
||||
|
"bufferView": 1, |
||||
|
"componentType": 5126, |
||||
|
"count": 2759, |
||||
|
"max": [ |
||||
|
1.0061479806900024, |
||||
|
0.9993550181388855 |
||||
|
], |
||||
|
"min": [ |
||||
|
0.00279300007969141, |
||||
|
0.0011620000004768372 |
||||
|
], |
||||
|
"type": "VEC2" |
||||
|
}, |
||||
|
{ |
||||
|
"bufferView": 0, |
||||
|
"componentType": 5125, |
||||
|
"count": 6378, |
||||
|
"type": "SCALAR" |
||||
|
} |
||||
|
], |
||||
|
"asset": { |
||||
|
"extras": { |
||||
|
"author": "rufusrockwell (https://sketchfab.com/rufusrockwell)", |
||||
|
"license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)", |
||||
|
"source": "https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439", |
||||
|
"title": "Lupine Plant" |
||||
|
}, |
||||
|
"generator": "Sketchfab-12.68.0", |
||||
|
"version": "2.0" |
||||
|
}, |
||||
|
"bufferViews": [ |
||||
|
{ |
||||
|
"buffer": 0, |
||||
|
"byteLength": 25512, |
||||
|
"name": "floatBufferViews", |
||||
|
"target": 34963 |
||||
|
}, |
||||
|
{ |
||||
|
"buffer": 0, |
||||
|
"byteLength": 22072, |
||||
|
"byteOffset": 25512, |
||||
|
"byteStride": 8, |
||||
|
"name": "floatBufferViews", |
||||
|
"target": 34962 |
||||
|
}, |
||||
|
{ |
||||
|
"buffer": 0, |
||||
|
"byteLength": 66216, |
||||
|
"byteOffset": 47584, |
||||
|
"byteStride": 12, |
||||
|
"name": "floatBufferViews", |
||||
|
"target": 34962 |
||||
|
}, |
||||
|
{ |
||||
|
"buffer": 0, |
||||
|
"byteLength": 44144, |
||||
|
"byteOffset": 113800, |
||||
|
"byteStride": 16, |
||||
|
"name": "floatBufferViews", |
||||
|
"target": 34962 |
||||
|
} |
||||
|
], |
||||
|
"buffers": [ |
||||
|
{ |
||||
|
"byteLength": 157944, |
||||
|
"uri": "scene.bin" |
||||
|
} |
||||
|
], |
||||
|
"images": [ |
||||
|
{ |
||||
|
"uri": "textures/lambert2SG_baseColor.png" |
||||
|
}, |
||||
|
{ |
||||
|
"uri": "textures/lambert2SG_normal.png" |
||||
|
} |
||||
|
], |
||||
|
"materials": [ |
||||
|
{ |
||||
|
"alphaCutoff": 0.2, |
||||
|
"alphaMode": "MASK", |
||||
|
"doubleSided": true, |
||||
|
"name": "lambert2SG", |
||||
|
"normalTexture": { |
||||
|
"index": 1 |
||||
|
}, |
||||
|
"pbrMetallicRoughness": { |
||||
|
"baseColorTexture": { |
||||
|
"index": 0 |
||||
|
}, |
||||
|
"metallicFactor": 0.0 |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
"meshes": [ |
||||
|
{ |
||||
|
"name": "Object_0", |
||||
|
"primitives": [ |
||||
|
{ |
||||
|
"attributes": { |
||||
|
"NORMAL": 1, |
||||
|
"POSITION": 0, |
||||
|
"TANGENT": 2, |
||||
|
"TEXCOORD_0": 3 |
||||
|
}, |
||||
|
"indices": 4, |
||||
|
"material": 0, |
||||
|
"mode": 4 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
], |
||||
|
"nodes": [ |
||||
|
{ |
||||
|
"children": [ |
||||
|
1 |
||||
|
], |
||||
|
"matrix": [ |
||||
|
1.0, |
||||
|
0.0, |
||||
|
0.0, |
||||
|
0.0, |
||||
|
0.0, |
||||
|
2.220446049250313e-16, |
||||
|
-1.0, |
||||
|
0.0, |
||||
|
0.0, |
||||
|
1.0, |
||||
|
2.220446049250313e-16, |
||||
|
0.0, |
||||
|
0.0, |
||||
|
0.0, |
||||
|
0.0, |
||||
|
1.0 |
||||
|
], |
||||
|
"name": "Sketchfab_model" |
||||
|
}, |
||||
|
{ |
||||
|
"children": [ |
||||
|
2 |
||||
|
], |
||||
|
"name": "LupineSF.obj.cleaner.materialmerger.gles" |
||||
|
}, |
||||
|
{ |
||||
|
"mesh": 0, |
||||
|
"name": "Object_2" |
||||
|
} |
||||
|
], |
||||
|
"samplers": [ |
||||
|
{ |
||||
|
"magFilter": 9729, |
||||
|
"minFilter": 9987, |
||||
|
"wrapS": 10497, |
||||
|
"wrapT": 10497 |
||||
|
} |
||||
|
], |
||||
|
"scene": 0, |
||||
|
"scenes": [ |
||||
|
{ |
||||
|
"name": "Sketchfab_Scene", |
||||
|
"nodes": [ |
||||
|
0 |
||||
|
] |
||||
|
} |
||||
|
], |
||||
|
"textures": [ |
||||
|
{ |
||||
|
"sampler": 0, |
||||
|
"source": 0 |
||||
|
}, |
||||
|
{ |
||||
|
"sampler": 0, |
||||
|
"source": 1 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
After Width: | Height: | Size: 3.6 MiB |
|
After Width: | Height: | Size: 4.7 MiB |
@ -0,0 +1,104 @@ |
|||||
|
// from https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80
|
||||
|
|
||||
|
import * as TWEEN from "@tweenjs/tween.js"; |
||||
|
import * as THREE from "three"; |
||||
|
|
||||
|
import { createCamera } from "./components/camera.js"; |
||||
|
import { createLights } from "./components/lights.js"; |
||||
|
import { createScene } from "./components/scene.js"; |
||||
|
import { loadLandmarks } from "./components/objects/landmarks.js"; |
||||
|
import { createTerrain } from "./components/objects/terrain.js"; |
||||
|
import { Loop } from "./systems/Loop.js"; |
||||
|
import { Resizer } from "./systems/Resizer.js"; |
||||
|
import { createControls } from "./systems/controls.js"; |
||||
|
import { createRenderer } from "./systems/renderer.js"; |
||||
|
|
||||
|
const COLOR1 = "#dddddd"; |
||||
|
const COLOR2 = "#0055aa"; |
||||
|
|
||||
|
class World { |
||||
|
constructor(container, vue) { |
||||
|
this.PLATFORM_BORDER = 5; |
||||
|
this.PLATFORM_EDGE_FOR_UNKNOWNS = 10; |
||||
|
this.PLATFORM_SIZE = 100; // note that the loadLandmarks calculations may still assume 100
|
||||
|
|
||||
|
this.update = this.update.bind(this); |
||||
|
|
||||
|
// Instances of camera, scene, and renderer
|
||||
|
this.camera = createCamera(); |
||||
|
this.scene = createScene(COLOR2); |
||||
|
this.renderer = createRenderer(); |
||||
|
|
||||
|
// necessary for models, says https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader
|
||||
|
this.renderer.outputColorSpace = THREE.SRGBColorSpace; |
||||
|
|
||||
|
this.light = null; |
||||
|
this.lights = []; |
||||
|
this.bushes = []; |
||||
|
|
||||
|
// Initialize Loop
|
||||
|
this.loop = new Loop(this.camera, this.scene, this.renderer); |
||||
|
|
||||
|
container.append(this.renderer.domElement); |
||||
|
|
||||
|
// Orbit Controls
|
||||
|
const controls = createControls(this.camera, this.renderer.domElement); |
||||
|
|
||||
|
// Light Instance, with optional light helper
|
||||
|
const { light } = createLights(COLOR1); |
||||
|
|
||||
|
// Terrain Instance
|
||||
|
const terrain = createTerrain({ |
||||
|
color: COLOR1, |
||||
|
height: this.PLATFORM_SIZE + this.PLATFORM_BORDER * 2, |
||||
|
width: |
||||
|
this.PLATFORM_SIZE + |
||||
|
this.PLATFORM_BORDER * 2 + |
||||
|
this.PLATFORM_EDGE_FOR_UNKNOWNS * 2, |
||||
|
}); |
||||
|
|
||||
|
this.loop.updatables.push(controls); |
||||
|
this.loop.updatables.push(light); |
||||
|
this.loop.updatables.push(terrain); |
||||
|
|
||||
|
this.scene.add(light, terrain); |
||||
|
|
||||
|
loadLandmarks(vue, this, this.scene, this.loop); |
||||
|
|
||||
|
requestAnimationFrame(this.update); |
||||
|
|
||||
|
// Responsive handler
|
||||
|
const resizer = new Resizer(container, this.camera, this.renderer); |
||||
|
resizer.onResize = () => { |
||||
|
this.render(); |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
update(time) { |
||||
|
TWEEN.update(time); |
||||
|
this.lights.forEach((light) => { |
||||
|
light.updateMatrixWorld(); |
||||
|
light.target.updateMatrixWorld(); |
||||
|
}); |
||||
|
this.lights.forEach((bush) => { |
||||
|
bush.updateMatrixWorld(); |
||||
|
}); |
||||
|
requestAnimationFrame(this.update); |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
// draw a single frame
|
||||
|
this.renderer.render(this.scene, this.camera); |
||||
|
} |
||||
|
|
||||
|
// Animation handlers
|
||||
|
start() { |
||||
|
this.loop.start(); |
||||
|
} |
||||
|
|
||||
|
stop() { |
||||
|
this.loop.stop(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export { World }; |
||||
@ -0,0 +1,19 @@ |
|||||
|
import { PerspectiveCamera } from "three"; |
||||
|
|
||||
|
function createCamera() { |
||||
|
const camera = new PerspectiveCamera( |
||||
|
35, // fov = Field Of View
|
||||
|
1, // aspect ratio (dummy value)
|
||||
|
0.1, // near clipping plane
|
||||
|
350 // far clipping plane
|
||||
|
); |
||||
|
|
||||
|
// move the camera back so we can view the scene
|
||||
|
camera.position.set(0, 100, 200); |
||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
|
camera.tick = () => {}; |
||||
|
|
||||
|
return camera; |
||||
|
} |
||||
|
|
||||
|
export { createCamera }; |
||||
@ -0,0 +1,14 @@ |
|||||
|
import { DirectionalLight, DirectionalLightHelper } from "three"; |
||||
|
|
||||
|
function createLights(color) { |
||||
|
const light = new DirectionalLight(color, 4); |
||||
|
const lightHelper = new DirectionalLightHelper(light, 0); |
||||
|
light.position.set(60, 100, 30); |
||||
|
|
||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
|
light.tick = () => {}; |
||||
|
|
||||
|
return { light, lightHelper }; |
||||
|
} |
||||
|
|
||||
|
export { createLights }; |
||||
@ -0,0 +1,225 @@ |
|||||
|
import axios from "axios"; |
||||
|
import * as R from "ramda"; |
||||
|
import * as THREE from "three"; |
||||
|
import { GLTFLoader } from "three/addons/loaders/GLTFLoader"; |
||||
|
import * as SkeletonUtils from "three/addons/utils/SkeletonUtils"; |
||||
|
import * as TWEEN from "@tweenjs/tween.js"; |
||||
|
import { AppString } from "@/constants/app"; |
||||
|
import { accountsDB, db } from "@/db"; |
||||
|
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; |
||||
|
import { accessToken } from "@/libs/crypto"; |
||||
|
|
||||
|
const ANIMATION_DURATION_SECS = 10; |
||||
|
const BASE32 = "0123456789ABCDEFGHJKMNPQRSTVWXYZ"; |
||||
|
const ENDORSER_ENTITY_PREFIX = "https://endorser.ch/entity/"; |
||||
|
|
||||
|
export async function loadLandmarks(vue, world, scene, loop) { |
||||
|
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER; |
||||
|
try { |
||||
|
await db.open(); |
||||
|
const settings = await db.settings.get(MASTER_SETTINGS_KEY); |
||||
|
const activeDid = settings?.activeDid || ""; |
||||
|
await accountsDB.open(); |
||||
|
const accounts = await accountsDB.accounts.toArray(); |
||||
|
const account = R.find((acc) => acc.did === activeDid, accounts); |
||||
|
const identity = JSON.parse(account?.identity || "undefined"); |
||||
|
const token = await accessToken(identity); |
||||
|
|
||||
|
const url = |
||||
|
endorserApiServer + "/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 minDate = resp.data.data[resp.data.data.length - 1].issuedAt; |
||||
|
const maxDate = resp.data.data[0].issuedAt; |
||||
|
const minTimeMillis = new Date(minDate).getTime(); |
||||
|
const fullTimeMillis = new Date(maxDate).getTime() - minTimeMillis; |
||||
|
// 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
|
||||
|
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 = resp.data.data.map((claim) => |
||||
|
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.scene.scale.set(0, 0, 0); |
||||
|
for (let i = 0; i < resp.data.data.length; i++) { |
||||
|
// claim is a GiveServerRecord (see endorserServer.ts)
|
||||
|
const claim = resp.data.data[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) { |
||||
|
console.error(error); |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
// calculate when lights shine on appearing claim area
|
||||
|
for (let i = 0; i < resp.data.data.length; i++) { |
||||
|
// claim is a GiveServerRecord (see endorserServer.ts)
|
||||
|
const claim = resp.data.data[i]; |
||||
|
|
||||
|
const loc = locations[i]; |
||||
|
const light = 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.log( |
||||
|
"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.log("Got exception contacting server:", error); |
||||
|
vue.setAlert( |
||||
|
"Error With Server", |
||||
|
"There was a problem retrieving your claims from the server." |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param giveClaim |
||||
|
* @returns {x:float, z:float} where -50 <= x & z < 50 |
||||
|
*/ |
||||
|
function locForGive(giveClaim, platformWidth, borderWidth) { |
||||
|
let loc; |
||||
|
if (giveClaim?.claim?.recipient?.identifier) { |
||||
|
// this is directly to a person
|
||||
|
loc = locForEthrDid(giveClaim.claim.recipient.identifier); |
||||
|
loc = { x: loc.x - platformWidth / 2, z: loc.z - platformWidth / 2 }; |
||||
|
} else if (giveClaim?.object?.isPartOf?.identifier) { |
||||
|
// this is probably to a project
|
||||
|
const objId = giveClaim.object.isPartOf.identifier; |
||||
|
if (objId.startsWith(ENDORSER_ENTITY_PREFIX)) { |
||||
|
loc = locForUlid(objId.substring(ENDORSER_ENTITY_PREFIX.length)); |
||||
|
loc = { x: loc.x - platformWidth / 2, z: loc.z - platformWidth / 2 }; |
||||
|
} |
||||
|
} |
||||
|
if (!loc) { |
||||
|
// it must be outside our known addresses so let's put it somewhere random
|
||||
|
const leftSide = Math.random() < 0.5; |
||||
|
loc = { |
||||
|
x: leftSide |
||||
|
? -platformWidth / 2 - borderWidth / 2 |
||||
|
: platformWidth / 2 + borderWidth / 2, |
||||
|
z: Math.random() * platformWidth - platformWidth / 2, |
||||
|
}; |
||||
|
} |
||||
|
return loc; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Generate a deterministic x & z location based on the randomness in a ULID. |
||||
|
* |
||||
|
* We'll use the first 20 bits for the x coordinate and next 20 for the z. |
||||
|
* That's a bit over a trillion locations... should be enough for pretty |
||||
|
* unique locations for this fun kind of application within a network |
||||
|
* -- though they're not guaranteed unique without the full ID. |
||||
|
* (We're leaving 40 bits for other properties.) |
||||
|
* |
||||
|
* @param ulid |
||||
|
* @returns {x: float, z: float} where 0 <= x & z < 100 |
||||
|
*/ |
||||
|
function locForUlid(ulid) { |
||||
|
// The random parts of a ULID come after the first 10 characters.
|
||||
|
const randomness = ulid.substring(10); |
||||
|
|
||||
|
// That leaves 16 characters of randomness, or 80 bits.
|
||||
|
|
||||
|
// We're currently only using 32 possible x and z values
|
||||
|
// because the display is pretty low-fidelity at this point.
|
||||
|
|
||||
|
// Similar code is below.
|
||||
|
const x = (100 * BASE32.indexOf(randomness.substring(0, 1))) / 32; |
||||
|
const z = (100 * BASE32.indexOf(randomness.substring(4, 5))) / 32; |
||||
|
return { x, z }; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* See locForUlid |
||||
|
* @param did |
||||
|
* @returns {x: float, z: float} where 0 <= x & z < 100 |
||||
|
*/ |
||||
|
function locForEthrDid(did) { |
||||
|
// "did:ethr:0x..."
|
||||
|
if (did.length < 51) { |
||||
|
return { x: 0, z: 0 }; |
||||
|
} else { |
||||
|
const randomness = did.substring(11); |
||||
|
// We'll take the first 4 bits for 16 possible x & z values.
|
||||
|
const xOff = parseInt(Number("0x" + randomness.substring(0, 1)), 10); |
||||
|
const x = (xOff * 100) / 16; |
||||
|
// ... and since we're reserving 20 bits total for x, start with character 5.
|
||||
|
const zOff = parseInt(Number("0x" + randomness.substring(5, 6)), 10); |
||||
|
const z = (zOff * 100) / 16; |
||||
|
return { x, z }; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function 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; |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
import { PlaneGeometry, MeshLambertMaterial, Mesh, TextureLoader } from "three"; |
||||
|
|
||||
|
export function createTerrain(props) { |
||||
|
const loader = new TextureLoader(); |
||||
|
const height = loader.load("img/textures/forest-floor.png"); |
||||
|
// w h
|
||||
|
const geometry = new PlaneGeometry(props.width, props.height, 64, 64); |
||||
|
|
||||
|
const material = new MeshLambertMaterial({ |
||||
|
color: props.color, |
||||
|
flatShading: true, |
||||
|
map: height, |
||||
|
//displacementMap: height,
|
||||
|
//displacementScale: 5,
|
||||
|
}); |
||||
|
|
||||
|
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; |
||||
|
|
||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
|
plane.tick = () => {}; |
||||
|
|
||||
|
return plane; |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
import { Color, Scene } from "three"; |
||||
|
|
||||
|
function createScene(color) { |
||||
|
const scene = new Scene(); |
||||
|
|
||||
|
scene.background = new Color(color); |
||||
|
//scene.fog = new Fog(color, 60, 90);
|
||||
|
return scene; |
||||
|
} |
||||
|
|
||||
|
export { createScene }; |
||||
@ -0,0 +1,33 @@ |
|||||
|
import { Clock } from "three"; |
||||
|
|
||||
|
const clock = new Clock(); |
||||
|
|
||||
|
class Loop { |
||||
|
constructor(camera, scene, renderer) { |
||||
|
this.camera = camera; |
||||
|
this.scene = scene; |
||||
|
this.renderer = renderer; |
||||
|
this.updatables = []; |
||||
|
} |
||||
|
|
||||
|
start() { |
||||
|
this.renderer.setAnimationLoop(() => { |
||||
|
this.tick(); |
||||
|
// render a frame
|
||||
|
this.renderer.render(this.scene, this.camera); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
stop() { |
||||
|
this.renderer.setAnimationLoop(null); |
||||
|
} |
||||
|
|
||||
|
tick() { |
||||
|
const delta = clock.getDelta(); |
||||
|
for (const object of this.updatables) { |
||||
|
object.tick(delta); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export { Loop }; |
||||
@ -0,0 +1,33 @@ |
|||||
|
const setSize = (container, camera, renderer) => { |
||||
|
// These are great for full-screen, which adjusts to a window.
|
||||
|
const height = window.innerHeight; |
||||
|
const width = window.innerWidth - 50; |
||||
|
// These are better for fitting in a container, which stays that size.
|
||||
|
//const height = container.scrollHeight;
|
||||
|
//const width = container.scrollWidth;
|
||||
|
|
||||
|
camera.aspect = width / height; |
||||
|
camera.updateProjectionMatrix(); |
||||
|
|
||||
|
renderer.setSize(width, height); |
||||
|
renderer.setPixelRatio(window.devicePixelRatio); |
||||
|
}; |
||||
|
|
||||
|
class Resizer { |
||||
|
constructor(container, camera, renderer) { |
||||
|
// set initial size on load
|
||||
|
setSize(container, camera, renderer); |
||||
|
|
||||
|
window.addEventListener("resize", () => { |
||||
|
// set the size again if a resize occurs
|
||||
|
setSize(container, camera, renderer); |
||||
|
// perform any custom actions
|
||||
|
this.onResize(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
|
onResize() {} |
||||
|
} |
||||
|
|
||||
|
export { Resizer }; |
||||
@ -0,0 +1,38 @@ |
|||||
|
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; |
||||
|
import { MathUtils } from "three"; |
||||
|
|
||||
|
function createControls(camera, canvas) { |
||||
|
const controls = new OrbitControls(camera, canvas); |
||||
|
|
||||
|
//enable controls?
|
||||
|
controls.enabled = true; |
||||
|
controls.autoRotate = false; |
||||
|
//controls.autoRotateSpeed = 0.2;
|
||||
|
|
||||
|
// control limits
|
||||
|
// It's recommended to set some control boundaries,
|
||||
|
// to prevent the user from clipping with the objects.
|
||||
|
|
||||
|
// y axis
|
||||
|
controls.minPolarAngle = MathUtils.degToRad(40); // default
|
||||
|
controls.maxPolarAngle = MathUtils.degToRad(75); |
||||
|
|
||||
|
// x axis
|
||||
|
// controls.minAzimuthAngle = ...
|
||||
|
// controls.maxAzimuthAngle = ...
|
||||
|
|
||||
|
//smooth camera:
|
||||
|
// remember to add to loop updatables to work
|
||||
|
controls.enableDamping = true; |
||||
|
|
||||
|
//controls.enableZoom = false;
|
||||
|
controls.maxDistance = 250; |
||||
|
|
||||
|
//controls.enablePan = false;
|
||||
|
|
||||
|
controls.tick = () => controls.update(); |
||||
|
|
||||
|
return controls; |
||||
|
} |
||||
|
|
||||
|
export { createControls }; |
||||
@ -0,0 +1,13 @@ |
|||||
|
import { WebGLRenderer } from "three"; |
||||
|
|
||||
|
function createRenderer() { |
||||
|
const renderer = new WebGLRenderer({ antialias: true }); |
||||
|
|
||||
|
// turn on the physically correct lighting model
|
||||
|
// (The browser complains: "THREE.WebGLRenderer: .physicallyCorrectLights has been removed. Set enderer.useLegacyLights instead." However, that changes the lighting in a way that doesn't look better.)
|
||||
|
renderer.physicallyCorrectLights = true; |
||||
|
|
||||
|
return renderer; |
||||
|
} |
||||
|
|
||||
|
export { createRenderer }; |
||||
@ -0,0 +1,212 @@ |
|||||
|
<template> |
||||
|
<!-- QUICK NAV --> |
||||
|
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50"> |
||||
|
<ul class="flex text-2xl p-2 gap-2"> |
||||
|
<!-- Home Feed --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"> |
||||
|
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"> |
||||
|
<fa icon="house-chimney" class="fa-fw"></fa> |
||||
|
</router-link> |
||||
|
</li> |
||||
|
<!-- Search --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"> |
||||
|
<router-link |
||||
|
:to="{ name: 'discover' }" |
||||
|
class="block text-center py-3 px-1" |
||||
|
> |
||||
|
<fa icon="magnifying-glass" class="fa-fw"></fa> |
||||
|
</router-link> |
||||
|
</li> |
||||
|
<!-- Projects --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"> |
||||
|
<router-link |
||||
|
:to="{ name: 'projects' }" |
||||
|
class="block text-center py-3 px-1" |
||||
|
> |
||||
|
<fa icon="folder-open" class="fa-fw"></fa> |
||||
|
</router-link> |
||||
|
</li> |
||||
|
<!-- Contacts --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"> |
||||
|
<router-link |
||||
|
:to="{ name: 'contacts' }" |
||||
|
class="block text-center py-3 px-1" |
||||
|
> |
||||
|
<fa icon="users" class="fa-fw"></fa> |
||||
|
</router-link> |
||||
|
</li> |
||||
|
<!-- Profile --> |
||||
|
<li class="basis-1/5 rounded-md bg-slate-400 text-white"> |
||||
|
<router-link |
||||
|
:to="{ name: 'account' }" |
||||
|
class="block text-center py-3 px-1" |
||||
|
> |
||||
|
<fa icon="circle-user" class="fa-fw"></fa> |
||||
|
</router-link> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- CONTENT --> |
||||
|
<section id="Content" class="p-6 pb-24"> |
||||
|
<!-- Heading --> |
||||
|
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> |
||||
|
Your Statistics |
||||
|
</h1> |
||||
|
|
||||
|
<button class="float-right" @click="captureGraphics()">Screenshot</button> |
||||
|
|
||||
|
<!-- Another place to play with the sizing is in Resizer.setSize --> |
||||
|
<div id="scene-container" class="h-screen"></div> |
||||
|
|
||||
|
<div v-bind:class="computedAlertClassNames()"> |
||||
|
<button |
||||
|
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2" |
||||
|
@click="onClickClose()" |
||||
|
> |
||||
|
<fa icon="xmark"></fa> |
||||
|
</button> |
||||
|
<h4 class="font-bold pr-5">{{ alertTitle }}</h4> |
||||
|
<p>{{ alertMessage }}</p> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js"; |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
import { World } from "@/components/World/World.js"; |
||||
|
|
||||
|
@Component |
||||
|
export default class StatisticsView extends Vue { |
||||
|
world: World; |
||||
|
|
||||
|
mounted() { |
||||
|
const container = document.querySelector("#scene-container"); |
||||
|
const newWorld = new World(container, this); |
||||
|
newWorld.start(); |
||||
|
this.world = newWorld; |
||||
|
} |
||||
|
|
||||
|
public captureGraphics() { |
||||
|
/** |
||||
|
// from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#examples |
||||
|
// Adds a blank image |
||||
|
const dataBlob = document |
||||
|
.querySelector("#scene-container") |
||||
|
.firstChild.toBlob((blob) => { |
||||
|
const newImg = document.createElement("img"); |
||||
|
const url = URL.createObjectURL(blob); |
||||
|
|
||||
|
newImg.onload = () => { |
||||
|
// no longer need to read the blob so it's revoked |
||||
|
URL.revokeObjectURL(url); |
||||
|
}; |
||||
|
|
||||
|
newImg.src = url; |
||||
|
document.body.appendChild(newImg); |
||||
|
}); |
||||
|
**/ |
||||
|
|
||||
|
/** |
||||
|
// Yields a blank page with the iframe below |
||||
|
const dataUrl = document |
||||
|
.querySelector("#scene-container") |
||||
|
.firstChild.toDataURL("image/png"); |
||||
|
**/ |
||||
|
|
||||
|
/** |
||||
|
// Yields a blank page with the iframe below |
||||
|
const dataUrl = this.world.renderer.domElement.toDataURL("image/png"); |
||||
|
**/ |
||||
|
|
||||
|
/** |
||||
|
// Show the image in a new tab |
||||
|
const iframe = ` |
||||
|
<iframe |
||||
|
src="${dataUrl}" |
||||
|
frameborder="0" |
||||
|
style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" |
||||
|
allowfullscreen> |
||||
|
</iframe>`; |
||||
|
const win = window.open(); |
||||
|
win.document.open(); |
||||
|
win.document.write(iframe); |
||||
|
win.document.close(); |
||||
|
**/ |
||||
|
|
||||
|
// from https://stackoverflow.com/a/17407392/845494 |
||||
|
// This yields a file with funny formatting. |
||||
|
//const image = const dataUrl.replace("image/png", "image/octet-stream"); |
||||
|
|
||||
|
/** |
||||
|
// Yields a blank image at the bottom of the page |
||||
|
// from https://discourse.threejs.org/t/save-screenshot-on-server/39900/3 |
||||
|
const img = new Image(); |
||||
|
img.src = this.world.renderer.domElement.toDataURL(); |
||||
|
document.body.appendChild(img); |
||||
|
**/ |
||||
|
|
||||
|
/** |
||||
|
* This yields an SVG that only shows white and black highlights |
||||
|
// from https://stackoverflow.com/questions/27632621/exporting-from-three-js-scene-to-svg-or-other-vector-format |
||||
|
**/ |
||||
|
const rendererSVG = new SVGRenderer(); |
||||
|
rendererSVG.setSize(window.innerWidth, window.innerHeight); |
||||
|
rendererSVG.render(this.world.scene, this.world.camera); |
||||
|
//document.body.appendChild(rendererSVG.domElement); |
||||
|
ExportToSVG(rendererSVG, "test.svg"); |
||||
|
} |
||||
|
|
||||
|
alertTitle = ""; |
||||
|
alertMessage = ""; |
||||
|
isAlertVisible = false; |
||||
|
|
||||
|
public setAlert(title, message) { |
||||
|
this.alertTitle = title; |
||||
|
this.alertMessage = message; |
||||
|
this.isAlertVisible = true; |
||||
|
} |
||||
|
|
||||
|
public onClickClose() { |
||||
|
this.isAlertVisible = false; |
||||
|
this.alertTitle = ""; |
||||
|
this.alertMessage = ""; |
||||
|
} |
||||
|
|
||||
|
public computedAlertClassNames() { |
||||
|
return { |
||||
|
hidden: !this.isAlertVisible, |
||||
|
"dismissable-alert": true, |
||||
|
"bg-slate-100": true, |
||||
|
"p-5": true, |
||||
|
rounded: true, |
||||
|
"drop-shadow-lg": true, |
||||
|
fixed: true, |
||||
|
"top-3": true, |
||||
|
"inset-x-3": true, |
||||
|
"transition-transform": true, |
||||
|
"ease-in": true, |
||||
|
"duration-300": true, |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function ExportToSVG(rendererSVG, filename) { |
||||
|
const XMLS = new XMLSerializer(); |
||||
|
const svgfile = XMLS.serializeToString(rendererSVG.domElement); |
||||
|
const svgData = svgfile; |
||||
|
const preface = '<?xml version="1.0" standalone="no"?>\r\n'; |
||||
|
const svgBlob = new Blob([preface, svgData], { |
||||
|
type: "image/svg+xml;charset=utf-8", |
||||
|
}); |
||||
|
const svgUrl = URL.createObjectURL(svgBlob); |
||||
|
const downloadLink = document.createElement("a"); |
||||
|
|
||||
|
downloadLink.href = svgUrl; |
||||
|
downloadLink.download = filename; |
||||
|
document.body.appendChild(downloadLink); |
||||
|
downloadLink.click(); |
||||
|
document.body.removeChild(downloadLink); |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue