()
| 6 | import SceneInit from './lib/SceneInit'; |
| 7 | |
| 8 | function App() { |
| 9 | useEffect(() => { |
| 10 | const test = new SceneInit('myThreeJsCanvas'); |
| 11 | test.initialize(); |
| 12 | test.animate(); |
| 13 | |
| 14 | const boxGeometry = new THREE.BoxGeometry(24, 24, 24); |
| 15 | const boxMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 }); |
| 16 | const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial); |
| 17 | test.scene.add(boxMesh); |
| 18 | |
| 19 | // PART 1 - Initialize |
| 20 | const gui = new GUI(); |
| 21 | |
| 22 | // PART 2 - Changing Geometry (scale, rotation) |
| 23 | // gui.add(boxMesh.rotation, 'x', 0, Math.PI).name('Rotate X Axis'); |
| 24 | // gui.add(boxMesh.rotation, 'y', 0, Math.PI).name('Rotate Y Axis'); |
| 25 | // gui.add(boxMesh.rotation, 'z', 0, Math.PI).name('Rotate Z Axis'); |
| 26 | // gui.add(boxMesh.scale, 'x', 0, 2).name('Scale X Axis'); |
| 27 | // gui.add(boxMesh.scale, 'y', 0, 2).name('Scale Y Axis'); |
| 28 | // gui.add(boxMesh.scale, 'z', 0, 2).name('Scale Z Axis'); |
| 29 | |
| 30 | // PART 3 - Updating Material (color, wireframe) |
| 31 | // const materialParams = { |
| 32 | // boxMeshColor: boxMesh.material.color.getHex(), |
| 33 | // }; |
| 34 | // gui.add(boxMesh.material, 'wireframe'); |
| 35 | // gui |
| 36 | // .addColor(materialParams, 'boxMeshColor') |
| 37 | // .onChange((value) => boxMesh.material.color.set(value)); |
| 38 | |
| 39 | // PART 4 - Refactor GUI with Folders |
| 40 | const geometryFolder = gui.addFolder('Mesh Geometry'); |
| 41 | geometryFolder.open(); |
| 42 | const rotationFolder = geometryFolder.addFolder('Rotation'); |
| 43 | rotationFolder.add(boxMesh.rotation, 'x', 0, Math.PI).name('Rotate X Axis'); |
| 44 | rotationFolder.add(boxMesh.rotation, 'y', 0, Math.PI).name('Rotate Y Axis'); |
| 45 | rotationFolder.add(boxMesh.rotation, 'z', 0, Math.PI).name('Rotate Z Axis'); |
| 46 | const scaleFolder = geometryFolder.addFolder('Scale'); |
| 47 | scaleFolder.add(boxMesh.scale, 'x', 0, 2).name('Scale X Axis'); |
| 48 | scaleFolder.add(boxMesh.scale, 'y', 0, 2).name('Scale Y Axis'); |
| 49 | scaleFolder.add(boxMesh.scale, 'z', 0, 2).name('Scale Z Axis'); |
| 50 | scaleFolder.open(); |
| 51 | |
| 52 | const materialFolder = gui.addFolder('Mesh Material'); |
| 53 | const materialParams = { |
| 54 | boxMeshColor: boxMesh.material.color.getHex(), |
| 55 | }; |
| 56 | materialFolder.add(boxMesh.material, 'wireframe'); |
| 57 | materialFolder |
| 58 | .addColor(materialParams, 'boxMeshColor') |
| 59 | .onChange((value) => boxMesh.material.color.set(value)); |
| 60 | |
| 61 | // PART 5 - Custom Function |
| 62 | // const customFunctionFolder = gui.addFolder('Custom Function'); |
| 63 | // customFunctionFolder.open(); |
| 64 | // const customParams = { |
| 65 | // printHello: false, |
nothing calls this directly
no test coverage detected