drei - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/Detailed.d.ts

+import { Object3D } from 'three';
+import React from 'react';
+declare type Props = {
+    children: React.ReactElement<Object3D>[];
+    distances: number[];
+};
+export declare const Detailed: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export {};

dist/PositionalAudio.d.ts

+import React from 'react';
+declare type Props = {
+    url: string;
+    distance: number;
+    loop: boolean;
+};
+export declare const PositionalAudio: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export {};

src/Detailed.tsx

+import { LOD, Object3D } from 'three'
+import React, { forwardRef } from 'react'
+import { useUpdate, useFrame } from 'react-three-fiber'
+// @ts-ignore
+import mergeRefs from 'react-merge-refs'
+
+type Props = {
+  children: React.ReactElement<Object3D>[]
+  distances: number[]
+}
+
+export const Detailed = forwardRef(({ children, distances }: Props, ref) => {
+  const lod = useUpdate<LOD>((lod) => {
+    lod.levels.length = 0
+    lod.children.forEach((object, index) => lod.levels.push({ object, distance: distances[index] }))
+  }, [])
+  useFrame((state) => lod.current?.update(state.camera))
+  return <lOD ref={mergeRefs([lod, ref])}>{children}</lOD>
+})

src/PositionalAudio.tsx

+import { AudioLoader, AudioListener, PositionalAudio as PositionalAudioImpl } from 'three'
+import React, { forwardRef, useRef, useState, useEffect } from 'react'
+import { useThree, useLoader } from 'react-three-fiber'
+// @ts-ignore
+import mergeRefs from 'react-merge-refs'
+
+type Props = {
+  url: string
+  distance: number
+  loop: boolean
+}
+
+export const PositionalAudio = forwardRef(({ url, distance = 1, loop = true }: Props, ref) => {
+  const sound = useRef<PositionalAudioImpl>()
+  const { camera } = useThree()
+  const [listener] = useState(() => new AudioListener())
+  const buffer = useLoader(AudioLoader, url)
+  useEffect(() => {
+    sound.current?.setBuffer(buffer)
+    sound.current?.setRefDistance(distance)
+    sound.current?.setLoop(loop)
+    sound.current?.play()
+    camera.add(listener)
+    return () => void camera.remove(listener)
+  }, [])
+  return <positionalAudio ref={mergeRefs([sound, ref])} args={[listener]} />
+})

dist/MapControls.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
 }
-export declare const MapControls: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<MapControlsImpl, typeof MapControlsImpl>, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "domElement" | "enabled" | "target" | "center" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "enableKeys" | "keys" | "mouseButtons" | "touches" | "update" | "saveState" | "reset" | "getPolarAngle" | "getAzimuthalAngle" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel"> & React.RefAttributes<unknown>>;
+export declare const MapControls: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<MapControlsImpl, typeof MapControlsImpl>, "object" | "children" | "attach" | "attachArray" | "attachObject" | "args" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "update" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "domElement" | "enabled" | "target" | "center" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "enableKeys" | "keys" | "mouseButtons" | "touches" | "saveState" | "reset" | "getPolarAngle" | "getAzimuthalAngle" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel"> & React.RefAttributes<unknown>>;
 export {};

dist/OrbitControls.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
 }
-export declare const OrbitControls: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<OrbitControlsImpl, typeof OrbitControlsImpl>, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "domElement" | "enabled" | "target" | "center" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "enableKeys" | "keys" | "mouseButtons" | "touches" | "update" | "saveState" | "reset" | "getPolarAngle" | "getAzimuthalAngle" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel"> & React.RefAttributes<unknown>>;
+export declare const OrbitControls: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<OrbitControlsImpl, typeof OrbitControlsImpl>, "object" | "children" | "attach" | "attachArray" | "attachObject" | "args" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "update" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "domElement" | "enabled" | "target" | "center" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "enableKeys" | "keys" | "mouseButtons" | "touches" | "saveState" | "reset" | "getPolarAngle" | "getAzimuthalAngle" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel"> & React.RefAttributes<unknown>>;
 export {};

dist/TrackballControls.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
 }
-export declare const TrackballControls: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<TrackballControlsImpl, typeof TrackballControlsImpl>, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "domElement" | "enabled" | "target" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "keys" | "update" | "reset" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "screen" | "noRotate" | "noZoom" | "noPan" | "noRoll" | "staticMoving" | "dynamicDampingFactor" | "position0" | "target0" | "up0" | "checkDistances" | "zoomCamera" | "panCamera" | "rotateCamera" | "handleResize"> & React.RefAttributes<unknown>>;
+export declare const TrackballControls: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<TrackballControlsImpl, typeof TrackballControlsImpl>, "object" | "children" | "attach" | "attachArray" | "attachObject" | "args" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "update" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "domElement" | "enabled" | "target" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "keys" | "reset" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "screen" | "noRotate" | "noZoom" | "noPan" | "noRoll" | "staticMoving" | "dynamicDampingFactor" | "position0" | "target0" | "up0" | "checkDistances" | "zoomCamera" | "panCamera" | "rotateCamera" | "handleResize"> & React.RefAttributes<unknown>>;
 export {};

