diff --git a/package.json b/package.json index 779dd82..942878b 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "vite-plugin-restart": "^0.4.2" }, "dependencies": { + "gsap": "^3.15.0", + "lil-gui": "^0.21.0", "three": "^0.174.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 526cf8e..2d55499 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,12 @@ importers: .: dependencies: + gsap: + specifier: ^3.15.0 + version: 3.15.0 + lil-gui: + specifier: ^0.21.0 + version: 0.21.0 three: specifier: ^0.174.0 version: 0.174.0 @@ -352,10 +358,16 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] + gsap@3.15.0: + resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==} + is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} + lil-gui@0.21.0: + resolution: {integrity: sha512-tpvxN7v1GvE/Tv+GRopfOp0W7fVEjF4PltkuX8vOCIfim22rD1ztvfkoEMcv9lzQeuNUSeIrUmUjBwmlW/oUew==} + micromatch@4.0.8: resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} engines: {node: '>=8.6'} @@ -649,8 +661,12 @@ snapshots: fsevents@2.3.3: optional: true + gsap@3.15.0: {} + is-number@7.0.0: {} + lil-gui@0.21.0: {} + micromatch@4.0.8: dependencies: braces: 3.0.3 diff --git a/src/script.js b/src/script.js index f802f7c..037310a 100644 --- a/src/script.js +++ b/src/script.js @@ -1,6 +1,14 @@ import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { Timer } from 'three/examples/jsm/misc/Timer.js'; +import { gsap } from 'gsap'; +import GUI from 'lil-gui'; + +/** + * Debug + */ +const gui = new GUI(); +const debugObject = {}; /** * Base @@ -13,7 +21,7 @@ const scene = new THREE.Scene(); /** * Object - */ +*/ const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2); // const positionsArray = new Float32Array([ @@ -24,11 +32,33 @@ const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2); // const geometry = new THREE.BufferGeometry(); // geometry.setAttribute('position', new THREE.BufferAttribute(positionsArray, 3)); +debugObject.color = '#ffffff'; -const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); +const material = new THREE.MeshBasicMaterial({ color: debugObject.color, wireframe: true }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); +gui.add(mesh.position, 'y').min(-3).max(3).step(0.01).name('elevation'); +gui.add(material, 'wireframe'); +gui.add(mesh, 'visible').name('isVisible'); +gui.addColor(debugObject, 'color').onChange(() => +{ + material.color.set(debugObject.color); +}); + +debugObject.spin = () => +{ + gsap.to(mesh.rotation, { duration: 1, y: mesh.rotation.y + Math.PI * 2 }); +}; +gui.add(debugObject, 'spin'); + +debugObject.subdivision = 2; +gui.add(debugObject, 'subdivision').min(1).max(20).step(1).onFinishChange(() => +{ + mesh.geometry.dispose(); + mesh.geometry = new THREE.BoxGeometry(1, 1, 1, debugObject.subdivision, debugObject.subdivision, debugObject.subdivision); +}); + /** * Sizes */