|
|
@ -1,7 +1,7 @@ |
|
|
|
// 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 { SpotLight } from "three"; |
|
|
|
import * as TWEEN from "@tweenjs/tween.js"; |
|
|
|
|
|
|
|
import { createCamera } from "./components/camera.js"; |
|
|
@ -24,10 +24,16 @@ const PLATFORM_BORDER = 10; |
|
|
|
const PLATFORM_EDGE_FOR_UNKNOWNS = 10; |
|
|
|
const BASE32 = "0123456789ABCDEFGHJKMNPQRSTVWXYZ"; |
|
|
|
|
|
|
|
function createLight() { |
|
|
|
const light = new SpotLight(0xffffff, 100, 0, Math.PI / 8, 0.5, 0); |
|
|
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
|
|
light.tick = () => {}; |
|
|
|
return light; |
|
|
|
} |
|
|
|
|
|
|
|
class World { |
|
|
|
constructor(container) { |
|
|
|
this.update = this.update.bind(this); |
|
|
|
this.renderLight = this.renderLight.bind(this); |
|
|
|
|
|
|
|
// Instances of camera, scene, and renderer
|
|
|
|
this.camera = createCamera(); |
|
|
@ -35,9 +41,9 @@ class World { |
|
|
|
this.renderer = createRenderer(); |
|
|
|
|
|
|
|
this.light = null; |
|
|
|
this.helper = null; |
|
|
|
this.lights = []; |
|
|
|
|
|
|
|
// Initializate Loop
|
|
|
|
// Initializae Loop
|
|
|
|
this.loop = new Loop(this.camera, this.scene, this.renderer); |
|
|
|
|
|
|
|
container.append(this.renderer.domElement); |
|
|
@ -69,7 +75,6 @@ class World { |
|
|
|
this.loadClaims(); |
|
|
|
|
|
|
|
requestAnimationFrame(this.update); |
|
|
|
requestAnimationFrame(this.renderLight); |
|
|
|
|
|
|
|
// Responsive handler
|
|
|
|
const resizer = new Resizer(container, this.camera, this.renderer); |
|
|
@ -80,6 +85,10 @@ class World { |
|
|
|
|
|
|
|
update(time) { |
|
|
|
TWEEN.update(time); |
|
|
|
this.lights.forEach((light) => { |
|
|
|
light.updateMatrixWorld(); |
|
|
|
light.target.updateMatrixWorld(); |
|
|
|
}); |
|
|
|
requestAnimationFrame(this.update); |
|
|
|
} |
|
|
|
|
|
|
@ -107,13 +116,20 @@ class World { |
|
|
|
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); |
|
|
|
const light = createLight(); |
|
|
|
light.position.set(x, 20, z); |
|
|
|
light.target.position.set(x, 0, z); |
|
|
|
this.loop.updatables.push(light); |
|
|
|
this.scene.add(light); |
|
|
|
this.scene.add(light.target); |
|
|
|
new TWEEN.Tween(light.position) |
|
|
|
.to({ y: 5 }, 1000) |
|
|
|
.start() |
|
|
|
.onComplete(() => { |
|
|
|
this.scene.remove(light); |
|
|
|
light.dispose(); |
|
|
|
}); |
|
|
|
this.lights = [...this.lights, light]; |
|
|
|
}); |
|
|
|
console.log("done adding cube"); |
|
|
|
} else { |
|
|
@ -136,37 +152,6 @@ class World { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
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
|
|
|
|
this.renderer.render(this.scene, this.camera); |
|
|
|