add mixbox for javascript

2026-03-19 22:49:41 +01:00 · 2022-09-21 05:05:21 +02:00
parent ee38da6176
commit 4bfc462204
18 changed files with 3057 additions and 0 deletions
--- a/javascript/examples/threejs.html
+++ b/javascript/examples/threejs.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script>
+    <script src="https://scrtwpns.com/mixbox.js"></script>
+    <script>
+      var scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+      scene.background = new THREE.Color(0xffffff);
+      const renderer = new THREE.WebGLRenderer();
+      renderer.setSize( window.innerWidth, window.innerHeight );
+      document.body.appendChild( renderer.domElement );
+      
+      const geometry = new THREE.BoxGeometry();
+      var cubes = [];
+        
+      var color1 = new THREE.Color(0x002185); // blue
+      var color2 = new THREE.Color(0xfcd300); // yellow
+
+      for(var i = 0; i < 7; i++) {
+        var colorMix = mixbox.lerp(color1, color2, i / 6.0).toString();
+        const material = new THREE.MeshBasicMaterial( { color: colorMix } );
+        const cube = new THREE.Mesh( geometry, material );
+        cube.position.x = ((i / 6.0) * 2.0 - 1.0) * 4.5;
+        cube.rotation.x = i / 3.0;
+        scene.add(cube);
+        cubes.push(cube);
+      }
+
+      camera.position.z = 5;
+
+      function animate() {
+        requestAnimationFrame( animate );        
+        for(var i=0;i<7;i++) {
+          cubes[i].rotation.x += 0.01;
+          cubes[i].rotation.y += 0.01;
+        }
+        renderer.render( scene, camera );
+      }
+
+      animate();
+    </script>
+  </body>
+</html>