1 files changed, 23 insertions(+), 10 deletions(-)

M main.js

@@ 20,8 20,14 @@ const INPUT = new Input([
 
 var scene = new THREE.Scene()
 
-var camera = new THREE.PerspectiveCamera(75)
-camera.position.z = 4
+var camera = new THREE.OrthographicCamera()
+camera.position.set(10, 10, 10);
+camera.position.setFromSphericalCoords(
+    10,
+    Math.PI / 3,
+    Math.PI / 4
+)
+camera.lookAt(scene.position);
 
 var renderer = new THREE.WebGLRenderer()
 document.body.appendChild(renderer.domElement)


@@ 29,9 35,15 @@ document.body.appendChild(renderer.domElement)
 renderer.domElement.style.imageRendering = "pixelated"
 
 function resize() {
-    camera.aspect = ls16.width / ls16.height
+    const aspect = ls16.width / ls16.height
+    const smallest = Math.min(ls16.width, ls16.height)
+    const d = 2
+    camera.left = -d
+    camera.right = d
+    camera.top = -d
+    camera.bottom = d
     camera.updateProjectionMatrix()
-    renderer.setSize(ls16.width, ls16.height)
+    renderer.setSize(smallest, smallest, false)
     const scale = Math.floor(Math.min(window.innerWidth / ls16.width, window.innerHeight / ls16.height))
     renderer.domElement.style.width = (ls16.width * scale) + 'px';
     renderer.domElement.style.height = (ls16.height * scale) + 'px';


@@ 39,8 51,8 @@ function resize() {
 window.addEventListener('resize', resize)
 resize()
 
-scene.add(new THREE.GridHelper(10, 10))
-new OrbitControls(camera, renderer.domElement)
+scene.add(new THREE.GridHelper(10, 5))
+// new OrbitControls(camera, renderer.domElement)
 
 const composer = new EffectComposer(renderer)
 composer.addPass(new RenderPass(scene, camera))


@@ 74,8 86,9 @@ scene.add(new THREE.DirectionalLight())
 scene.add(new THREE.AmbientLight())
 
 SCHED.add(function* () {
-    const geometry = new THREE.BoxGeometry();
-    const material = new THREE.MeshStandardMaterial({ color: paletteColors[1], wireframe: false });
+
+    const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
+    const material = new THREE.MeshStandardMaterial({ color: paletteColors[1], wireframe: true });
     const cube = new THREE.Mesh(geometry, material);
     scene.add(cube);
 


@@ 90,8 103,8 @@ SCHED.add(function* () {
 
     let t = 0
     while (true) {
-        cube.rotateX(INPUT.now.time.delta)
-        cube.rotateZ(INPUT.now.time.delta)
+        // cube.rotateX(INPUT.now.time.delta)
+        cube.rotateY(INPUT.now.time.delta)
         cube.material.color = getColor(t)
         t = (t + INPUT.now.time.delta * 0.1) % 1
         yield