Assets

README.md

@@ -4143,7 +4143,7 @@ Sets up a global cubemap, which affects the default `scene.environment`, and opt
 />
 ```
 
-The simplest way to use it is to provide a preset. 👉 Note: `preset` property is not meant to be used in production environments and may fail as it relies on CDNs.
+> **Warning** `preset` will use a base64 packed DWAB-EXR compressed HDRI assets similar to https://github.com/pmndrs/assets. Each preset is highly optimized and only weighs around ~150 KB in size, but incurs a small runtime unpack cost.
 
 ```jsx
 <Environment preset="city" />

package.json

@@ -56,6 +56,7 @@
  "dependencies": {
  "@babel/runtime": "^7.11.2",
  "@mediapipe/tasks-vision": "0.10.2-rc2",
+ "@pmndrs/assets": "^1.6.0",
  "@react-spring/three": "~9.6.1",
  "@use-gesture/react": "^10.2.24",
  "camera-controls": "^2.4.2",

src/core/Cloud.tsx

@@ -1,39 +1,53 @@
 import * as React from 'react'
 import { Group, Texture } from 'three'
 import { useFrame } from '@react-three/fiber'
+import { suspend } from 'suspend-react'
 import { Billboard } from './Billboard'
 import { Plane } from './shapes'
 import { useTexture } from './useTexture'
 
-const CLOUD_URL = 'https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png'
+export type CloudProps = {
+ opacity?: number
+ speed?: number
+ width?: number
+ depth?: number
+ segments?: number
+ texture?: string
+ color?: string
+ depthTest?: boolean
+} & JSX.IntrinsicElements['group']
 
 export function Cloud({
  opacity = 0.5,
- speed = 0.4,
+ speed = 0.2,
  width = 10,
  depth = 1.5,
  segments = 20,
- texture = CLOUD_URL,
+ texture,
  color = '#ffffff',
  depthTest = true,
  ...props
-}) {
+}: CloudProps) {
  const group = React.useRef<Group>()
- const cloudTexture = useTexture(texture) as Texture
+ const cloudUri = suspend(async () => {
+ return texture ? { default: texture } : import('../assets/textures/cloud.webp.js')
+ }, ['r3f_drei_cloud', texture]).default
+
+ const cloudTexture = useTexture(cloudUri) as Texture
  const clouds = React.useMemo(
  () =>
  [...new Array(segments)].map((_, index) => ({
  x: width / 2 - Math.random() * width,
  y: width / 2 - Math.random() * width,
  scale: 0.4 + Math.sin(((index + 1) / segments) * Math.PI) * ((0.2 + Math.random()) * 10),
  density: Math.max(0.2, Math.random()),
- rotation: Math.max(0.002, 0.005 * Math.random()) * speed,
+ rotation: Math.max(0.1, 0.2 * Math.random()) * speed,
  })),
  [width, segments, speed]
  )
- useFrame((state) =>
+ useFrame((state, delta) =>
  group.current?.children.forEach((cloud, index) => {
- cloud.children[0].rotation.z += clouds[index].rotation
+ cloud.children[0].rotation.z += clouds[index].rotation * delta
  cloud.children[0].scale.setScalar(
  clouds[index].scale + (((1 + Math.sin(state.clock.getElapsedTime() / 10)) / 2) * index) / 10
  )

src/core/useEnvironment.tsx

@@ -9,9 +9,9 @@ import {
  TextureEncoding,
 } from 'three'
 import { RGBELoader, EXRLoader } from 'three-stdlib'
+import { suspend } from 'suspend-react'
 import { presetsObj, PresetsType } from '../helpers/environment-assets'
 
-const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/'
 const isArray = (arr: any): arr is string[] => Array.isArray(arr)
 
 export type EnvironmentLoaderProps = {
@@ -35,8 +35,7 @@ export function useEnvironment({
 
  if (preset) {
  if (!(preset in presetsObj)) throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', '))
- files = presetsObj[preset]
- path = CUBEMAP_ROOT
+ files = suspend(() => import(`../assets/hdri/${presetsObj[preset]}.exr.js`), ['r3f_drei_env', preset]).default
  }
 
  // Everything else

src/helpers/environment-assets.ts

@@ -1,14 +1,22 @@
 export const presetsObj = {
- apartment: 'lebombo_1k.hdr',
- city: 'potsdamer_platz_1k.hdr',
- dawn: 'kiara_1_dawn_1k.hdr',
- forest: 'forest_slope_1k.hdr',
- lobby: 'st_fagans_interior_1k.hdr',
- night: 'dikhololo_night_1k.hdr',
- park: 'rooitou_park_1k.hdr',
- studio: 'studio_small_03_1k.hdr',
- sunset: 'venice_sunset_1k.hdr',
- warehouse: 'empty_warehouse_01_1k.hdr',
+ apartment: 'apartment',
+ bridge: 'bridge',
+ city: 'city',
+ dawn: 'dawn',
+ esplanade: 'esplanade',
+ forest: 'forest',
+ hall: 'hall',
+ lab: 'lab',
+ lobby: 'lobby',
+ night: 'night',
+ park: 'park',
+ sky: 'sky',
+ studio: 'studio',
+ sunrise: 'sunrise',
+ sunset: 'sunset',
+ venice: 'venice',
+ warehouse: 'warehouse',
+ workshop: 'workshop',
 }
 
 export type PresetsType = keyof typeof presetsObj

yarn.lock

@@ -2199,6 +2199,11 @@
  "@nodelib/fs.scandir" "2.1.5"
  fastq "^1.6.0"
 
+"@pmndrs/assets@^1.6.0":
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/@pmndrs/assets/-/assets-1.6.0.tgz#d5df66d107d64db98331b45a93483f5ecb980561"
+ integrity sha512-fOFrjV6FNYIr29iEhF3JrdTAAo3v98TatmYF3efC1MNiMeN0Sx2BGvGnwgu55s6E9gBxR6yXcm/mkk7gRDT9Bg==
+
 "@react-spring/animated@~9.6.1":
  version "9.6.1"
  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.6.1.tgz#ccc626d847cbe346f5f8815d0928183c647eb425"