diff --git a/src/animation/Helpers.ts b/src/animation/Helpers.ts new file mode 100644 index 0000000..7108054 --- /dev/null +++ b/src/animation/Helpers.ts @@ -0,0 +1,33 @@ +import * as THREE from 'three' + +/** + * Create a 3D box geometry made out of dashed lines + * @param width + * @param height + * @param depth + */ +export function box(width: number, height: number, depth: number): THREE.BufferGeometry +{ + width = width * 0.5 + height = height * 0.5 + depth = depth * 0.5 + + const geometry = new THREE.BufferGeometry(); + const position = []; + + for (const x of [-1, 1]) + for (const y of [-1, 1]) + for (const z of [-1, 1]) + { + const rx = x * width, ry = y * height, rz = z * depth + position.push(rx, ry, rz) + position.push(rx * -x, ry, rz) + position.push(rx, ry, rz) + position.push(rx, ry * -y, rz) + position.push(rx, ry, rz) + position.push(rx, ry, rz * -z) + } + + geometry.setAttribute('position', new THREE.Float32BufferAttribute(position, 3)) + return geometry +} diff --git a/src/animation/Home.ts b/src/animation/Home.ts new file mode 100644 index 0000000..3d449bc --- /dev/null +++ b/src/animation/Home.ts @@ -0,0 +1,69 @@ +import * as THREE from 'three' +import * as helper from "@/animation/Helpers"; + +let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera +const objects = [] + +const config = { + background: '#333', + + // Field of vision and cutoff frustum for near and far + cam: {fov: 50, near: 1, far: 2000}, +} + +// //////////////////// +// Three.js scene code + +function init(): void +{ + +} + +function update(): void +{ + +} + +// /////////////////// +// Three.js meta code + +/** + * Start the three.js rendering engine + * + * @param id: Canvas element id + */ +export function start(id: string): void +{ + scene = new THREE.Scene() + scene.background = new THREE.Color(config.background) + + // Create camera + camera = new THREE.PerspectiveCamera(config.cam.fov, window.innerWidth / window.innerHeight, + config.cam.near, config.cam.far) + camera.position.set(0, 0, 200) + camera.lookAt(0, 0, 0) + + // @ts-ignore Create WebGL Renderer + renderer = new THREE.WebGLRenderer({canvas: document.getElementById(id), antialias: true}) + onWindowResize() + window.addEventListener('resize', onWindowResize) + + init() + animate() +} + +function onWindowResize() +{ + camera.aspect = window.innerWidth / window.innerHeight + camera.updateProjectionMatrix() + + renderer.setPixelRatio(window.devicePixelRatio) + renderer.setSize(window.innerWidth, window.innerHeight) +} + +function animate(): void +{ + requestAnimationFrame(animate) + update() + renderer.render(scene, camera) +} diff --git a/src/animation/MouseTracker.ts b/src/animation/MouseTracker.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/animation/home.ts b/src/animation/home.ts index 07dd87d..f164fe7 100644 --- a/src/animation/home.ts +++ b/src/animation/home.ts @@ -1,4 +1,5 @@ import * as THREE from 'three' +import * as helper from "@/animation/Helpers"; let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera const objects = [] @@ -15,12 +16,47 @@ const config = { function init(): void { + const geometryBox = helper.box(50, 50, 50); + const lineSegments = new THREE.LineSegments(geometryBox, new THREE.LineDashedMaterial({ + color: 0xffaa00, + dashSize: 3, + gapSize: 1 + })); + lineSegments.computeLineDistances() + + objects.push(lineSegments) + scene.add(lineSegments) + + scene.add(circle(0xffff00, 0, 5)) + scene.add(circle(0xff00ff, 1, 4)) + scene.add(circle(0x0000ff, 2, 3)) + scene.add(circle(0x00ffff, 3, 2)) + scene.add(circle(0xff0000, 4, 1)) +} + +function circle(color: number, z: number, r: number) +{ + const geometry = new THREE.CircleGeometry(r, 32) + const material = new THREE.MeshBasicMaterial({color}) + const circle = new THREE.Mesh(geometry, material) + circle.position.z = z + return circle } function update(): void { + const time = Date.now() * 0.001; + const obj = camera + obj.rotation.y = THREE.MathUtils.lerp(obj.rotation.y, (mouse.x * Math.PI) / 10, 0.1) + obj.rotation.x = THREE.MathUtils.lerp(obj.rotation.x, (mouse.y * Math.PI) / 10, 0.1) + // scene.traverse((object) => + // { + // object.rotation.x = 0.25 * time; + // object.rotation.y = 0.25 * time; + // }); + return } // /////////////////// diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue index 346c34c..f42b46e 100644 --- a/src/views/NewHome.vue +++ b/src/views/NewHome.vue @@ -6,7 +6,7 @@