dist/TransformControls.d.ts

@@ -15,3 +15,3 @@ import { Object3D } from 'three';
     children: React.ReactElement<Object3D, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
-} & Pick<import("react-three-fiber").Overwrite<Partial<TransformControlsImpl>, ReactThreeFiber.NodeProps<TransformControlsImpl, typeof TransformControlsImpl>>, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "ref" | "key" | "onUpdate" | "domElement" | "enabled" | "mouseButtons" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "camera" | "quaternion" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "size" | "dragging" | "showX" | "showY" | "showZ" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setSize" | "setSpace" | "id" | "uuid" | "name" | "type" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "layers" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy"> & {
+} & Pick<import("react-three-fiber").Overwrite<Partial<TransformControlsImpl>, ReactThreeFiber.NodeProps<TransformControlsImpl, typeof TransformControlsImpl>>, "object" | "children" | "ref" | "attach" | "attachArray" | "attachObject" | "args" | "key" | "onUpdate" | "type" | "raycast" | "toJSON" | "id" | "uuid" | "name" | "parent" | "quaternion" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "layers" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "camera" | "domElement" | "enabled" | "mouseButtons" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "size" | "dragging" | "showX" | "showY" | "showZ" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setSize" | "setSpace"> & {
     position?: import("three").Vector3 | [number, number, number] | undefined;
@@ -23,3 +23,3 @@ up?: import("three").Vector3 | [number, number, number] | undefined;
     dispose?: (() => void) | null | undefined;
-} & ReactThreeFiber.Events, "object" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "domElement" | "enabled" | "mouseButtons" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "camera" | "quaternion" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "size" | "dragging" | "showX" | "showY" | "showZ" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setSize" | "setSpace" | "id" | "uuid" | "name" | "type" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "layers" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy"> & React.RefAttributes<unknown>>;
+} & ReactThreeFiber.Events, "object" | "children" | "attach" | "attachArray" | "attachObject" | "args" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "type" | "raycast" | "toJSON" | "id" | "uuid" | "name" | "parent" | "quaternion" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "layers" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "camera" | "domElement" | "enabled" | "mouseButtons" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "size" | "dragging" | "showX" | "showY" | "showZ" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setSize" | "setSpace"> & React.RefAttributes<unknown>>;
 export {};

package.json

 {
   "name": "drei",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "useful add-ons for react-three-fiber",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

README.md

 [![Build Status](https://travis-ci.org/react-spring/drei.svg?branch=master)](https://travis-ci.org/react-spring/drei) [![npm version](https://badge.fury.io/js/drei.svg)](https://badge.fury.io/js/drei) ![npm](https://img.shields.io/npm/dt/drei.svg)
 
-This is a collection of useful helpers and abstractions for [react-three-fiber](https://github.com/react-spring/react-three-fiber), saving you some boilerplate.
+This is a growing collection of useful helpers and abstractions for [react-three-fiber](https://github.com/react-spring/react-three-fiber), saving you some boilerplate.
 
@@ -13,6 +13,37 @@ yarn add drei
 
+#### Controls
+
 - [x] OrbitControls, `<OrbitControls enableDamping ... />`
 - [x] MapControls, `<MapControls enableDamping ... />`
 - [x] TrackballControls, `<TrackballControls ... />`
-- [x] TransformControls, `<TransformControls ... >{child}</TransformControls>`
+- [x] TransformControls
+
+```jsx
+<TransformControls>
+  <mesh />
+</TransformControls>
+```
+
+#### Abstractions
+
+- [x] Detailed, a wrapper around THREE.LOD (Level of detail)
+
+```jsx
+<Detailed distances={[0, 10, 20]}>
+  <mesh />
+  <mesh />
+  <mesh />
+</Detailed>
+```
+
+- [x] PositionalAudo, a wrapper around THREE.PositionalAudio
+
+```jsx
+<mesh>
+  <PositionalAudo url="/song.mp3" />
+</mesh>
+```
+
+#### Misc
+
 - [x] draco, `useLoader(GLTFLoader, url, draco())`
@@ -24,7 +55,7 @@
 
-### Requirements
+#### Requirements
 
 - Types
-- ForwardRefs if possible, so that objects can be referenced
-- Invalidate frames on any movement
-- Cleanup on unmount, no left-overs
+- ForwardRefs if possible, so that objects can be referenced back
+- Invalidate frames on any movement for those using invalidateFrameloop
+- Cleanup on unmount, no left-overs, restore previous states

No alert changes

Improved metrics

Total package byte prevSize

30968

8.77%

Number of package files

24

20%

Lines of code

560

11.55%

Number of lines in readme file

60

106.9%

No dependency changes