three-inspect
所属分类：调试/Bug
开发工具：TypeScript
文件大小：0KB
下载次数：0
上传日期：2023-12-05 14:33:11
上 传 者：
sh-1993
说明： three.js的检查器和调试器
(An inspector and debugger for three.js)
文件列表:
.changeset/ (0, 2023-12-10)
.changeset/config.json (262, 2023-12-10)
.eslintrc.cjs (3028, 2023-12-10)
.npmrc (43, 2023-12-10)
.prettierignore (160, 2023-12-10)
.prettierrc.json (556, 2023-12-10)
CHANGELOG.md (511, 2023-12-10)
LICENSE (1070, 2023-12-10)
package-lock.json (442315, 2023-12-10)
package.json (2277, 2023-12-10)
postcss.config.cjs (56, 2023-12-10)
src/ (0, 2023-12-10)
src/app.d.ts (240, 2023-12-10)
src/app.html (437, 2023-12-10)
src/lib/ (0, 2023-12-10)
src/lib/Inspector.svelte (611, 2023-12-10)
src/lib/Threlte.svelte (691, 2023-12-10)
src/lib/Vanilla.svelte (485, 2023-12-10)
src/lib/components/ (0, 2023-12-10)
src/lib/components/App.svelte (1883, 2023-12-10)
src/lib/components/Bindings/ (0, 2023-12-10)
src/lib/components/Bindings/Bindings.svelte (1985, 2023-12-10)
src/lib/components/Bindings/Camera.svelte (789, 2023-12-10)
src/lib/components/Bindings/Color.svelte (381, 2023-12-10)
src/lib/components/Bindings/Light.svelte (1800, 2023-12-10)
src/lib/components/Bindings/Material.svelte (6143, 2023-12-10)
src/lib/components/Bindings/Scene.svelte (1595, 2023-12-10)
src/lib/components/Bindings/Shadow.svelte (929, 2023-12-10)
src/lib/components/Bindings/Textures.svelte (3786, 2023-12-10)
src/lib/components/Bindings/Transform/ (0, 2023-12-10)
src/lib/components/Bindings/Transform/Instance.svelte (1023, 2023-12-10)
src/lib/components/Bindings/Transform/Transform.svelte (670, 2023-12-10)
src/lib/components/Internal/ (0, 2023-12-10)
src/lib/components/Internal/CameraControls.svelte (1053, 2023-12-10)
... ...
# three-inspect
`three-inspect` is an inspector for Three.js projects. It is designed to be minimalistic, powerful, and extensible, with little boilerplate required.
Currently, it covers:
* Creating a view of the scene graph and editing object properties, such as materials, transforms, etc.
* Viewing / editing textures.
* Scene helpers (Grid / Axes).
* Showing and editing shaders.
* Performance monitoring (resources, framerate, memory, capabilities, misc. stats).
* Light helpers, shadow camera helpers.
* Postprocessing (only [pmndrs/postprocessing](https://github.com/pmndrs/postprocessing) is supported).
`three-inspect` uses [Tweakpane](https://cocopon.github.io/tweakpane/) <3 for its input UI .
### Getting started
```bash
npm i -D three-inspect
```
Then, in your project, create the inspector:
```ts
import Inspector from 'three-inspect'
/**
* This should be a conditional that is compiled away
* when building for production to ensure tree-shaking.
*/
if (devMode) {
const inspector = new Inspector({
scene,
camera,
renderer,
composer /* optional */
options: { /* optional */
location: 'right' /* can be 'right' or 'overlay'. Default: 'right' */
}
})
/**
* To get access to camera inspection, your camera must be in the scene.
*/
scene.add(camera)
/**
* Call this when you wish to remove the inspector,
* or re-init it with a new scene, camera, etc.
*/
inspector.dispose()
}
```
Creating the inspector will add hooks to `THEE.Object3D.add()` and `remove()` methods so that all objects are automatically registered / deregisterd.
### Extending
By default, the inspector only comes with a "World" pane. Additional panes can be added:
```ts
const pane = inspector.addPane('Game')
pane.addInput(parameters, 'scale').on('change', () => {
mesh.scale.setScalar(parameters.scale)
})
```
This allows you to directly interact with the Tweakpane API.
### Plugins
It's possible to create a plugin for `three-inspect`:
```ts
const myPlugin = (inspector: Inspector) => {
// Create some inputs and folders...
return () => {
// A dispose function.
}
}
// Then, as the user of the plugin...
inspector.registerPlugin(myPlugin)
```
### React Three Fiber Usage
```ts
import * as React from 'react'
import { useThree } from '@react-three/fiber'
import Inspector from 'three-inspect'
function App() {
const state = useThree()
const inspector = React.useEffect(() => {
const { dispose } = new Inspector({
scene: state.scene,
camera: state.camera,
renderer: state.gl,
})
return () => dispose()
}), [state.scene, state.camera])
...
```
### Threlte usage
```html
```
近期下载者：
相关文件：
收藏者：