17 changed files with 461 additions and 3 deletions
|
After Width: | Height: | Size: 735 KiB |
@ -0,0 +1,86 @@ |
|||||
|
// from https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80
|
||||
|
|
||||
|
import { createCamera } from "./components/camera.js"; |
||||
|
import { createLights } from "./components/lights.js"; |
||||
|
import { createScene } from "./components/scene.js"; |
||||
|
import { createRenderer } from "./systems/renderer.js"; |
||||
|
import { Loop } from "./systems/Loop.js"; |
||||
|
import { Resizer } from "./systems/Resizer.js"; |
||||
|
import { createControls } from "./systems/controls.js"; |
||||
|
|
||||
|
import createTerrain from "./components/objects/terrain.js"; |
||||
|
|
||||
|
// These variables are module-scoped: we cannot access them
|
||||
|
// from outside the module
|
||||
|
|
||||
|
const color = "#42b883"; |
||||
|
const color2 = "#4eac82"; |
||||
|
|
||||
|
let camera; |
||||
|
let renderer; |
||||
|
let scene; |
||||
|
let loop; |
||||
|
|
||||
|
class World { |
||||
|
constructor(container) { |
||||
|
// Instances of camera, scene, and renderer
|
||||
|
camera = createCamera(); |
||||
|
scene = createScene(color2); |
||||
|
renderer = createRenderer(); |
||||
|
|
||||
|
// Initializate Loop
|
||||
|
loop = new Loop(camera, scene, renderer); |
||||
|
|
||||
|
container.append(renderer.domElement); |
||||
|
|
||||
|
// Orbit Controls
|
||||
|
const controls = createControls(camera, renderer.domElement); |
||||
|
|
||||
|
// Light Instance, with optional light helper
|
||||
|
const { light, lightHelper } = createLights(color); |
||||
|
|
||||
|
// Random values for terrain vertices
|
||||
|
// We could do this on the terrain.js file,
|
||||
|
// but if we want to have a single random
|
||||
|
// number array for more than one terrain
|
||||
|
// instance, then we would be in trouble.
|
||||
|
const randomVals = []; |
||||
|
for (let i = 0; i < 12675; i++) { |
||||
|
randomVals.push(Math.random() - 0.5); |
||||
|
} |
||||
|
|
||||
|
// Terrain Instance
|
||||
|
const terrain = createTerrain({ |
||||
|
color: color, |
||||
|
randVertexArr: randomVals, |
||||
|
}); |
||||
|
|
||||
|
loop.updatables.push(controls); |
||||
|
loop.updatables.push(light); |
||||
|
loop.updatables.push(terrain); |
||||
|
|
||||
|
scene.add(light, terrain); |
||||
|
|
||||
|
// Responsive handler
|
||||
|
const resizer = new Resizer(container, camera, renderer); |
||||
|
resizer.onResize = () => { |
||||
|
this.render(); |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
// draw a single frame
|
||||
|
renderer.render(scene, camera); |
||||
|
} |
||||
|
|
||||
|
// Animation handlers
|
||||
|
start() { |
||||
|
loop.start(); |
||||
|
} |
||||
|
|
||||
|
stop() { |
||||
|
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
|
||||
|
100 // far clipping plane
|
||||
|
); |
||||
|
|
||||
|
// move the camera back so we can view the scene
|
||||
|
camera.position.set(0, 10, 30); |
||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
|
camera.tick = (delta) => {}; |
||||
|
|
||||
|
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(0, 30, 30); |
||||
|
|
||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
|
light.tick = (delta) => {}; |
||||
|
|
||||
|
return { light, lightHelper }; |
||||
|
} |
||||
|
|
||||
|
export { createLights }; |
||||
@ -0,0 +1,60 @@ |
|||||
|
import { |
||||
|
PlaneBufferGeometry, |
||||
|
MeshStandardMaterial, |
||||
|
Mesh, |
||||
|
TextureLoader, |
||||
|
} from "three"; |
||||
|
|
||||
|
export default function createTerrain(props) { |
||||
|
const loader = new TextureLoader(); |
||||
|
const height = loader.load("img/textures/height.png"); |
||||
|
// w h
|
||||
|
const geometry = new PlaneBufferGeometry(150, 150, 64, 64); |
||||
|
|
||||
|
const material = new MeshStandardMaterial({ |
||||
|
color: props.color, |
||||
|
flatShading: true, |
||||
|
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; |
||||
|
|
||||
|
//Randomizing our vertices position
|
||||
|
const { array } = plane.geometry.attributes.position; |
||||
|
for (let i = 0; i < array.length; i++) { |
||||
|
props.randVertexArr.push(Math.random()); |
||||
|
} |
||||
|
|
||||
|
plane.geometry.attributes.position.randomValues = props.randVertexArr; |
||||
|
|
||||
|
let frame = 0; |
||||
|
plane.tick = (delta) => { |
||||
|
frame += 0.01; |
||||
|
// destructuring of the random values, the original position and the current vertex position
|
||||
|
const { array, originalPosition, randomValues } = |
||||
|
plane.geometry.attributes.position; |
||||
|
|
||||
|
// Animation for loop
|
||||
|
// In our vertex array, we have 3 coordinates: x, y and z. We are
|
||||
|
// only going to animate on ONE coordinate: the z coordinate.
|
||||
|
// This means we have to omit the x and y coords, hence the i+=3 in our loop.
|
||||
|
// Also, to access that y coordinate on each vertex, we have to add 2 to our
|
||||
|
// current i each time.
|
||||
|
for (let i = 0; i < array.length; i += 3) { |
||||
|
// Accessing the z coord
|
||||
|
array[i + 2] = |
||||
|
// Try switching this numbers up, or using sine instead of cosine, see how the animation changes
|
||||
|
originalPosition[i + 2] + Math.cos(frame + randomValues[i + 2]) * 0.002; |
||||
|
} |
||||
|
plane.geometry.attributes.position.needsUpdate = true; |
||||
|
}; |
||||
|
|
||||
|
return plane; |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
import { Color, Scene, Fog } 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,26 @@ |
|||||
|
const setSize = (container, camera, renderer) => { |
||||
|
camera.aspect = window.innerWidth / window.innerHeight; |
||||
|
camera.updateProjectionMatrix(); |
||||
|
|
||||
|
renderer.setSize(window.innerWidth, window.innerHeight); |
||||
|
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,36 @@ |
|||||
|
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 = true; |
||||
|
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.enablePan = false; |
||||
|
|
||||
|
controls.tick = () => controls.update(); |
||||
|
|
||||
|
return controls; |
||||
|
} |
||||
|
|
||||
|
export { createControls }; |
||||
@ -0,0 +1,12 @@ |
|||||
|
import { WebGLRenderer } from "three"; |
||||
|
|
||||
|
function createRenderer() { |
||||
|
const renderer = new WebGLRenderer({ antialias: true }); |
||||
|
|
||||
|
// turn on the physically correct lighting model
|
||||
|
renderer.physicallyCorrectLights = true; |
||||
|
|
||||
|
return renderer; |
||||
|
} |
||||
|
|
||||
|
export { createRenderer }; |
||||
@ -0,0 +1,83 @@ |
|||||
|
<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> |
||||
|
<div id="scene-container"></div> |
||||
|
<canvas ref="worldCanvas"></canvas> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
import { World } from "@/components/World/World.js"; |
||||
|
|
||||
|
@Component |
||||
|
export default class StatisticsView extends Vue { |
||||
|
mounted() { |
||||
|
const container = document.querySelector("#scene-container"); |
||||
|
const world = new World(container); |
||||
|
world.start(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
#scene-container { |
||||
|
position: fixed; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue