1 files changed, 37 insertions(+), 28 deletions(-)

M main.js

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


@@ 52,39 52,48 @@ new THREE.TextureLoader().load(ls16.palette, palette => {
 })
 
 const paletteColors = [
-    0xff032b,
-    0x800034,
-    0xffff0d,
-    0xff8f00,
-    0x0aff0a,
-    0x007062,
-    0x0dffff,
-    0x3c80db,
-    0x2929ff,
-    0x2d006e,
-    0xff08ff,
-    0x6e0085,
-    0x260a34,
-    0x000000,
-    0xffffff,
-    0x7d7da3,
+    new THREE.Color(0xff032b),
+    new THREE.Color(0x800034),
+    new THREE.Color(0xffff0d),
+    new THREE.Color(0xff8f00),
+    new THREE.Color(0x0aff0a),
+    new THREE.Color(0x007062),
+    new THREE.Color(0x0dffff),
+    new THREE.Color(0x3c80db),
+    new THREE.Color(0x2929ff),
+    new THREE.Color(0x2d006e),
+    new THREE.Color(0xff08ff),
+    new THREE.Color(0x6e0085),
+    new THREE.Color(0x260a34),
+    new THREE.Color(0x000000),
+    new THREE.Color(0xffffff),
+    new THREE.Color(0x7d7da3),
 ]
 
+scene.add(new THREE.DirectionalLight())
+scene.add(new THREE.AmbientLight())
+
 SCHED.add(function* () {
-    const s = 0.39
-    let x = -3
-    for (const color of paletteColors) {
-        const geometry = new THREE.BoxGeometry(s, s, s);
-        const material = new THREE.MeshBasicMaterial({ color });
-        const cube = new THREE.Mesh(geometry, material);
-        cube.position.x = x
-        x += s
-        scene.add(cube);
+    const geometry = new THREE.BoxGeometry();
+    const material = new THREE.MeshStandardMaterial({ color: paletteColors[1], wireframe: false });
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    function getColor(t, colors = paletteColors) {
+        const l = colors.length - 1
+        const tt = t * l
+        const a = tt - Math.floor(tt)
+        const i = Math.floor(tt)
+        const j = Math.ceil(tt) == i ? i + 1 : Math.ceil(tt)
+        return new THREE.Color().lerpColors(colors[i], colors[j], a)
     }
 
+    let t = 0
     while (true) {
-        // cube.rotateX(INPUT.now.time.delta)
-        // cube.rotateZ(INPUT.now.time.delta)
+        cube.rotateX(INPUT.now.time.delta)
+        cube.rotateZ(INPUT.now.time.delta)
+        cube.material.color = getColor(t)
+        t = (t + INPUT.now.time.delta * 0.1) % 1
         yield
     }
 })