@react-three/drei 9.45.1 → 9.46.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -0
- package/core/AsciiRenderer.cjs.js +1 -0
- package/core/AsciiRenderer.d.ts +11 -0
- package/core/AsciiRenderer.js +58 -0
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +1 -0
- package/core/index.js +1 -0
- package/index.cjs.js +1 -1
- package/index.js +1 -0
- package/native/index.cjs.js +1 -1
- package/native/index.js +1 -0
- package/package.json +1 -1
- package/web/index.cjs.js +1 -1
- package/web/index.js +1 -0
package/README.md
CHANGED
|
@@ -77,6 +77,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
77
77
|
<li><a href="#marchingcubes">MarchingCubes</a></li>
|
|
78
78
|
<li><a href="#decal">Decal</a></li>
|
|
79
79
|
<li><a href="#svg">Svg</a></li>
|
|
80
|
+
<li><a href="#asciirenderer">AsciiRenderer</a></li>
|
|
80
81
|
</ul>
|
|
81
82
|
<li><a href="#shaders">Shaders</a></li>
|
|
82
83
|
<ul>
|
|
@@ -1249,6 +1250,38 @@ Accepts an SVG url or svg raw data.
|
|
|
1249
1250
|
<Svg src={urlOrRawSvgString} />
|
|
1250
1251
|
```
|
|
1251
1252
|
|
|
1253
|
+
#### AsciiRenderer
|
|
1254
|
+
|
|
1255
|
+
<p>
|
|
1256
|
+
<a href="https://codesandbox.io/s/5jvdu3"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/5jvdu3/screenshot.png" alt="Demo"/></a>
|
|
1257
|
+
</p>
|
|
1258
|
+
|
|
1259
|
+
Abstraction of three's [AsciiEffect](https://threejs.org/examples/?q=as#webgl_effects_ascii). It creates a DOM layer on top of the canvas and renders the scene as ascii characters.
|
|
1260
|
+
|
|
1261
|
+
```tsx
|
|
1262
|
+
type AsciiRendererProps = {
|
|
1263
|
+
/** Render index, default: 1 */
|
|
1264
|
+
renderIndex?: number
|
|
1265
|
+
/** CSS background color (can be "transparent"), default: black */
|
|
1266
|
+
bgColor?: string
|
|
1267
|
+
/** CSS character color, default: white */
|
|
1268
|
+
fgColor?: string
|
|
1269
|
+
/** Characters, default: ' .:-+*=%@#' */
|
|
1270
|
+
characters?: string
|
|
1271
|
+
/** Invert character, default: true */
|
|
1272
|
+
invert?: boolean
|
|
1273
|
+
/** Colorize output (very expensive!), default: false */
|
|
1274
|
+
color?: boolean
|
|
1275
|
+
/** Level of detail, default: 0.15 */
|
|
1276
|
+
resolution?: number
|
|
1277
|
+
}
|
|
1278
|
+
```
|
|
1279
|
+
|
|
1280
|
+
```jsx
|
|
1281
|
+
<Canvas>
|
|
1282
|
+
<AsciiRenderer />
|
|
1283
|
+
```
|
|
1284
|
+
|
|
1252
1285
|
# Shaders
|
|
1253
1286
|
|
|
1254
1287
|
#### MeshReflectorMaterial
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three-stdlib");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=o(e);exports.AsciiRenderer=function({renderIndex:e=1,bgColor:o="black",fgColor:l="white",characters:s=" .:-+*=%@#",invert:c=!0,color:i=!1,resolution:d=.15}){const{size:u,gl:m,scene:a,camera:f}=t.useThree(),E=n.useMemo((()=>{const e=new r.AsciiEffect(m,s,{invert:c,color:i,resolution:d});return e.domElement.style.position="absolute",e.domElement.style.top="0px",e.domElement.style.left="0px",e.domElement.style.pointerEvents="none",e}),[s,c,i,d]);n.useLayoutEffect((()=>{E.domElement.style.color=l,E.domElement.style.backgroundColor=o}),[l,o]),n.useEffect((()=>(m.domElement.style.opacity="0",m.domElement.parentNode.appendChild(E.domElement),()=>{m.domElement.style.opacity="1",m.domElement.parentNode.removeChild(E.domElement)})),[E]),n.useEffect((()=>{E.setSize(u.width,u.height)}),[E,u]),t.useFrame((e=>{E.render(a,f)}),e)};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare type AsciiRendererProps = {
|
|
2
|
+
renderIndex?: number;
|
|
3
|
+
bgColor?: string;
|
|
4
|
+
fgColor?: string;
|
|
5
|
+
characters?: string;
|
|
6
|
+
invert?: boolean;
|
|
7
|
+
color?: boolean;
|
|
8
|
+
resolution?: number;
|
|
9
|
+
};
|
|
10
|
+
export declare function AsciiRenderer({ renderIndex, bgColor, fgColor, characters, invert, color, resolution, }: AsciiRendererProps): void;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useThree, useFrame } from '@react-three/fiber';
|
|
3
|
+
import { AsciiEffect } from 'three-stdlib';
|
|
4
|
+
|
|
5
|
+
function AsciiRenderer({
|
|
6
|
+
renderIndex = 1,
|
|
7
|
+
bgColor = 'black',
|
|
8
|
+
fgColor = 'white',
|
|
9
|
+
characters = ' .:-+*=%@#',
|
|
10
|
+
invert = true,
|
|
11
|
+
color = false,
|
|
12
|
+
resolution = 0.15
|
|
13
|
+
}) {
|
|
14
|
+
// Reactive state
|
|
15
|
+
const {
|
|
16
|
+
size,
|
|
17
|
+
gl,
|
|
18
|
+
scene,
|
|
19
|
+
camera
|
|
20
|
+
} = useThree(); // Create effect
|
|
21
|
+
|
|
22
|
+
const effect = React.useMemo(() => {
|
|
23
|
+
const effect = new AsciiEffect(gl, characters, {
|
|
24
|
+
invert,
|
|
25
|
+
color,
|
|
26
|
+
resolution
|
|
27
|
+
});
|
|
28
|
+
effect.domElement.style.position = 'absolute';
|
|
29
|
+
effect.domElement.style.top = '0px';
|
|
30
|
+
effect.domElement.style.left = '0px';
|
|
31
|
+
effect.domElement.style.pointerEvents = 'none';
|
|
32
|
+
return effect;
|
|
33
|
+
}, [characters, invert, color, resolution]); // Styling
|
|
34
|
+
|
|
35
|
+
React.useLayoutEffect(() => {
|
|
36
|
+
effect.domElement.style.color = fgColor;
|
|
37
|
+
effect.domElement.style.backgroundColor = bgColor;
|
|
38
|
+
}, [fgColor, bgColor]); // Append on mount, remove on unmount
|
|
39
|
+
|
|
40
|
+
React.useEffect(() => {
|
|
41
|
+
gl.domElement.style.opacity = '0';
|
|
42
|
+
gl.domElement.parentNode.appendChild(effect.domElement);
|
|
43
|
+
return () => {
|
|
44
|
+
gl.domElement.style.opacity = '1';
|
|
45
|
+
gl.domElement.parentNode.removeChild(effect.domElement);
|
|
46
|
+
};
|
|
47
|
+
}, [effect]); // Set size
|
|
48
|
+
|
|
49
|
+
React.useEffect(() => {
|
|
50
|
+
effect.setSize(size.width, size.height);
|
|
51
|
+
}, [effect, size]); // Take over render-loop (that is what the index is for)
|
|
52
|
+
|
|
53
|
+
useFrame(state => {
|
|
54
|
+
effect.render(scene, camera);
|
|
55
|
+
}, renderIndex); // This component returns nothing, it is a purely logical
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export { AsciiRenderer };
|
package/core/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),u=require("./PositionalAudio.cjs.js"),a=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),d=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),m=require("./Clone.cjs.js"),h=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),S=require("./Svg.cjs.js"),M=require("./
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),u=require("./PositionalAudio.cjs.js"),a=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),d=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),m=require("./Clone.cjs.js"),h=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),S=require("./Svg.cjs.js"),M=require("./AsciiRenderer.cjs.js"),T=require("./OrthographicCamera.cjs.js"),P=require("./PerspectiveCamera.cjs.js"),b=require("./CubeCamera.cjs.js"),B=require("./DeviceOrientationControls.cjs.js"),g=require("./FlyControls.cjs.js"),f=require("./MapControls.cjs.js"),v=require("./OrbitControls.cjs.js"),A=require("./TrackballControls.cjs.js"),L=require("./ArcballControls.cjs.js"),k=require("./TransformControls.cjs.js"),R=require("./PointerLockControls.cjs.js"),D=require("./FirstPersonControls.cjs.js"),E=require("./GizmoHelper.cjs.js"),w=require("./GizmoViewcube.cjs.js"),G=require("./GizmoViewport.cjs.js"),z=require("./useCubeTexture.cjs.js"),F=require("./useFBX.cjs.js"),O=require("./useGLTF.cjs.js"),I=require("./useKTX2.cjs.js"),H=require("./useProgress.cjs.js"),V=require("./useTexture.cjs.js"),y=require("./useVideoTexture.cjs.js"),Q=require("./Stats.cjs.js"),X=require("./useDepthBuffer.cjs.js"),K=require("./useAspect.cjs.js"),W=require("./useCamera.cjs.js"),N=require("./useDetectGPU.cjs.js"),U=require("./useHelper.cjs.js"),_=require("./useBVH.cjs.js"),J=require("./useContextBridge.cjs.js"),Y=require("./useAnimations.cjs.js"),Z=require("./useFBO.cjs.js"),$=require("./useIntersect.cjs.js"),ee=require("./useBoxProjectedEnv.cjs.js"),re=require("./BBAnchor.cjs.js"),se=require("./useTrailTexture.cjs.js"),te=require("./CurveModifier.cjs.js"),oe=require("./MeshDistortMaterial.cjs.js"),ie=require("./MeshWobbleMaterial.cjs.js"),ue=require("./MeshReflectorMaterial.cjs.js"),ae=require("./MeshRefractionMaterial.cjs.js"),ce=require("./PointMaterial.cjs.js"),ne=require("./shaderMaterial.cjs.js"),je=require("./softShadows.cjs.js"),pe=require("./shapes.cjs.js"),xe=require("./RoundedBox.cjs.js"),le=require("./ScreenQuad.cjs.js"),de=require("./Center.cjs.js"),qe=require("./Bounds.cjs.js"),me=require("./CameraShake.cjs.js"),he=require("./Float.cjs.js"),Ce=require("./Stage.cjs.js"),Se=require("./Backdrop.cjs.js"),Me=require("./Shadow.cjs.js"),Te=require("./ContactShadows.cjs.js"),Pe=require("./AccumulativeShadows.cjs.js"),be=require("./Reflector.cjs.js"),Be=require("./SpotLight.cjs.js"),ge=require("./Environment.cjs.js"),fe=require("./Lightformer.cjs.js"),ve=require("./Sky.cjs.js"),Ae=require("./Stars.cjs.js"),Le=require("./Cloud.cjs.js"),ke=require("./Sparkles.cjs.js"),Re=require("./useMatcapTexture.cjs.js"),De=require("./useNormalTexture.cjs.js"),Ee=require("./Points.cjs.js"),we=require("./Instances.cjs.js"),Ge=require("./Segments.cjs.js"),ze=require("./Detailed.cjs.js"),Fe=require("./Preload.cjs.js"),Oe=require("./BakeShadows.cjs.js"),Ie=require("./meshBounds.cjs.js"),He=require("./AdaptiveDpr.cjs.js"),Ve=require("./AdaptiveEvents.cjs.js"),ye=require("./PerformanceMonitor.cjs.js"),Qe=require("./RenderTexture.cjs.js"),Xe=require("./Mask.cjs.js"),Ke=require("./Hud.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.CatmullRomLine=o.CatmullRomLine,exports.Line=i.Line,exports.PositionalAudio=u.PositionalAudio,exports.Text=a.Text,exports.Text3D=c.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.Image=p.Image,exports.Edges=x.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=d.Sampler,exports.useSurfaceSampler=d.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=m.Clone,exports.MarchingCube=h.MarchingCube,exports.MarchingCubes=h.MarchingCubes,exports.MarchingPlane=h.MarchingPlane,exports.Decal=C.Decal,exports.Svg=S.Svg,exports.AsciiRenderer=M.AsciiRenderer,exports.OrthographicCamera=T.OrthographicCamera,exports.PerspectiveCamera=P.PerspectiveCamera,exports.CubeCamera=b.CubeCamera,exports.DeviceOrientationControls=B.DeviceOrientationControls,exports.FlyControls=g.FlyControls,exports.MapControls=f.MapControls,exports.OrbitControls=v.OrbitControls,exports.TrackballControls=A.TrackballControls,exports.ArcballControls=L.ArcballControls,exports.TransformControls=k.TransformControls,exports.PointerLockControls=R.PointerLockControls,exports.FirstPersonControls=D.FirstPersonControls,exports.GizmoHelper=E.GizmoHelper,exports.useGizmoContext=E.useGizmoContext,exports.GizmoViewcube=w.GizmoViewcube,exports.GizmoViewport=G.GizmoViewport,exports.useCubeTexture=z.useCubeTexture,exports.useFBX=F.useFBX,exports.useGLTF=O.useGLTF,exports.useKTX2=I.useKTX2,exports.useProgress=H.useProgress,exports.IsObject=V.IsObject,exports.useTexture=V.useTexture,exports.useVideoTexture=y.useVideoTexture,exports.Stats=Q.Stats,exports.useDepthBuffer=X.useDepthBuffer,exports.useAspect=K.useAspect,exports.useCamera=W.useCamera,exports.useDetectGPU=N.useDetectGPU,exports.useHelper=U.useHelper,exports.useBVH=_.useBVH,exports.useContextBridge=J.useContextBridge,exports.useAnimations=Y.useAnimations,exports.useFBO=Z.useFBO,exports.useIntersect=$.useIntersect,exports.useBoxProjectedEnv=ee.useBoxProjectedEnv,exports.BBAnchor=re.BBAnchor,exports.useTrailTexture=se.useTrailTexture,exports.CurveModifier=te.CurveModifier,exports.MeshDistortMaterial=oe.MeshDistortMaterial,exports.MeshWobbleMaterial=ie.MeshWobbleMaterial,exports.MeshReflectorMaterial=ue.MeshReflectorMaterial,exports.MeshRefractionMaterial=ae.MeshRefractionMaterial,exports.PointMaterial=ce.PointMaterial,exports.PointMaterialImpl=ce.PointMaterialImpl,exports.shaderMaterial=ne.shaderMaterial,exports.softShadows=je.softShadows,exports.Box=pe.Box,exports.Capsule=pe.Capsule,exports.Circle=pe.Circle,exports.Cone=pe.Cone,exports.Cylinder=pe.Cylinder,exports.Dodecahedron=pe.Dodecahedron,exports.Extrude=pe.Extrude,exports.Icosahedron=pe.Icosahedron,exports.Lathe=pe.Lathe,exports.Octahedron=pe.Octahedron,exports.Plane=pe.Plane,exports.Polyhedron=pe.Polyhedron,exports.Ring=pe.Ring,exports.Sphere=pe.Sphere,exports.Tetrahedron=pe.Tetrahedron,exports.Torus=pe.Torus,exports.TorusKnot=pe.TorusKnot,exports.Tube=pe.Tube,exports.RoundedBox=xe.RoundedBox,exports.ScreenQuad=le.ScreenQuad,exports.Center=de.Center,exports.Bounds=qe.Bounds,exports.useBounds=qe.useBounds,exports.CameraShake=me.CameraShake,exports.Float=he.Float,exports.Stage=Ce.Stage,exports.Backdrop=Se.Backdrop,exports.Shadow=Me.Shadow,exports.ContactShadows=Te.ContactShadows,exports.AccumulativeShadows=Pe.AccumulativeShadows,exports.RandomizedLight=Pe.RandomizedLight,exports.accumulativeContext=Pe.accumulativeContext,exports.Reflector=be.Reflector,exports.SpotLight=Be.SpotLight,exports.SpotLightShadow=Be.SpotLightShadow,exports.Environment=ge.Environment,exports.EnvironmentCube=ge.EnvironmentCube,exports.EnvironmentMap=ge.EnvironmentMap,exports.EnvironmentPortal=ge.EnvironmentPortal,exports.useEnvironment=ge.useEnvironment,exports.Lightformer=fe.Lightformer,exports.Sky=ve.Sky,exports.calcPosFromAngles=ve.calcPosFromAngles,exports.Stars=Ae.Stars,exports.Cloud=Le.Cloud,exports.Sparkles=ke.Sparkles,exports.useMatcapTexture=Re.useMatcapTexture,exports.useNormalTexture=De.useNormalTexture,exports.Point=Ee.Point,exports.Points=Ee.Points,exports.PointsBuffer=Ee.PointsBuffer,exports.PositionPoint=Ee.PositionPoint,exports.Instance=we.Instance,exports.Instances=we.Instances,exports.Merged=we.Merged,exports.Segment=Ge.Segment,exports.SegmentObject=Ge.SegmentObject,exports.Segments=Ge.Segments,exports.Detailed=ze.Detailed,exports.Preload=Fe.Preload,exports.BakeShadows=Oe.BakeShadows,exports.meshBounds=Ie.meshBounds,exports.AdaptiveDpr=He.AdaptiveDpr,exports.AdaptiveEvents=Ve.AdaptiveEvents,exports.PerformanceMonitor=ye.PerformanceMonitor,exports.usePerformanceMonitor=ye.usePerformanceMonitor,exports.RenderTexture=Qe.RenderTexture,exports.Mask=Xe.Mask,exports.useMask=Xe.useMask,exports.Hud=Ke.Hud;
|
package/core/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export * from './Clone';
|
|
|
18
18
|
export * from './MarchingCubes';
|
|
19
19
|
export * from './Decal';
|
|
20
20
|
export * from './Svg';
|
|
21
|
+
export * from './AsciiRenderer';
|
|
21
22
|
export * from './OrthographicCamera';
|
|
22
23
|
export * from './PerspectiveCamera';
|
|
23
24
|
export * from './CubeCamera';
|
package/core/index.js
CHANGED
|
@@ -18,6 +18,7 @@ export { Clone } from './Clone.js';
|
|
|
18
18
|
export { MarchingCube, MarchingCubes, MarchingPlane } from './MarchingCubes.js';
|
|
19
19
|
export { Decal } from './Decal.js';
|
|
20
20
|
export { Svg } from './Svg.js';
|
|
21
|
+
export { AsciiRenderer } from './AsciiRenderer.js';
|
|
21
22
|
export { OrthographicCamera } from './OrthographicCamera.js';
|
|
22
23
|
export { PerspectiveCamera } from './PerspectiveCamera.js';
|
|
23
24
|
export { CubeCamera } from './CubeCamera.js';
|