Lock threejs version to keep in sync with example-project

example-project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renin-example-project",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "private": true,
   "scripts": {
@@ -9,14 +9,14 @@
     "serve": "vite preview"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "*",
-    "typescript": "*",
-    "vite": "*",
-    "vite-plugin-string": "*"
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1",
+    "vite-plugin-string": "^1.2.1"
   },
   "dependencies": {
-    "@types/three": "*",
-    "renin": "*",
-    "three": "*"
+    "@types/three": "~0.149.0",
+    "renin": "^2.2.1",
+    "three": "~0.149.0"
   }
 }

example-project/src/SpinningDonut.ts

@@ -12,7 +12,7 @@ import {
   Scene,
   sRGBEncoding,
   TextureLoader,
-  TorusBufferGeometry,
+  TorusGeometry,
   WebGLRenderer,
   WebGLRenderTarget,
 } from 'three';
@@ -46,7 +46,7 @@ export class SpinningDonut extends ReninNode {
     envMapTexture.encoding = sRGBEncoding;
 
     this.cube = new Mesh(
-      new TorusBufferGeometry(2, 1, 64, 64),
+      new TorusGeometry(2, 1, 64, 64),
       new MeshPhysicalMaterial({
         clearcoat: 1,
         envMap: envMapTexture,

example-project/src/main.ts

@@ -9,13 +9,16 @@ export const renin = new Renin({
     bpm: 114,
     subdivision: 12,
     beatOffset: 4,
+    beatsPerBar: 4,
   },
   root: PostFx,
   productionMode: import.meta.env.PROD,
   rendererOptions: {
     powerPreference: 'high-performance',
   },
   toneMapping: ACESFilmicToneMapping,
+  maxWidth: 1920,
+  maxHeight: 1080,
 });
 
 renin.loop();

example-project/vite.config.js

@@ -7,7 +7,7 @@ export default defineConfig({
   plugins: [
     reninPlugin(),
     nodeResolve(),
-    vitePluginString.default({
+    vitePluginString({
       include: ['**/*.vs', '**/*.fs', '**/*.vert', '**/*.frag', '**/*.glsl'],
       compress: false,
     }),

renin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renin",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "bin": "cli",
   "module": "lib/renin.js",
   "files": [
@@ -13,7 +13,7 @@
     "@betit/rollup-plugin-rename-extensions": "^0.1.0",
     "@rollup/plugin-typescript": "^9.0.1",
     "@types/node": "^18.11.0",
-    "@types/three": "^0.144.0",
+    "@types/three": "~0.149.0",
     "prettier": "^2.7.1",
     "rollup": "^2.70.2",
     "rollup-plugin-import-css": "^3.0.3",

renin/src/ui/AudioBar.ts

@@ -7,7 +7,6 @@ import {
   RepeatWrapping,
   Texture,
   ShaderMaterial,
-  BoxBufferGeometry,
   sRGBEncoding,
 } from 'three';
 import { colors } from './colors';
@@ -25,7 +24,7 @@ const boxHeight = 40;
 const boxPadding = 8;
 const glowSize = 12;
 
-const boxBufferGeometry = new BoxBufferGeometry();
+const boxGeometry = new BoxGeometry();
 
 const uiboxStore: { [key: string]: UIBox } = {};
 const getUIBox = (name: string) => {
@@ -299,7 +298,7 @@ export class AudioBar {
     this.audioBar.setSize(1, barHeight);
     this.obj.add(this.audioBar.object3d);
     this.audioTrack = new Mesh(
-      boxBufferGeometry,
+      boxGeometry,
       new MeshBasicMaterial({
         map: new CanvasTexture(gradientCanvas),
         color: colors.green._500,
@@ -314,19 +313,19 @@ export class AudioBar {
       this.audioTrack.material.map.wrapS = RepeatWrapping;
       this.audioTrack.material.map.wrapT = RepeatWrapping;
     }
-    const line = new Mesh(boxBufferGeometry, new MeshBasicMaterial({ color: colors.green._500 }));
+    const line = new Mesh(boxGeometry, new MeshBasicMaterial({ color: colors.green._500 }));
     line.position.x = 0.5;
     line.scale.x = 2 / glowSize;
     this.audioTrack.add(line);
     this.cuePoints = [
       new Mesh(
-        boxBufferGeometry,
+        boxGeometry,
         new MeshBasicMaterial({
           color: colors.orange._500,
         })
       ),
       new Mesh(
-        boxBufferGeometry,
+        boxGeometry,
         new MeshBasicMaterial({
           color: colors.orange._300,
         })

renin/src/ui/UIBox.ts

@@ -1,5 +1,5 @@
 import {
-  BoxBufferGeometry,
+  BoxGeometry,
   BufferAttribute,
   BufferGeometry,
   Material,
@@ -119,12 +119,12 @@ export function makeRoundedRectangleBufferGeometry(
   return geometry;
 }
 
-const geometry = new BoxBufferGeometry();
+const geometry = new BoxGeometry();
 
 export class UIBox<MaterialType extends Material = MeshBasicMaterial> {
   object3d = new Object3D();
   private mesh: Mesh<BufferGeometry, MaterialType>;
-  private shadow: Mesh<BoxBufferGeometry, RawShaderMaterial>;
+  private shadow: Mesh<BoxGeometry, RawShaderMaterial>;
   options: UIBoxOptions<MaterialType>;
 
   constructor(options: Partial<UIBoxOptions<MaterialType>>) {