{"_id":"@dreamoment/detective","name":"@dreamoment/detective","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@dreamoment/detective","version":"0.0.1","type":"module","types":"dist/index.d.ts","main":"dist/index.es.js","author":{"name":"dreamoment-npm"},"license":"MIT","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"scripts":{"dev":"vite","build:example":"vue-tsc && vite build --mode example","build:lib":"vue-tsc && vite build --mode lib","publish:patch":"npm version patch && npm publish"},"devDependencies":{"@types/node":"^20.10.5","@types/three":"^0.160.0","@vitejs/plugin-vue":"^4.5.2","typescript":"^5.2.2","vite":"^5.0.8","vite-plugin-dts":"^3.6.4","vue":"^3.3.11","vue-tsc":"^1.8.25"},"dependencies":{"normalize.css":"^8.0.1","three":"^0.160.0"},"_id":"@dreamoment/detective@0.0.1","gitHead":"e71e0e87c4ab2f4b553a1501613f3cfc277d3484","description":"<h1 align=\"center\">detective</h1>","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-JJ0UdOxegicfwAb7bb9agFcXMGx1qOrVP3KgekBhIqx4uOPmufzdUu9gd+xnOZZ/pMTxxkas+r2HRth5QLDNEA==","shasum":"d86766a3b5ea31721a8b580e71fc2d99022daa5c","tarball":"https://registry.npmjs.org/@dreamoment/detective/-/detective-0.0.1.tgz","fileCount":8,"unpackedSize":917783,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDs64jNaf8eIxq5DC8rlkU4aDQormVSzkP6Up8y28RXkQIhAPtlgncnNZEL6j2y6fsnnW8B2Niswt0QWXZtU8hooStK"}]},"_npmUser":{"name":"dreamoment-npm","email":"dasu709394@qq.com"},"directories":{},"maintainers":[{"name":"dreamoment-npm","email":"dasu709394@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/detective_0.0.1_1703872035385_0.9296023524525892"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-29T17:47:15.259Z","0.0.1":"2023-12-29T17:47:15.650Z","modified":"2023-12-29T17:47:15.917Z"},"maintainers":[{"name":"dreamoment-npm","email":"dasu709394@qq.com"}],"description":"<h1 align=\"center\">detective</h1>","author":{"name":"dreamoment-npm"},"license":"MIT","readme":"<h1 align=\"center\">detective</h1>\r\n\r\n![](/docs/preview.gif)\r\n\r\nLanguage: English | [中文简体](README_zh_cn.md)\r\n\r\n## What is detective ?\r\n\r\n`threejs` performance monitor provides a variety of 3D information to help developers analyze.\r\n\r\n> This plugin conflicts with the `threejs` development tool (such as: [three-devtools](https://github.com/threejs/three-devtools)), Because of competing for the right to use `window.__THREE_DEVTOOLS__`. Therefore, do not allow them to coexist in the same runtime environment.\r\n\r\n## Features\r\n\r\n- lightweight and easy to use\r\n\r\n- monitor panel exists in new TAB, high freedom\r\n\r\n- support monitoring of custom attributes\r\n\r\n- support `typescript`\r\n\r\n## Install\r\n\r\n```\r\nnpm i @dreamoment/detective\r\n```\r\n\r\n## Examples\r\n\r\n```\r\nimport * as THREE from 'three'\r\nimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'\r\nimport Detective from \"@dreamoment/detective\"\r\n\r\n\r\nconst scene = new THREE.Scene()\r\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000 )\r\nconst ambientLight = new THREE.AmbientLight(0xffffff)\r\nconst directionalLight = new THREE.DirectionalLight(0xffffff)\r\ndirectionalLight.position.set(1, 1, 1)\r\nscene.add(ambientLight, directionalLight)\r\n\r\nconst renderer = new THREE.WebGLRenderer()\r\nrenderer.setSize(window.innerWidth, window.innerHeight)\r\ndocument.body.appendChild(renderer.domElement)\r\n\r\nconst controls = new OrbitControls(camera, renderer.domElement)\r\n\r\ncamera.position.set(5, 5, 5)\r\n\r\nconst geometry = new THREE.BoxGeometry(1, 1, 1)\r\nconst material = new THREE.MeshStandardMaterial()\r\nconst material1 = new THREE.MeshStandardMaterial()\r\nconst cube = new THREE.Mesh(geometry, material)\r\nconst cube1 = new THREE.Mesh(geometry, material1)\r\nscene.add(cube, cube1)\r\n\r\n\r\nconst detective = new Detective(renderer)\r\n\r\n// extend the custom prop\r\nconst extensionRef1 = detective.ref(camera.position, 'x')\r\nconst extensionRef2 = detective.ref(camera.position, 'y')\r\nconst extensionRef3 = detective.ref(camera.position, 'z')\r\ndetective.extend('CameraPosX', extensionRef1)\r\ndetective.extend('CameraPosY', extensionRef2)\r\ndetective.extend('CameraPosZ', extensionRef3)\r\n\r\nconst animate = () => {\r\n  controls.update()\r\n  detective.update()\r\n  renderer.render(scene, camera)\r\n}\r\n\r\nconst onWindowResize = () => {\r\n  camera.aspect = window.innerWidth / window.innerHeight\r\n  camera.updateProjectionMatrix()\r\n  renderer.setSize(window.innerWidth, window.innerHeight)\r\n}\r\n\r\nwindow.addEventListener('resize', onWindowResize)\r\n\r\nrenderer.setAnimationLoop(animate)\r\n```\r\n\r\n## API\r\n\r\n```\r\nnew Detective(renderer: THREE.WebGLRenderer)\r\n```\r\n\r\n### update\r\n\r\nUpdate internal status. Should always be used in the render loop.\r\n\r\n```\r\nupdate(): void\r\n```\r\n\r\n### ref\r\n\r\nCreates an object property reference as a parameter to the `extend` method.\r\n\r\n```\r\nref(ref: any, prop: string): ExtensionRef\r\n```\r\n\r\n### extend\r\n\r\nExtend a custom property so that it can be monitored.\r\n\r\n```\r\nextend(name: string, extensionRef: ExtensionRef): Detective\r\n```","readmeFilename":"README.md"}