drei - npm Package Compare versions

Comparing version 0.0.24 to 0.0.25

dist/HTML.d.ts

@@ -9,2 +9,3 @@ import { Group } from 'three';
     center?: boolean;
+    fullscreen?: boolean;
     eps?: number;
@@ -11,0 +12,0 @@ portal?: React.MutableRefObject<HTMLElement>;

dist/index.cjs.js

@@ -392,2 +392,3 @@ 'use strict';
       center = _ref.center,
+      fullscreen = _ref.fullscreen,
       portal = _ref.portal,
@@ -397,3 +398,3 @@ scaleFactor = _ref.scaleFactor,
       zIndexRange = _ref$zIndexRange === void 0 ? [16777271, 0] : _ref$zIndexRange,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "eps", "style", "className", "prepend", "center", "portal", "scaleFactor", "zIndexRange"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "eps", "style", "className", "prepend", "center", "fullscreen", "portal", "scaleFactor", "zIndexRange"]);
 
@@ -431,10 +432,20 @@ var _useThree = reactThreeFiber.useThree(),
   }, [target]);
+  var styles = React.useMemo(function () {
+    return _extends({
+      position: 'absolute',
+      transform: center ? 'translate3d(-50%,-50%,0)' : 'none'
+    }, fullscreen && {
+      top: -size.height / 2,
+      left: -size.width / 2,
+      width: size.width,
+      height: size.height
+    }, {}, style);
+  }, [style, center, fullscreen, size]);
   React.useEffect(function () {
     return void ReactDOM.render( /*#__PURE__*/React__default.createElement("div", {
-      style: _extends({
-        transform: center ? 'translate3d(-50%,-50%,0)' : 'none'
-      }, style),
+      ref: ref,
+      style: styles,
       className: className,
-      ref: ref
-    }, children), el);
+      children: children
+    }), el);
   });
@@ -441,0 +452,0 @@ reactThreeFiber.useFrame(function () {

dist/index.js

@@ -353,2 +353,3 @@ import _extends from '@babel/runtime/helpers/esm/extends';
     center,
+    fullscreen,
     portal,
@@ -358,3 +359,3 @@ scaleFactor,
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "eps", "style", "className", "prepend", "center", "portal", "scaleFactor", "zIndexRange"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "eps", "style", "className", "prepend", "center", "fullscreen", "portal", "scaleFactor", "zIndexRange"]);
 
@@ -388,9 +389,17 @@ const {
   }, [target]);
