drei - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/index.cjs.js

@@ -13,2 +13,6 @@ 'use strict';
 var mergeRefs = _interopDefault(require('react-merge-refs'));
+var TrackballControls$1 = require('three/examples/jsm/controls/TrackballControls');
+var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
+var TransformControls$1 = require('three/examples/jsm/controls/TransformControls');
+var three = require('three');
 var DRACOLoader = require('three/examples/jsm/loaders/DRACOLoader');
@@ -92,2 +96,129 @@
 
+reactThreeFiber.extend({
+  TrackballControlsImpl: TrackballControls$1.TrackballControls
+});
+var TrackballControls = React.forwardRef(function (props, ref) {
+  var controls = React.useRef();
+
+  var _useThree = reactThreeFiber.useThree(),
+      camera = _useThree.camera,
+      gl = _useThree.gl,
+      invalidate = _useThree.invalidate;
+
+  reactThreeFiber.useFrame(function () {
+    var _controls$current;
+
+    return (_controls$current = controls.current) == null ? void 0 : _controls$current.update();
+  });
+  React.useEffect(function () {
+    var _controls$current2;
+
+    (_controls$current2 = controls.current) == null ? void 0 : _controls$current2.addEventListener('change', invalidate);
+    return function () {
+      var _controls$current3;
+
+      return (_controls$current3 = controls.current) == null ? void 0 : _controls$current3.removeEventListener('change', invalidate);
+    };
+  }, [controls.current]);
+  return /*#__PURE__*/React__default.createElement("trackballControlsImpl", _extends({
+    ref: mergeRefs([controls, ref]),
+    args: [camera, gl.domElement]
+  }, props));
+});
+
+reactThreeFiber.extend({
+  TransformControlsImpl: TransformControls$1.TransformControls
+});
+var TransformControls = React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  var controls = React.useRef();
+  var group = React.useRef();
+
+  var _useThree = reactThreeFiber.useThree(),
+      camera = _useThree.camera,
+      gl = _useThree.gl,
+      invalidate = _useThree.invalidate;
+
+  React.useLayoutEffect(function () {
+    var _controls$current;
+
+    return void ((_controls$current = controls.current) == null ? void 0 : _controls$current.attach(group.current));
+  }, [children]);
+  React.useEffect(function () {
+    var _controls$current2;
+
+    (_controls$current2 = controls.current) == null ? void 0 : _controls$current2.addEventListener('change', invalidate);
+    return function () {
+      var _controls$current3;
+
+      return (_controls$current3 = controls.current) == null ? void 0 : _controls$current3.removeEventListener('change', invalidate);
+    };
+  }, [controls.current]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("transformControlsImpl", _extends({
+    ref: mergeRefs([controls, ref]),
+    args: [camera, gl.domElement]
+  }, props)), /*#__PURE__*/React__default.createElement("group", {
+    ref: group
+  }, children));
+});
+
+var Detailed = React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      distances = _ref.distances;
+  var lod = reactThreeFiber.useUpdate(function (lod) {
+    lod.levels.length = 0;
+    lod.children.forEach(function (object, index) {
+      return lod.levels.push({
+        object: object,
+        distance: distances[index]
+      });
+    });
+  }, []);
+  reactThreeFiber.useFrame(function (state) {
+    var _lod$current;
+
+    return (_lod$current = lod.current) == null ? void 0 : _lod$current.update(state.camera);
+  });
+  return /*#__PURE__*/React__default.createElement("lOD", {
+    ref: mergeRefs([lod, ref])
+  }, children);
+});
+
+var PositionalAudio = React.forwardRef(function (_ref, ref) {
+  var url = _ref.url,
+      _ref$distance = _ref.distance,
+      distance = _ref$distance === void 0 ? 1 : _ref$distance,
+      _ref$loop = _ref.loop,
+      loop = _ref$loop === void 0 ? true : _ref$loop;
+  var sound = React.useRef();
+
+  var _useThree = reactThreeFiber.useThree(),
+      camera = _useThree.camera;
+
+  var _useState = React.useState(function () {
+    return new three.AudioListener();
+  }),
+      listener = _useState[0];
+
+  var buffer = reactThreeFiber.useLoader(three.AudioLoader, url);
+  React.useEffect(function () {
+    var _sound$current, _sound$current2, _sound$current3, _sound$current4;
+
+    (_sound$current = sound.current) == null ? void 0 : _sound$current.setBuffer(buffer);
+    (_sound$current2 = sound.current) == null ? void 0 : _sound$current2.setRefDistance(distance);
+    (_sound$current3 = sound.current) == null ? void 0 : _sound$current3.setLoop(loop);
+    (_sound$current4 = sound.current) == null ? void 0 : _sound$current4.play();
+    camera.add(listener);
+    return function () {
+      return void camera.remove(listener);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement("positionalAudio", {
+    ref: mergeRefs([sound, ref]),
+    args: [listener]
+  });
+});
+
 function draco(url) {
@@ -105,4 +236,8 @@ if (url === void 0) {
 
+exports.Detailed = Detailed;
 exports.MapControls = MapControls;
 exports.OrbitControls = OrbitControls;
+exports.PositionalAudio = PositionalAudio;
+exports.TrackballControls = TrackballControls;
+exports.TransformControls = TransformControls;
 exports.draco = draco;

dist/index.d.ts

 export * from './OrbitControls';
 export * from './MapControls';
+export * from './TrackballControls';
+export * from './TransformControls';
+export * from './Detailed';
+export * from './PositionalAudio';
 export * from './draco';

dist/index.js

 import _extends from '@babel/runtime/helpers/esm/extends';
-import React, { forwardRef, useRef, useEffect } from 'react';
-import { extend, useThree, useFrame } from 'react-three-fiber';
+import React, { forwardRef, useRef, useEffect, useLayoutEffect, useState } from 'react';
+import { extend, useThree, useFrame, useUpdate, useLoader } from 'react-three-fiber';
 import { OrbitControls as OrbitControls$1, MapControls as MapControls$1 } from 'three/examples/jsm/controls/OrbitControls';
 import mergeRefs from 'react-merge-refs';
+import { TrackballControls as TrackballControls$1 } from 'three/examples/jsm/controls/TrackballControls';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
+import { TransformControls as TransformControls$1 } from 'three/examples/jsm/controls/TransformControls';
+import { AudioListener, AudioLoader } from 'three';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
@@ -74,2 +78,120 @@
 
+extend({
+  TrackballControlsImpl: TrackballControls$1
+});
+const TrackballControls = forwardRef((props, ref) => {
+  const controls = useRef();
+  const {
+    camera,
+    gl,
+    invalidate
+  } = useThree();
+  useFrame(() => {
+    var _controls$current;
+
+    return (_controls$current = controls.current) == null ? void 0 : _controls$current.update();
+  });
+  useEffect(() => {
+    var _controls$current2;
+
+    (_controls$current2 = controls.current) == null ? void 0 : _controls$current2.addEventListener('change', invalidate);
+    return () => {
+      var _controls$current3;
+
+      return (_controls$current3 = controls.current) == null ? void 0 : _controls$current3.removeEventListener('change', invalidate);
+    };
+  }, [controls.current]);
+  return /*#__PURE__*/React.createElement("trackballControlsImpl", _extends({
+    ref: mergeRefs([controls, ref]),
+    args: [camera, gl.domElement]
+  }, props));
+});
+
+extend({
+  TransformControlsImpl: TransformControls$1
+});
+const TransformControls = forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  const controls = useRef();
+  const group = useRef();
+  const {
+    camera,
+    gl,
+    invalidate
+  } = useThree();
+  useLayoutEffect(() => {
+    var _controls$current;
+
+    return void ((_controls$current = controls.current) == null ? void 0 : _controls$current.attach(group.current));
+  }, [children]);
+  useEffect(() => {
+    var _controls$current2;
+
+    (_controls$current2 = controls.current) == null ? void 0 : _controls$current2.addEventListener('change', invalidate);
+    return () => {
+      var _controls$current3;
+
+      return (_controls$current3 = controls.current) == null ? void 0 : _controls$current3.removeEventListener('change', invalidate);
+    };
+  }, [controls.current]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("transformControlsImpl", _extends({
+    ref: mergeRefs([controls, ref]),
+    args: [camera, gl.domElement]
+  }, props)), /*#__PURE__*/React.createElement("group", {
+    ref: group
+  }, children));
+});
+
+const Detailed = forwardRef(({
+  children,
+  distances
+}, ref) => {
+  const lod = useUpdate(lod => {
+    lod.levels.length = 0;
+    lod.children.forEach((object, index) => lod.levels.push({
+      object,
+      distance: distances[index]
+    }));
+  }, []);
+  useFrame(state => {
+    var _lod$current;
+
+    return (_lod$current = lod.current) == null ? void 0 : _lod$current.update(state.camera);
+  });
+  return /*#__PURE__*/React.createElement("lOD", {
+    ref: mergeRefs([lod, ref])
+  }, children);
+});
+
+const PositionalAudio = forwardRef(({
+  url,
+  distance = 1,
+  loop = true
+}, ref) => {
+  const sound = useRef();
+  const {
+    camera
+  } = useThree();
+  const [listener] = useState(() => new AudioListener());
+  const buffer = useLoader(AudioLoader, url);
+  useEffect(() => {
+    var _sound$current, _sound$current2, _sound$current3, _sound$current4;
+
+    (_sound$current = sound.current) == null ? void 0 : _sound$current.setBuffer(buffer);
+    (_sound$current2 = sound.current) == null ? void 0 : _sound$current2.setRefDistance(distance);
+    (_sound$current3 = sound.current) == null ? void 0 : _sound$current3.setLoop(loop);
+    (_sound$current4 = sound.current) == null ? void 0 : _sound$current4.play();
+    camera.add(listener);
+    return () => void camera.remove(listener);
+  }, []);
+  return /*#__PURE__*/React.createElement("positionalAudio", {
+    ref: mergeRefs([sound, ref]),
+    args: [listener]
+  });
+});
+
 function draco(url = '/draco-gltf/') {
@@ -83,2 +205,2 @@ return loader => {
 
-export { MapControls, OrbitControls, draco };
+export { Detailed, MapControls, OrbitControls, PositionalAudio, TrackballControls, TransformControls, draco };

package.json

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

README.md

@@ -15,7 +15,9 @@ [![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)
 
-- [x] OrbitControls, `<OrbitControls enableDamping ... />`
-- [x] MapControls, `<MapControls enableDamping ... />`
-- [x] TrackballControls, `<TrackballControls ... />`
-- [x] TransformControls
+All controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop`.
 
+- [x] `<OrbitControls />`
+- [x] `<MapControls />`
+- [x] `<TrackballControls />`
+- [x] `<TransformControls />`
+
 ```jsx
@@ -29,3 +31,3 @@ <TransformControls>
 
-- [x] Detailed, a wrapper around THREE.LOD (Level of detail)
+- [x] `<Detailed />`, a wrapper around THREE.LOD (Level of detail)
 
@@ -40,3 +42,3 @@ ```jsx
 
-- [x] PositionalAudo, a wrapper around THREE.PositionalAudio
+- [x] `<PositionalAudo />`, a wrapper around THREE.PositionalAudio
 
@@ -51,4 +53,8 @@ ```jsx
 
-- [x] draco, `useLoader(GLTFLoader, url, draco())`
+- [x] `draco(url = "/draco-gtltf/")`, adds Draco extension to GLTFLoader
 
+```jsx
+useLoader(GLTFLoader, url, draco())
+```
+
 ## Contributions
@@ -55,0 +61,0 @@

src/index.ts

 export * from './OrbitControls'
 export * from './MapControls'
+export * from './TrackballControls'
+export * from './TransformControls'
+export * from './Detailed'
+export * from './PositionalAudio'
 export * from './draco'

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

40331

increased by30.23%

Lines of code

792

increased by41.43%

Number of lines in readme file

66

increased by10%

No dependency changes