drei - npm Package Compare versions

Comparing version 0.0.15 to 0.0.16

dist/index.cjs.js

@@ -20,2 +20,3 @@ 'use strict';
 var DRACOLoader = require('three/examples/jsm/loaders/DRACOLoader');
+var Sky$1 = require('three/examples/jsm/objects/Sky');
 
@@ -197,3 +198,5 @@ reactThreeFiber.extend({
       _ref$loop = _ref.loop,
-      loop = _ref$loop === void 0 ? true : _ref$loop;
+      loop = _ref$loop === void 0 ? true : _ref$loop,
+      props = _objectWithoutPropertiesLoose(_ref, ["url", "distance", "loop"]);
+
   var sound = React.useRef();
@@ -222,6 +225,6 @@
   }, []);
-  return /*#__PURE__*/React__default.createElement("positionalAudio", {
+  return /*#__PURE__*/React__default.createElement("positionalAudio", _extends({
     ref: mergeRefs([sound, ref]),
     args: [listener]
-  });
+  }, props));
 });
@@ -253,5 +256,5 @@
   }, []);
-  return /*#__PURE__*/React__default.createElement("perspectiveCamera", _extends({}, props, {
+  return /*#__PURE__*/React__default.createElement("perspectiveCamera", _extends({
     ref: mergeRefs([cameraRef, ref])
-  }), children);
+  }, props), children);
 });
@@ -339,2 +342,22 @@
 
+reactThreeFiber.extend({
+  SkyImpl: Sky$1.Sky
+});
+var Sky = React.forwardRef(function (_ref, ref) {
+  var _ref$distance = _ref.distance,
+      distance = _ref$distance === void 0 ? 450000 : _ref$distance,
+      _ref$sunPosition = _ref.sunPosition,
+      sunPosition = _ref$sunPosition === void 0 ? [0, 1, 0] : _ref$sunPosition,
+      props = _objectWithoutPropertiesLoose(_ref, ["distance", "sunPosition"]);
+
+  var scale = React.useMemo(function () {
+    return new three.Vector3().setScalar(distance);
+  }, [distance]);
+  return /*#__PURE__*/React__default.createElement("skyImpl", _extends({
+    ref: ref,
+    "material-uniforms-sunPosition-value": sunPosition,
+    scale: scale
+  }, props));
+});
+
 exports.Detailed = Detailed;
@@ -345,2 +368,3 @@ exports.MapControls = MapControls;
 exports.PositionalAudio = PositionalAudio;
+exports.Sky = Sky;
 exports.StandardEffects = StandardEffects;
@@ -347,0 +371,0 @@ exports.TrackballControls = TrackballControls;

dist/index.d.ts

@@ -10,1 +10,2 @@ export * from './OrbitControls';
 export * from './draco';
+export * from './Sky';

dist/index.js

@@ -9,5 +9,6 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import { TransformControls as TransformControls$1 } from 'three/examples/jsm/controls/TransformControls';
-import { AudioListener, AudioLoader, HalfFloatType } from 'three';
+import { AudioListener, AudioLoader, HalfFloatType, Vector3 } from 'three';
 import { SMAAImageLoader, EffectComposer, RenderPass, SMAAEffect, NormalPass, SSAOEffect, BlendFunction, BloomEffect, KernelSize, EffectPass } from 'postprocessing';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { Sky as Sky$1 } from 'three/examples/jsm/objects/Sky';
 
@@ -173,7 +174,10 @@ extend({
 
-const PositionalAudio = forwardRef(({
-  url,
-  distance = 1,
-  loop = true
-}, ref) => {
+const PositionalAudio = forwardRef((_ref, ref) => {
+  let {
+    url,
+    distance = 1,
+    loop = true
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["url", "distance", "loop"]);
+
   const sound = useRef();
@@ -195,6 +199,6 @@ const {
   }, []);
-  return /*#__PURE__*/React.createElement("positionalAudio", {
+  return /*#__PURE__*/React.createElement("positionalAudio", _extends({
     ref: mergeRefs([sound, ref]),
     args: [listener]
-  });
+  }, props));
 });
@@ -225,5 +229,5 @@
   }, []);
-  return /*#__PURE__*/React.createElement("perspectiveCamera", _extends({}, props, {
+  return /*#__PURE__*/React.createElement("perspectiveCamera", _extends({
     ref: mergeRefs([cameraRef, ref])
-  }), children);
+  }, props), children);
 });
