updated three js template

2024-06-29 13:47:24 +01:00
parent 0b61cc9749
commit 5dc6f4ca1e
7 changed files with 126 additions and 107 deletions
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -0,0 +1,14 @@
+body {
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	background-color: whitesmoke;
+}
+
+#container {
+	width: 100%;
+	flex-grow: 1;
+	display: flex;
+	overflow-y: hidden;
+    flex-direction: column;
+  }
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Template 3JS</title>
+  <link rel="stylesheet" href="./css/styles.css">
+  <script type="importmap">
+	{
+	  "imports": {
+		"three": "https://cdn.jsdelivr.net/npm/three@v0.164.0/build/three.module.js",
+		"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.164.0/examples/jsm/",
+		"three/src/": "https://cdn.jsdelivr.net/npm/three@v0.164.0/src/",
+		"three/examples/": "https://cdn.jsdelivr.net/npm/three@v0.164.0/examples/"
+	  }
+	}
+  </script>
+</head>
+<body>
+  <div id="main-container">
+	<div id="container"></div>
+  </div>
+  <script type="module" src="./js/main.js"></script>
+</body>
+</html>
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -0,0 +1,87 @@
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { Vector3 } from 'three'
+import { randFloat, randInt } from 'three/src/math/MathUtils.js'
+
+let scene, camera, renderer
+let aspect, frustumSize
+let mesh
+let delta
+let controls
+var clock = new THREE.Clock()
+
+function init(){
+	SetupRenderer()
+	scene = new THREE.Scene()
+	scene.background = new THREE.Color('white')
+	SetupCamera()
+	SetupControls()
+	SetupObjects()
+	animate()
+}
+
+function SetupRenderer(){
+	renderer = new THREE.WebGLRenderer({ antialias: true })
+	renderer.setSize(window.innerWidth, window.innerHeight)
+	document.getElementById('container').appendChild(renderer.domElement)
+}
+
+function SetupCamera(){
+	aspect = window.innerWidth / window.innerHeight
+	frustumSize = 10
+	camera = new THREE.OrthographicCamera(
+		frustumSize * aspect / -2,
+		frustumSize * aspect / 2,
+		frustumSize / 2,
+		frustumSize / -2,
+		0.01,
+		5000
+	)
+
+	camera.position.z = 20
+}
+
+function SetupControls(){
+	controls = new OrbitControls(camera, renderer.domElement)
+	controls.enableRotate = false;
+	controls.enablePan = true
+	controls.zoomToCursor = true;
+	controls.mouseButtons = {
+		RIGHT: THREE.MOUSE.ROTATE,
+		MIDDLE: THREE.MOUSE.DOLLY,
+		LEFT: THREE.MOUSE.PAN
+	}
+	camera.position.set(0, 0, 20)
+	controls.update()
+}
+
+function SetupObjects() {
+	let geo = new THREE.BoxGeometry(1, 1, 1)
+	let mat = new THREE.MeshNormalMaterial()
+	mesh = new THREE.Mesh(geo, mat)
+	scene.add(mesh)
+}
+
+function animate(){
+	requestAnimationFrame(animate)
+	controls.update()
+	delta = clock.getDelta() / 10
+	mesh.rotation.x += delta
+	mesh.rotation.z += delta
+	renderer.render(scene, camera)
+}
+
+window.addEventListener('resize', () => {
+	aspect = window.innerWidth / window.innerHeight
+	camera.left = -frustumSize * aspect / 2
+	camera.right = frustumSize * aspect / 2
+	camera.top = frustumSize / 2
+	camera.bottom = -frustumSize / 2
+	camera.updateProjectionMatrix()
+	renderer.setPixelRatio(window.devicePixelRatio)
+	renderer.setSize(window.innerWidth, window.innerHeight)
+})
+
+
+init()
+
--- a/public/shaders/00_mt.frag
+++ b/public/shaders/00_mt.frag
@@ -1,7 +0,0 @@
-uniform float time;
-uniform vec2 resolution;
-
-void main()	{
-	vec3 color = vec3(1.0, 1.0, 1.0);
-	gl_FragColor(color, 1.0);
-}
--- a/public/shaders/00_mt.vert
+++ b/public/shaders/00_mt.vert
@@ -1,7 +0,0 @@
-uniform vec3 u_color;
-uniform float u_speed;
-
-
-void main()	{
-	gl_Position = vec4( position, 1.0 );
-}