${config.title}
` : ''} 25 | ${ 26 | config.description 27 | ? `
28 |
`
30 | : ``
31 | }
32 | ${config.description}
29 |
33 | ${
34 | config.twitter
35 | ? `
36 | 
37 | `
38 | : ``
39 | }
40 | ${
41 | config.github
42 | ? `
43 | 
44 | `
45 | : ``
46 | }
47 |
48 | `
49 | )
50 | document.body.prepend(container)
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/engine/interface/Loader.ts:
--------------------------------------------------------------------------------
1 | import './loader.scss'
2 |
3 | export class Loader {
4 | private readonly element: HTMLDivElement
5 | public isComplete = false
6 |
7 | constructor() {
8 | this.element = document.createElement('div')
9 | this.element.classList.add('loader')
10 | this.element.insertAdjacentHTML(
11 | 'beforeend',
12 | `
13 |
14 |
17 | `
18 | )
19 |
20 | this.start()
21 | }
22 |
23 | start() {
24 | document.body.prepend(this.element)
25 | }
26 |
27 | setProgress(progress: number) {
28 | const progressNumber = this.element.querySelector(
29 | '.progress-number'
30 | ) as HTMLHeadingElement
31 |
32 | progressNumber!.innerText = `${Math.floor(progress * 100)}%`
33 |
34 | const progressBar = this.element.querySelector(
35 | '.progress-bar'
36 | ) as HTMLDivElement
37 |
38 | progressBar.style.width = `${progress * 100}%`
39 | }
40 |
41 | complete() {
42 | this.element.remove()
43 | this.isComplete = true
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/engine/interface/info.scss:
--------------------------------------------------------------------------------
1 | .info-container {
2 | position: absolute;
3 | bottom: 0;
4 | left: 0;
5 | padding: 16px 20px;
6 |
7 | display: flex;
8 | flex-direction: column;
9 |
10 | user-select: none;
11 | opacity: 40%;
12 | transition: opacity 0.3s ease-in-out;
13 |
14 | color: #fff;
15 | font-family: 'Helvetica', 'Arial', sans-serif;
16 | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
17 |
18 | &:hover {
19 | opacity: 100%;
20 | }
21 |
22 | h1 {
23 | margin-bottom: 0;
24 | font-weight: normal;
25 | }
26 |
27 | .description {
28 | width: 250px;
29 | max-width: 100%;
30 | margin-bottom: 4px;
31 | }
32 |
33 | .social-container {
34 | display: flex;
35 | flex-direction: row;
36 | justify-content: flex-start;
37 | align-items: center;
38 | }
39 |
40 | .social-button {
41 | display: flex;
42 | width: 24px;
43 | height: 24px;
44 | padding: 8px;
45 | margin-right: 8px;
46 | border-radius: 50px;
47 | align-items: center;
48 |
49 | background: #fff;
50 | transition: box-shadow 0.3s ease-in-out;
51 |
52 | &:hover {
53 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
54 | }
55 |
56 | img {
57 | max-width: 100%;
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/engine/interface/loader.scss:
--------------------------------------------------------------------------------
1 | .loader {
2 | width: 100%;
3 | height: 100%;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 |
8 | color: #fff;
9 | font-family: 'Helvetica', 'Arial', sans-serif;
10 | font-weight: normal;
11 |
12 | .loader-inner {
13 | width: 500px;
14 | max-width: 95%;
15 | }
16 |
17 | .progress-number {
18 | text-align: center;
19 | }
20 |
21 | .progress-bar {
22 | background-color: #fff;
23 | transition: width 0.3s ease-in-out;
24 |
25 | height: 5px;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/engine/utilities/EventEmitter.ts:
--------------------------------------------------------------------------------
1 | export class EventEmitter {
2 | private listeners: { [key: string]: Function[] } = {}
3 |
4 | protected listenerCount(event: string) {
5 | return this.listeners[event] ? this.listeners[event].length : 0
6 | }
7 |
8 | public on(event: string, listener: Function) {
9 | if (!this.listeners[event]) {
10 | this.listeners[event] = []
11 | }
12 |
13 | this.listeners[event].push(listener)
14 |
15 | return () => this.off(event, listener)
16 | }
17 |
18 | public off(event: string, listener: Function) {
19 | if (!this.listeners[event]) {
20 | return
21 | }
22 |
23 | const index = this.listeners[event].indexOf(listener)
24 |
25 | if (index === -1) {
26 | return
27 | }
28 |
29 | this.listeners[event].splice(index, 1)
30 | }
31 |
32 | public emit(event: string, ...args: any[]) {
33 | if (!this.listeners[event]) {
34 | return
35 | }
36 |
37 | this.listeners[event].forEach((listener) => listener(...args))
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './style.scss'
2 | import { Engine } from './engine/Engine'
3 | import { Demo } from './demo/Demo'
4 |
5 | new Engine({
6 | canvas: document.querySelector('#canvas') as HTMLCanvasElement,
7 | experience: Demo,
8 | info: {
9 | twitter: 'https://twitter.com/maya_ndljk',
10 | github: 'https://github.com/mayacoda/simple-threejs-typescript-starter',
11 | description: 'A simple Three.js + Typescript + Vite starter project',
12 | documentTitle: 'Three.js + Typescript + Vite',
13 | title: 'A cube on a plane',
14 | },
15 | })
16 |
--------------------------------------------------------------------------------
/src/style.scss:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | #canvas {
4 | height: 100%;
5 | width: 100%;
6 | margin: 0;
7 | padding: 0;
8 | overflow: hidden;
9 | background: #000;
10 | }
11 |
12 | #canvas {
13 | outline: none;
14 | }
15 |
--------------------------------------------------------------------------------
/src/types/glsl.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.glsl' {
2 | const value: string
3 | export default value
4 | }
5 |
6 | declare module '*.frag' {
7 | const value: string
8 | export default value
9 | }
10 |
11 | declare module '*.vert' {
12 | const value: string
13 | export default value
14 | }
15 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///