+  const styles = useMemo(() => _extends({
+    position: 'absolute',
+    transform: center ? 'translate3d(-50%,-50%,0)' : 'none'
+  }, fullscreen && {
+    top: -size.height / 2,
+    left: -size.width / 2,
+    width: size.width,
+    height: size.height
+  }, {}, style), [style, center, fullscreen, size]);
   useEffect(() => void ReactDOM.render( /*#__PURE__*/React.createElement("div", {
-    style: _extends({
-      transform: center ? 'translate3d(-50%,-50%,0)' : 'none'
-    }, style),
+    ref: ref,
+    style: styles,
     className: className,
-    ref: ref
-  }, children), el));
+    children: children
+  }), el));
   useFrame(() => {
@@ -397,0 +406,0 @@ if (group.current) {

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" | "update" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "center" | "domElement" | "enabled" | "target" | "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"> & React.RefAttributes<unknown>>;
+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" | "update" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "center" | "reset" | "enabled" | "domElement" | "target" | "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" | "getPolarAngle" | "getAzimuthalAngle"> & 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" | "update" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "center" | "domElement" | "enabled" | "target" | "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"> & React.RefAttributes<unknown>>;
+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" | "update" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "center" | "reset" | "enabled" | "domElement" | "target" | "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" | "getPolarAngle" | "getAzimuthalAngle"> & React.RefAttributes<unknown>>;
 export {};

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" | "isPerspectiveCamera" | "zoom" | "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" | "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 {};

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" | "update" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "domElement" | "enabled" | "target" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "keys" | "reset" | "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" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "dispose" | "update" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "screen" | "reset" | "enabled" | "domElement" | "target" | "minDistance" | "maxDistance" | "zoomSpeed" | "rotateSpeed" | "panSpeed" | "keys" | "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" | "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" | "size" | "domElement" | "enabled" | "mouseButtons" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "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" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "ref" | "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" | "size" | "space" | "enabled" | "domElement" | "mouseButtons" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "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" | "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" | "camera" | "size" | "domElement" | "enabled" | "mouseButtons" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "space" | "dragging" | "showX" | "showY" | "showZ" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setSize" | "setSpace"> & React.RefAttributes<unknown>>;
+} & ReactThreeFiber.Events, "object" | "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" | "camera" | "size" | "space" | "enabled" | "domElement" | "mouseButtons" | "axis" | "mode" | "translationSnap" | "rotationSnap" | "dragging" | "showX" | "showY" | "showZ" | "isTransformControls" | "detach" | "getMode" | "setMode" | "setTranslationSnap" | "setRotationSnap" | "setSize" | "setSpace"> & React.RefAttributes<unknown>>;
 export {};

package.json

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

README.md

@@ -47,3 +47,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)
 
-A responsive, perspective camera that sets itself as the default. Can take children, which from then on move along.
+A responsive [THREE.PerspectiveCamera](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) that sets itself as the default.
 
@@ -61,3 +61,3 @@ ```jsx
 
-If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag. They inherit all props from their underlying THREE controls.
+If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag. They inherit all props from their underlying [THREE controls](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/controls).
 
@@ -91,13 +91,11 @@ ##### ⚡️ `<OrbitControls />` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-contact-shadow-h5xcw)
 
-A wrapper around THREE.PositionalAudio. Add this to groups or meshes to tie them to a sound that plays when the camera comes near.
+A wrapper around [THREE.PositionalAudio](https://threejs.org/docs/index.html#api/en/audio/PositionalAudio). Add this to groups or meshes to tie them to a sound that plays when the camera comes near.
 
 ```jsx
-<mesh>
-  <PositionalAudio
-    url="/sound.mp3"        // Url of the sound file
-    distance={1}            // Camera distance (default=1)
-    loop                    // Repat play (default=true)
-    {...props}              // All THREE.PositionalAudio props are valid
-  />
-</mesh>
+<PositionalAudio
+  url="/sound.mp3"          // Url of the sound file
+  distance={1}              // Camera distance (default=1)
+  loop                      // Repat play (default=true)
+  {...props}                // All THREE.PositionalAudio props are valid
+/>
 ```
@@ -114,6 +112,6 @@
   bloom                     // Can be a boolean or all valid postprocessing Bloom props (default=true)
-  edgeDetection = 0.1       // Optional, SMAA precision
-  bloomOpacity = 1          // Optional, Bloom blendMode opacity
-  effects                   // Optional, define your own effect: ([smaa, ao, bloom]) => [...effects]
-  />
+  edgeDetection={0.1}       // SMAA precision (default=0.1)
+  bloomOpacity={1}          // Bloom blendMode opacity (default=1)
+  effects={() => [...fx]}   // Define your own: ([smaa, ao, bloom]) => [...effects] (default=undefined)
+/>
 ```
@@ -125,3 +123,3 @@
 
-From: https://threejs.org/examples/webgl_shaders_sky.html
+Adds a [sky](https://threejs.org/examples/webgl_shaders_sky.html) to your scene.
 
@@ -144,7 +142,8 @@ ```jsx
 <HTML
-  prepend = false           // Will be projected in front of the canvas
-  center = false            // Adds a -50%/-50% css transform
-  scaleFactor               // Optional, scales children if set to a number (default=undefined)
-  zIndexRange               // Optional, handles z-order (default=[16777271, 0])
-  portal                    // Optional reference to target container
+  prepend                   // Project content behind the canvas (default: false)
+  center                    // Adds a -50%/-50% css transform (default: false)
+  fullscreen                // Aligns to the upper-left corner, fills the screen (default:false)
+  scaleFactor={10}          // Scales children if set to a number (default=undefined)
+  zIndexRange={[100, 0]}    // Z-order range (default=[16777271, 0])
+  portal={domnodeRef}       // Reference to target container (default=undefined)
   {...groupProps}           // All THREE.Group props are valid
@@ -177,4 +176,6 @@ {...divProps}             // All HTMLDivElement props are valid
   url,
-  draco(binUrl)             // default='/draco-gtltf/'
+  draco(
+    '/draco-gtltf/'         // Path to the Draco binaries (default='/draco-gtltf/')
+  )
 )
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84255

increased by1.5%

Lines of code

1687

increased by1.69%

Number of lines in readme file

175

increased by0.57%

No dependency changes