drei - npm Package Compare versions

Comparing version 0.0.26 to 0.0.27

dist/index.cjs.js

@@ -262,2 +262,34 @@ 'use strict';
 
+var OrthographicCamera = 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) {
+    return 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("orthographicCamera", _extends({
+    left: size.width / -2,
+    right: size.width / 2,
+    top: size.height / 2,
+    bottom: size.height / -2,
+    ref: mergeRefs([cameraRef, ref])
+  }, props), children);
+});
+
 function StandardEffects(_ref) {
@@ -528,2 +560,3 @@ var _ref$smaa = _ref.smaa,
 exports.OrbitControls = OrbitControls;
+exports.OrthographicCamera = OrthographicCamera;
 exports.PerspectiveCamera = PerspectiveCamera;
@@ -530,0 +563,0 @@ exports.PositionalAudio = PositionalAudio;

dist/index.d.ts

@@ -8,2 +8,3 @@ export * from './OrbitControls';
 export * from './PerspectiveCamera';
+export * from './OrthographicCamera';
 export * from './StandardEffects';
@@ -10,0 +11,0 @@ export * from './HTML';

dist/index.js

@@ -9,3 +9,3 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import { TransformControls as TransformControls$1 } from 'three/examples/jsm/controls/TransformControls';
-import { AudioListener, AudioLoader, HalfFloatType, Vector3, PerspectiveCamera as PerspectiveCamera$1, OrthographicCamera } from 'three';
+import { AudioListener, AudioLoader, HalfFloatType, Vector3, PerspectiveCamera as PerspectiveCamera$1, OrthographicCamera as OrthographicCamera$1 } from 'three';
 import { SMAAImageLoader, EffectComposer, RenderPass, SMAAEffect, NormalPass, SSAOEffect, BlendFunction, BloomEffect, KernelSize, EffectPass } from 'postprocessing';
@@ -237,2 +237,31 @@ import ReactDOM from 'react-dom';
 
+const OrthographicCamera = forwardRef((_ref, ref) => {
+  let {
+    children,
+    makeDefault = true
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "makeDefault"]);
+
+  const {
+    setDefaultCamera,
+    camera,
+    size
+  } = useThree();
+  const cameraRef = useUpdate(cam => cam.updateProjectionMatrix(), [size, props]);
+  useLayoutEffect(() => {
+    if (makeDefault) {
+      const oldCam = camera;
+      setDefaultCamera(cameraRef.current);
+      return () => setDefaultCamera(oldCam);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("orthographicCamera", _extends({
+    left: size.width / -2,
+    right: size.width / 2,
+    top: size.height / 2,
+    bottom: size.height / -2,
+    ref: mergeRefs([cameraRef, ref])
+  }, props), children);
+});
+
 function StandardEffects({
@@ -328,3 +357,3 @@ smaa = true,
 
-  if (camera instanceof OrthographicCamera) return camera.zoom;
+  if (camera instanceof OrthographicCamera$1) return camera.zoom;
   return 1;
@@ -334,3 +363,3 @@ }
 function objectZIndex(el, camera, zIndexRange) {
-  if (camera instanceof PerspectiveCamera$1 || camera instanceof OrthographicCamera) {
+  if (camera instanceof PerspectiveCamera$1 || camera instanceof OrthographicCamera$1) {
     const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
@@ -467,2 +496,2 @@ const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
 
-export { Detailed, HTML, MapControls, OrbitControls, PerspectiveCamera, PositionalAudio, Sky, StandardEffects, Stats, TrackballControls, TransformControls, draco };
+export { Detailed, HTML, MapControls, OrbitControls, OrthographicCamera, PerspectiveCamera, PositionalAudio, Sky, StandardEffects, Stats, TrackballControls, TransformControls, draco };

dist/PerspectiveCamera.d.ts

@@ -6,3 +6,3 @@ import React from 'react';
 };
-export declare const PerspectiveCamera: React.ForwardRefExoticComponent<Pick<Props, "attach" | "attachArray" | "attachObject" | "args" | "children" | "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" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "view" | "zoom" | "isPerspectiveCamera" | "fov" | "aspect" | "near" | "far" | "focus" | "filmGauge" | "filmOffset" | "setFocalLength" | "getFocalLength" | "getEffectiveFOV" | "getFilmWidth" | "getFilmHeight" | "setViewOffset" | "clearViewOffset" | "updateProjectionMatrix" | "setLens" | "matrixWorldInverse" | "projectionMatrix" | "projectionMatrixInverse" | "isCamera" | "makeDefault"> & React.RefAttributes<unknown>>;
+export declare const PerspectiveCamera: React.ForwardRefExoticComponent<Pick<Props, "attach" | "attachArray" | "attachObject" | "args" | "children" | "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" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "view" | "zoom" | "near" | "far" | "updateProjectionMatrix" | "setViewOffset" | "clearViewOffset" | "matrixWorldInverse" | "projectionMatrix" | "projectionMatrixInverse" | "isCamera" | "makeDefault" | "isPerspectiveCamera" | "fov" | "aspect" | "focus" | "filmGauge" | "filmOffset" | "setFocalLength" | "getFocalLength" | "getEffectiveFOV" | "getFilmWidth" | "getFilmHeight" | "setLens"> & React.RefAttributes<unknown>>;
 export {};

package.json

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

README.md

@@ -28,3 +28,3 @@ [![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)
 
-- `<PerspectiveCamera />`
+- `<PerspectiveCamera />` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-basic-demo-qgcrx)
 - `<OrbitControls />` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-contact-shadow-h5xcw)
@@ -46,3 +46,3 @@ - `<MapControls />` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/react-three-fiber-map-mkq8e)
 
-##### ⚡️ `<PerspectiveCamera />`
+##### ⚡️ `<PerspectiveCamera />` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-basic-demo-qgcrx)
 
@@ -49,0 +49,0 @@ A responsive [THREE.PerspectiveCamera](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) that sets itself as the default.

src/index.ts

@@ -8,2 +8,3 @@ export * from './OrbitControls'
 export * from './PerspectiveCamera'
+export * from './OrthographicCamera'
 export * from './StandardEffects'
@@ -10,0 +11,0 @@ export * from './HTML'

No alert changes

Improved metrics

Total package byte prevSize

89587

increased by6.17%

Number of package files

36

increased by5.88%

Lines of code

1790

increased by6.11%

No dependency changes