@@ -295,2 +299,20 @@
 
-export { Detailed, MapControls, OrbitControls, PerspectiveCamera, PositionalAudio, StandardEffects, TrackballControls, TransformControls, draco };
+extend({
+  SkyImpl: Sky$1
+});
+const Sky = forwardRef((_ref, ref) => {
+  let {
+    distance = 450000,
+    sunPosition = [0, 1, 0]
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["distance", "sunPosition"]);
+
+  const scale = useMemo(() => new Vector3().setScalar(distance), [distance]);
+  return /*#__PURE__*/React.createElement("skyImpl", _extends({
+    ref: ref,
+    "material-uniforms-sunPosition-value": sunPosition,
+    scale: scale
+  }, props));
+});
+
+export { Detailed, MapControls, OrbitControls, PerspectiveCamera, PositionalAudio, Sky, StandardEffects, TrackballControls, TransformControls, draco };

dist/PerspectiveCamera.d.ts

@@ -1,5 +0,3 @@
-import { PerspectiveCamera as PerspectiveCameraImpl } from 'three';
 import React from 'react';
-import { ReactThreeFiber } from 'react-three-fiber';
-declare type Props = ReactThreeFiber.Object3DNode<PerspectiveCameraImpl, typeof PerspectiveCameraImpl> & {
+declare type Props = JSX.IntrinsicElements['perspectiveCamera'] & {
     makeDefault: boolean;
@@ -6,0 +4,0 @@ children: React.ReactNode;

dist/PositionalAudio.d.ts

 import React from 'react';
-declare type Props = {
+declare type Props = JSX.IntrinsicElements['positionalAudio'] & {
     url: string;
@@ -7,3 +7,3 @@ distance: number;
 };
-export declare const PositionalAudio: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export declare const PositionalAudio: React.ForwardRefExoticComponent<Pick<Props, "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" | "source" | "stop" | "onClick" | "onPointerUp" | "onPointerDown" | "onPointerOver" | "onPointerOut" | "onPointerMove" | "onWheel" | "panner" | "getOutput" | "setRefDistance" | "getRefDistance" | "setRolloffFactor" | "getRolloffFactor" | "setDistanceModel" | "getDistanceModel" | "setMaxDistance" | "getMaxDistance" | "setDirectionalCone" | "listener" | "context" | "gain" | "autoplay" | "buffer" | "detune" | "loop" | "loopStart" | "loopEnd" | "offset" | "duration" | "playbackRate" | "isPlaying" | "hasPlaybackControl" | "sourceType" | "filters" | "setNodeSource" | "setMediaElementSource" | "setMediaStreamSource" | "setBuffer" | "play" | "onEnded" | "pause" | "connect" | "disconnect" | "setDetune" | "getDetune" | "getFilters" | "setFilters" | "getFilter" | "setFilter" | "setPlaybackRate" | "getPlaybackRate" | "getLoop" | "setLoop" | "setLoopStart" | "setLoopEnd" | "getVolume" | "setVolume" | "load" | "url" | "distance"> & React.RefAttributes<unknown>>;
 export {};

package.json

 {
   "name": "drei",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "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 growing collection of useful helpers and abstractions for [react-three-fiber](https://github.com/react-spring/react-three-fiber), saving you some boilerplate.
+<p align="center">
+    <img width="500" src="https://imgur.com/arDsXO6.jpg" alt="logo" />
+</p>
 
+A growing collection of useful helpers and abstractions for [react-three-fiber](https://github.com/react-spring/react-three-fiber), saving you some boilerplate.
+
     yarn add drei
@@ -11,8 +15,10 @@
 
-## Exports
+# Exports
 
-#### Cameras
+## Cameras
 
-- [x] `<PerspectiveCamera makeDefault=true />`, can take children (which are then moved w/ the cam)
+#### ⚡️ PerspectiveCamera `makeDefault=true`
 
+A responsive, perspective camera that sets itself as the default. Can take children, which from then on move along.
+
 ```jsx
@@ -24,11 +30,14 @@ <PerspectiveCamera>
 
-#### Controls
+## Controls
 
-All controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag.
+If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag.
 
-- [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 />` | [sandbox](https://codesandbox.io/s/r3f-drei-transformcontrols-hc8gm)
+#### ⚡️ OrbitControls `enableDamping=true` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-contact-shadow-h5xcw)
 
+#### ⚡️ MapControls `enableDamping=true` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/react-three-fiber-map-mkq8e)
+
+#### ⚡️ TrackballControls
+
+#### ⚡️ TransformControls [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-drei-transformcontrols-hc8gm)
+
 ```jsx
@@ -40,26 +49,30 @@ <TransformControls>
 
-#### Abstractions
+## Abstractions
 
-- [x] `<Detailed />`, a wrapper around THREE.LOD (Level of detail) | [sandbox](https://codesandbox.io/s/r3f-drei-detailed-dep1v)
+#### ⚡️ Detailed [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-drei-detailed-dep1v)
 
+A wrapper around THREE.LOD (Level of detail). The number of distances corresponds to the direct children you add. Only one of the children will be shown according to how close the camera is to it.
+
 ```jsx
 <Detailed distances={[0, 10, 20]}>
-  <mesh />
-  <mesh />
-  <mesh />
+  <mesh geometry={highDetail} />
+  <mesh geometry={mediumDetail} />
+  <mesh geometry={lowDetail} />
 </Detailed>
 ```
 
-- [x] `<PositionalAudio distance=1 loop=true/>`, a wrapper around THREE.PositionalAudio | [sandbox](https://codesandbox.io/s/r3f-drei-positionalaudio-yi1o0) \*suspense
+#### ⚡️ PositionalAudio `url` `distance=1` `loop=true` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-drei-positionalaudio-yi1o0) ![](https://img.shields.io/badge/-suspense-brightgreen)
 
+A wrapper around THREE.PositionalAudio. Add this to groups or meshes to tie them to a sound or a loop that plays when the camera comes near.
+
 ```jsx
-<mesh>
-  <PositionalAudo url="/song.mp3" />
-</mesh>
+<PositionalAudo url="/song.mp3" />
 ```
 
-#### Misc
+## Misc
 
-- [x] `draco(url = "/draco-gtltf/")`, adds Draco extension to GLTFLoader | [sandbox](https://codesandbox.io/s/r3f-contact-shadow-h5xcw)
+#### ⚡️ draco(`url = '/draco-gtltf/'`) [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-contact-shadow-h5xcw)
 
+Adds the Draco extension to your GLTFLoader.
+
 ```jsx
@@ -69,15 +82,15 @@ useLoader(GLTFLoader, url, draco())
 
-- [x] `<StandardEffects ao=true|{...} bloom=true|{...} />`, adds AO, bloom and SMAA \*suspense
+#### ⚡️ StandardEffects `ao=true|{...}` `bloom=true|{...}` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-drei-standardeffects-frcmm) ![](https://img.shields.io/badge/-suspense-brightgreen)
 
-Using the [postprocessing](https://github.com/vanruesc/postprocessing) library. [Ambient-occlusion-props](https://vanruesc.github.io/postprocessing/public/docs/class/src/effects/SSAOEffect.js~SSAOEffect.html#instance-constructor-constructor), [Bloom-props](https://vanruesc.github.io/postprocessing/public/docs/class/src/effects/BloomEffect.js~BloomEffect.html#instance-constructor-constructor)
+Adds [ambient-occlusion](https://vanruesc.github.io/postprocessing/public/docs/class/src/effects/SSAOEffect.js~SSAOEffect.html#instance-constructor-constructor), [bloom](https://vanruesc.github.io/postprocessing/public/docs/class/src/effects/BloomEffect.js~BloomEffect.html#instance-constructor-constructor) and SMAA using the [postprocessing](https://github.com/vanruesc/postprocessing) library.
 
-```jsx
-<StandardEffects />
-```
+## Shaders
 
-## Contributions
+#### ⚡️ Sky `distance=450000` `sunPosition=[0, 1, 0]` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-sky-3q4ev)
 
+# Contributions
+
 If you find yourself repeating set-up code often and if it's generic enough, add it here, everyone benefits!
 
-#### Requirements
+### Requirements
 
@@ -84,0 +97,0 @@ - Types

src/index.ts

@@ -10,1 +10,2 @@ export * from './OrbitControls'
 export * from './draco'
+export * from './Sky'

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

60992

increased by11.02%

Number of package files

30

increased by7.14%

Lines of code

1219

increased by7.31%

Number of lines in readme file

97

increased by15.48%

No dependency changes