Skip to content

Commit d22f174

Browse files
venikxvenikx
committed
feat: hello world threejs
1 parent 02c6876 commit d22f174

7 files changed

+93
-113
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>Vite + TS</title>
88
</head>
99
<body>
10-
<div id="app"></div>
10+
<canvas id="c"></canvas>
1111
<script type="module" src="/src/main.ts"></script>
1212
</body>
1313
</html>

‎package-lock.json

+52
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,12 @@
99
"preview": "vite preview"
1010
},
1111
"devDependencies": {
12+
"@types/three": "^0.164.0",
1213
"prettier": "^3.2.5",
1314
"typescript": "^5.2.2",
1415
"vite": "^5.2.0"
16+
},
17+
"dependencies": {
18+
"three": "^0.164.1"
1519
}
1620
}

‎src/counter.ts

-9
This file was deleted.

‎src/main.ts

+36-24
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,36 @@
1-
import './style.css'
2-
import typescriptLogo from './typescript.svg'
3-
import viteLogo from '/vite.svg'
4-
import { setupCounter } from './counter.ts'
5-
6-
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
7-
<div>
8-
<a href="https://vitejs.dev" target="_blank">
9-
<img src="${viteLogo}" class="logo" alt="Vite logo" />
10-
</a>
11-
<a href="https://www.typescriptlang.org/" target="_blank">
12-
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
13-
</a>
14-
<h1>Vite + TypeScript</h1>
15-
<div class="card">
16-
<button id="counter" type="button"></button>
17-
</div>
18-
<p class="read-the-docs">
19-
Click on the Vite and TypeScript logos to learn more
20-
</p>
21-
</div>
22-
`
23-
24-
setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
1+
import "./style.css"
2+
import * as THREE from "three"
3+
4+
function main() {
5+
const canvas = document.querySelector("#c")
6+
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas })
7+
renderer.setSize(window.innerWidth, window.innerHeight)
8+
9+
const camera = new THREE.PerspectiveCamera(
10+
45, // field of view
11+
window.innerWidth / window.innerHeight, // aspect ratio
12+
1, // near the plane
13+
1000 // far from the plane => so is this maximum drawing distance?
14+
)
15+
camera.position.z = 2
16+
17+
const scene = new THREE.Scene()
18+
const geometry = new THREE.BoxGeometry(1, 1, 1)
19+
const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 })
20+
const cube = new THREE.Mesh(geometry, material)
21+
scene.add(cube)
22+
23+
function render(time) {
24+
time *= 0.001 // convert time to seconds
25+
26+
cube.rotation.x = time
27+
cube.rotation.y = time
28+
29+
renderer.render(scene, camera)
30+
requestAnimationFrame(render)
31+
}
32+
33+
requestAnimationFrame(render)
34+
}
35+
36+
main()

‎src/style.css

-78
Original file line numberDiff line numberDiff line change
@@ -3,94 +3,16 @@
33
line-height: 1.5;
44
font-weight: 400;
55

6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
9-
106
font-synthesis: none;
117
text-rendering: optimizeLegibility;
128
-webkit-font-smoothing: antialiased;
139
-moz-osx-font-smoothing: grayscale;
1410
}
1511

16-
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
20-
}
21-
a:hover {
22-
color: #535bf2;
23-
}
24-
2512
body {
2613
margin: 0;
2714
display: flex;
2815
place-items: center;
2916
min-width: 320px;
3017
min-height: 100vh;
3118
}
32-
33-
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
36-
}
37-
38-
#app {
39-
max-width: 1280px;
40-
margin: 0 auto;
41-
padding: 2rem;
42-
text-align: center;
43-
}
44-
45-
.logo {
46-
height: 6em;
47-
padding: 1.5em;
48-
will-change: filter;
49-
transition: filter 300ms;
50-
}
51-
.logo:hover {
52-
filter: drop-shadow(0 0 2em #646cffaa);
53-
}
54-
.logo.vanilla:hover {
55-
filter: drop-shadow(0 0 2em #3178c6aa);
56-
}
57-
58-
.card {
59-
padding: 2em;
60-
}
61-
62-
.read-the-docs {
63-
color: #888;
64-
}
65-
66-
button {
67-
border-radius: 8px;
68-
border: 1px solid transparent;
69-
padding: 0.6em 1.2em;
70-
font-size: 1em;
71-
font-weight: 500;
72-
font-family: inherit;
73-
background-color: #1a1a1a;
74-
cursor: pointer;
75-
transition: border-color 0.25s;
76-
}
77-
button:hover {
78-
border-color: #646cff;
79-
}
80-
button:focus,
81-
button:focus-visible {
82-
outline: 4px auto -webkit-focus-ring-color;
83-
}
84-
85-
@media (prefers-color-scheme: light) {
86-
:root {
87-
color: #213547;
88-
background-color: #ffffff;
89-
}
90-
a:hover {
91-
color: #747bff;
92-
}
93-
button {
94-
background-color: #f9f9f9;
95-
}
96-
}

‎src/typescript.svg

-1
This file was deleted.

0 commit comments

Comments
 (0)