2 files changed, 127 insertions(+), 5 deletions(-)

A gizmos.js
M main.js

@@ 0,0 1,103 @@
+import * as THREE from "three"
+
+export default class {
+    constructor(size = 2000) {
+        const material = new THREE.LineBasicMaterial({
+            color: 0xffffff,
+            vertexColors: true
+        })
+        material.depthTest = false // hack
+
+        this.size = size
+        const geometry = new THREE.BufferGeometry()
+        const vertices = Float32Array.from(Array(size * 3).fill(0))
+        const colors = Float32Array.from(Array(size * 4).fill(1))
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 4));
+        this.vertsAttribute = geometry.getAttribute('position')
+        this.colorsAttribute = geometry.getAttribute('color')
+        this.index = 0
+
+        this.object3d = new THREE.LineSegments(geometry, material)
+        this.object3d.renderOrder = 1 // hack
+    }
+
+    reset() {
+        this.index = 0
+    }
+
+    draw() {
+        this.vertsAttribute.needsUpdate = true
+        // this.vertsAttribute.updateRange.count = index * 3
+        this.colorsAttribute.needsUpdate = true
+        // this.colorsAttribute.updateRange.count = index * 4
+        this.object3d.geometry.setDrawRange(0, this.index)
+        this.object3d.geometry.computeBoundingSphere()
+    }
+
+    line(a, b, color1 = new THREE.Color('white'), color2 = color1) {
+        if (this.index >= this.size)
+            return;
+        this.vertsAttribute.setXYZ(this.index, a.x, a.y, a.z)
+        this.vertsAttribute.setXYZ(this.index + 1, b.x, b.y, b.z)
+        this.colorsAttribute.setXYZW(this.index, color1.r, color1.g, color1.b, 1.0)
+        this.colorsAttribute.setXYZW(this.index + 1, color2.r, color2.g, color2.b, 1.0)
+        this.index += 2
+    }
+}
+
+// export const colors = {
+//     red: new THREE.Color(1, 0, 0),
+//     green: new THREE.Color(0, 1, 0),
+//     blue: new THREE.Color(0, 0, 1),
+//     white: new THREE.Color(1, 1, 1),
+//     clear: new THREE.Color(0, 0, 0)
+// }
+
+// export function init(scene, options) {
+//     options = options || {}
+//     const material = new THREE.LineBasicMaterial({
+//         color: 0xffffff,
+//         vertexColors: THREE.VertexColors
+//     })
+//     material.depthTest = false // hack
+
+//     const vertCount = options.size || 2000
+
+//     const geometry = new THREE.BufferGeometry()
+//     const vertices = Float32Array.from(Array(vertCount * 3).fill(0))
+//     const colors = Float32Array.from(Array(vertCount * 4).fill(1))
+//     geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+//     geometry.setAttribute('color', new THREE.BufferAttribute(colors, 4));
+//     vertsAttribute = geometry.getAttribute('position')
+//     colorsAttribute = geometry.getAttribute('color')
+
+//     gizmoObject = new THREE.LineSegments(geometry, material)
+//     gizmoObject.renderOrder = 1 // hack
+//     gizmoObject.userData.size = vertCount
+//     scene.add(gizmoObject)
+// }
+
+// export function reset() {
+//     index = 0
+// }
+
+// export function draw() {
+//     vertsAttribute.needsUpdate = true
+//     vertsAttribute.updateRange.count = index * 3
+//     colorsAttribute.needsUpdate = true
+//     colorsAttribute.updateRange.count = index * 4
+//     gizmoObject.geometry.setDrawRange(0, index)
+//     gizmoObject.geometry.computeBoundingSphere()
+// }
+
+// export function line(a, b, color) {
+//     if (index >= gizmoObject.userData.size)
+//         return;
+//     color = color || colors.white
+//     vertsAttribute.setXYZ(index, a.x, a.y, a.z)
+//     vertsAttribute.setXYZ(index + 1, b.x, b.y, b.z)
+//     colorsAttribute.setXYZW(index, color.r, color.g, color.b, 1.0)
+//     colorsAttribute.setXYZW(index + 1, color.r, color.g, color.b, 1.0)
+//     index += 2
+// }

@@ 6,6 6,7 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
 import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass'
+import Gizmos from "./gizmos"
 
 import ls16 from "./ls16"
 // import * as Tone from 'tone'


@@ 18,9 19,9 @@ const INPUT = new Input([
     time
 ])
 
-var scene = new THREE.Scene()
+const scene = new THREE.Scene()
 
-var camera = new THREE.OrthographicCamera()
+const camera = new THREE.OrthographicCamera()
 camera.position.set(10, 10, 10);
 camera.position.setFromSphericalCoords(
     10,


@@ 29,7 30,7 @@ camera.position.setFromSphericalCoords(
 )
 camera.lookAt(scene.position);
 
-var renderer = new THREE.WebGLRenderer()
+const renderer = new THREE.WebGLRenderer()
 document.body.appendChild(renderer.domElement)
 
 renderer.domElement.style.imageRendering = "pixelated"


@@ 54,6 55,9 @@ resize()
 scene.add(new THREE.GridHelper(10, 5))
 // new OrbitControls(camera, renderer.domElement)
 
+const GIZMOS = new Gizmos()
+scene.add(GIZMOS.object3d)
+
 const composer = new EffectComposer(renderer)
 composer.addPass(new RenderPass(scene, camera))
 composer.addPass(new OutputPass())


@@ 86,7 90,6 @@ scene.add(new THREE.DirectionalLight())
 scene.add(new THREE.AmbientLight())
 
 SCHED.add(function* () {
-
     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);


@@ 103,10 106,26 @@ SCHED.add(function* () {
 
     let t = 0
     while (true) {
+        GIZMOS.line(new THREE.Vector3(3, 0, 1.1), new THREE.Vector3(1, 0, 2), new THREE.Color('blue'))
+        GIZMOS.line(new THREE.Vector3(3, 0, 1.1), new THREE.Vector3(3, -.2, 1.1), new THREE.Color('white'))
+        GIZMOS.line(new THREE.Vector3(1, 0, 2), new THREE.Vector3(-1, 0, 1), new THREE.Color('red'))
+        GIZMOS.line(new THREE.Vector3(1, 0, 2), new THREE.Vector3(1, -.2, 2), new THREE.Color('white'))
+        GIZMOS.line(new THREE.Vector3(-1, 0, 1), new THREE.Vector3(-1.5, 0, -2), new THREE.Color('blue'))
+        GIZMOS.line(new THREE.Vector3(-1, 0, 1), new THREE.Vector3(-1,-.2, 1), new THREE.Color('white'))
+        GIZMOS.line(new THREE.Vector3(-1.5, 0, -2), new THREE.Vector3(3, 0, 1.1), new THREE.Color('yellow'))
+        GIZMOS.line(new THREE.Vector3(-1.5, 0, -2), new THREE.Vector3(-1.5, -.2, -2), new THREE.Color('white'))
         // cube.rotateX(INPUT.now.time.delta)
-        cube.rotateY(INPUT.now.time.delta)
+        // cube.rotateY(INPUT.now.time.delta * 0.25)
         cube.material.color = getColor(t)
         t = (t + INPUT.now.time.delta * 0.1) % 1
+
+        camera.position.setFromSphericalCoords(
+            10,
+            Math.PI / 3,
+            Math.PI / 4 + INPUT.now.time.now * 0.5
+        )
+        camera.lookAt(scene.position);
+        
         yield
     }
 })