diff --git a/index.html b/index.html
deleted file mode 100644
index 2659655..0000000
--- a/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
-
- Hello World
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/main.js b/main.js
deleted file mode 100644
index 92899b8..0000000
--- a/main.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as THREE from 'three';
-import { GlslPipeline } from 'glsl-pipeline';
-
-function main() {
-
- const canvas = document.querySelector( '#c' );
- const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );
-
- // glsl
- const shader_f = /* glsl */`
-
- uniform vec2 u_resolution;
- uniform vec2 u_res;
-
- void main() {
-
- // vec2 st = vec2(0.0, 0.0);
- // st.x = u_resolution.x;
- vec2 st = gl_FragCoord.xy/u_res;
- gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
- }
- `;
-
- const gl_sandbox = new GlslPipeline(renderer, {
- // define uniforms
- u_color: { value: new THREE.Vector3(1.0, 1.0, 1.0) },
- u_speed: { value: 0.5 },
- u_res: {value: new THREE.Vector2(window.innerWidth/4, window.innerHeight/4)},
- })
-
- gl_sandbox.load(shader_f);
-
-
- // Create your scene and use the main material shader
- const cam = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
- const mesh = new THREE.Mesh(new THREE.IcosahedronGeometry(1, 10), gl_sandbox.material);
- const scene = new THREE.Scene();
- scene.add(mesh);
-
- const draw = () => {
- gl_sandbox.renderMain();
- requestAnimationFrame(draw);
- };
-
- const resize = () => {
- console.log("OK");
- gl_sandbox.setSize(window.innerWidth, window.innerHeight);
- };
-
- console.log(window.innerWidth);
-
- window.addEventListener("resize", resize);
- resize();
-
- draw();
-
-}
-
-
-
-main();
diff --git a/public/css/styles.css b/public/css/styles.css
new file mode 100644
index 0000000..cd05a59
--- /dev/null
+++ 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;
+ }
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..c5c3929
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Template 3JS
+
+
+
+
+
+
+
+
diff --git a/public/js/main.js b/public/js/main.js
new file mode 100644
index 0000000..924ad71
--- /dev/null
+++ 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()
+
diff --git a/public/shaders/00_mt.frag b/public/shaders/00_mt.frag
deleted file mode 100644
index d5928e9..0000000
--- a/public/shaders/00_mt.frag
+++ /dev/null
@@ -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);
-}
\ No newline at end of file
diff --git a/public/shaders/00_mt.vert b/public/shaders/00_mt.vert
deleted file mode 100644
index 249f388..0000000
--- a/public/shaders/00_mt.vert
+++ /dev/null
@@ -1,7 +0,0 @@
-uniform vec3 u_color;
-uniform float u_speed;
-
-
-void main() {
- gl_Position = vec4( position, 1.0 );
-}
\ No newline at end of file