drei - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/index.cjs.js

@@ -224,2 +224,31 @@ 'use strict';
 
+var PerspectiveCamera = React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      _ref$makeDefault = _ref.makeDefault,
+      makeDefault = _ref$makeDefault === void 0 ? true : _ref$makeDefault,
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "makeDefault"]);
+
+  var _useThree = reactThreeFiber.useThree(),
+      setDefaultCamera = _useThree.setDefaultCamera,
+      camera = _useThree.camera,
+      size = _useThree.size;
+
+  var cameraRef = reactThreeFiber.useUpdate(function (cam) {
+    cam.aspect = size.width / size.height;
+    cam.updateProjectionMatrix();
+  }, [size, props]);
+  React.useLayoutEffect(function () {
+    if (makeDefault) {
+      var oldCam = camera;
+      setDefaultCamera(cameraRef.current);
+      return function () {
+        return setDefaultCamera(oldCam);
+      };
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement("perspectiveCamera", _extends({}, props, {
+    ref: mergeRefs([cameraRef, ref])
+  }), children);
+});
+
 function draco(url) {
@@ -240,2 +269,3 @@ if (url === void 0) {
 exports.OrbitControls = OrbitControls;
+exports.PerspectiveCamera = PerspectiveCamera;
 exports.PositionalAudio = PositionalAudio;
@@ -242,0 +272,0 @@ exports.TrackballControls = TrackballControls;

dist/index.d.ts

@@ -7,2 +7,3 @@ export * from './OrbitControls';
 export * from './PositionalAudio';
+export * from './PerspectiveCamera';
 export * from './draco';

dist/index.js

@@ -198,2 +198,30 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 
+const PerspectiveCamera = forwardRef((_ref, ref) => {
+  let {
+    children,
+    makeDefault = true
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "makeDefault"]);
+
+  const {
+    setDefaultCamera,
+    camera,
+    size
+  } = useThree();
+  const cameraRef = useUpdate(cam => {
+    cam.aspect = size.width / size.height;
+    cam.updateProjectionMatrix();
+  }, [size, props]);
+  useLayoutEffect(() => {
+    if (makeDefault) {
+      const oldCam = camera;
+      setDefaultCamera(cameraRef.current);
+      return () => setDefaultCamera(oldCam);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("perspectiveCamera", _extends({}, props, {
+    ref: mergeRefs([cameraRef, ref])
+  }), children);
+});
+
 function draco(url = '/draco-gltf/') {
@@ -207,2 +235,2 @@ return loader => {
 
-export { Detailed, MapControls, OrbitControls, PositionalAudio, TrackballControls, TransformControls, draco };
+export { Detailed, MapControls, OrbitControls, PerspectiveCamera, PositionalAudio, TrackballControls, TransformControls, draco };

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" | "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"> & {
+} & 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" | "size" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "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" | "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>>;
+} & 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" | "size" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "dragging" | "showX" | "showY" | "showZ" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setSize" | "setSpace"> & React.RefAttributes<unknown>>;
 export {};

package.json

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

README.md

@@ -13,10 +13,20 @@ [![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)
 
+#### Cameras
+
+- [x] `<PerspectiveCamera makeDefault=true />`, can take children (which are then moved w/ the cam)
+
+```jsx
+<PerspectiveCamera>
+  <mesh />
+</PerspectiveCamera>
+```
+
 #### Controls
 
-All controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop`.
+All controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag.
 
-- [x] `<OrbitControls />`
-- [x] `<MapControls />`
+- [x] `<OrbitControls enableDamping=true />` | [sandbox](https://codesandbox.io/s/r3f-contact-shadow-h5xcw)
+- [x] `<MapControls enableDamping=true />` | [sandbox](https://codesandbox.io/s/react-three-fiber-map-mkq8e)
 - [x] `<TrackballControls />`
-- [x] `<TransformControls />`
+- [x] `<TransformControls />` | [sandbox](https://codesandbox.io/s/r3f-drei-transformcontrols-hc8gm)
 
@@ -41,3 +51,3 @@ ```jsx
 
-- [x] `<PositionalAudio />`, a wrapper around THREE.PositionalAudio | [sandbox](https://codesandbox.io/s/r3f-drei-positionalaudio-yi1o0)
+- [x] `<PositionalAudio distance=1 loop=true/>`, a wrapper around THREE.PositionalAudio | [sandbox](https://codesandbox.io/s/r3f-drei-positionalaudio-yi1o0)
 
@@ -52,3 +62,3 @@ ```jsx
 
-- [x] `draco(url = "/draco-gtltf/")`, adds Draco extension to GLTFLoader
+- [x] `draco(url = "/draco-gtltf/")`, adds Draco extension to GLTFLoader | [sandbox](https://codesandbox.io/s/r3f-contact-shadow-h5xcw)
 
@@ -55,0 +65,0 @@ ```jsx

src/index.ts

@@ -7,2 +7,3 @@ export * from './OrbitControls'
 export * from './PositionalAudio'
+export * from './PerspectiveCamera'
 export * from './draco'

No alert changes

Improved metrics

Total package byte prevSize

46222

increased by13.87%

Number of package files

26

increased by8.33%

Lines of code

897

increased by12.69%

Number of lines in readme file

76

increased by15.15%

No dependency changes