drei

Semakin banyak koleksi pembantu berguna dan abstraksi siap pakai yang berfungsi penuh untuk @react-three/fiber.

Jika Anda membuat komponen yang cukup umum untuk berguna bagi orang lain, pikirkan tentang KONTRIBUSI!

npm install @react-three/drei

Penting

paket ini menggunakan three-stdlib yang berdiri sendiri, bukan three/examples/jsm .

Penggunaan dasar

 import { PerspectiveCamera , PositionalAudio , ... } from '@react-three/drei' 

Bereaksi-asli

 import { PerspectiveCamera , PositionalAudio , ... } from '@react-three/drei/native'

Rute native perpustakaan tidak mengekspor Html atau Loader . Ekspor default perpustakaan adalah web yang mengekspor Html dan Loader .

Dokumentasi

https://pmndrs.github.io/drei

Dokumen lama

[!PERINGATAN] Di bawah ini adalah arsip tautan jangkar dengan lokasi barunya masing-masing ke situs dokumentasi. Jangan perbarui tautan di bawah ini, itu hanya untuk referensi.

Kamera

Kamera Perspektif

Dokumentasi telah dipindahkan ke sini

Kamera Ortografi

Dokumentasi telah dipindahkan ke sini

Kamera Kubus

Dokumentasi telah dipindahkan ke sini

Kontrol

Kontrol Kamera

Dokumentasi telah dipindahkan ke sini

Kontrol Gulir

Dokumentasi telah dipindahkan ke sini

Kontrol Presentasi

Dokumentasi telah dipindahkan ke sini

Kontrol Keyboard

Dokumentasi telah dipindahkan ke sini

Kontrol Wajah

Dokumentasi telah dipindahkan ke sini

Kontrol Jalur Gerak

Dokumentasi telah dipindahkan ke sini

alat

GizmoHelper

Dokumentasi telah dipindahkan ke sini

Kontrol Pivot

Dokumentasi telah dipindahkan ke sini

Kontrol Tarik

Dokumentasi telah dipindahkan ke sini

TransformasiKontrol

Dokumentasi telah dipindahkan ke sini

jaringan

Dokumentasi telah dipindahkan ke sini

Pembantu/penggunaanHelper

Dokumentasi telah dipindahkan ke sini

Bentuk

Bidang, Kotak, Bola, Lingkaran, Kerucut, Silinder, Tabung, Torus, TorusKnot, Cincin, Tetrahedron, Polihedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Bubut, Bentuk

Dokumentasi telah dipindahkan ke sini

Kotak Bulat

Dokumentasi telah dipindahkan ke sini

LayarQuad

Dokumentasi telah dipindahkan ke sini

Garis

Dokumentasi telah dipindahkan ke sini

Garis Bezier Kuadrat

Dokumentasi telah dipindahkan ke sini

Garis CubicBezier

Dokumentasi telah dipindahkan ke sini

CatmullRomLine

Dokumentasi telah dipindahkan ke sini

jaring muka

Dokumentasi telah dipindahkan ke sini

Abstraksi

Gambar

Dokumentasi telah dipindahkan ke sini

Teks

Dokumentasi telah dipindahkan ke sini

Teks3D

Dokumentasi telah dipindahkan ke sini

Efek

Dokumentasi telah dipindahkan ke sini

Audio Posisi

Dokumentasi telah dipindahkan ke sini

Papan iklan

Dokumentasi telah dipindahkan ke sini

Ruang Layar

Dokumentasi telah dipindahkan ke sini

Pengukur Layar

Dokumentasi telah dipindahkan ke sini

Tekstur Gradien

Dokumentasi telah dipindahkan ke sini

Tepian

Dokumentasi telah dipindahkan ke sini

Garis besar

Dokumentasi telah dipindahkan ke sini

Jejak

Dokumentasi telah dipindahkan ke sini

Pengambil sampel

Dokumentasi telah dipindahkan ke sini

Atribut Terhitung

Dokumentasi telah dipindahkan ke sini

Klon

Dokumentasi telah dipindahkan ke sini

gunakanAnimasi

Dokumentasi telah dipindahkan ke sini

MarchingCubes

Dokumentasi telah dipindahkan ke sini

Stiker

Dokumentasi telah dipindahkan ke sini

Svg

Dokumentasi telah dipindahkan ke sini

AsciiRenderer

Dokumentasi telah dipindahkan ke sini

Percikan

Dokumentasi telah dipindahkan ke sini

shader

Bahan Reflektor Jala

Dokumentasi telah dipindahkan ke sini

Bahan Goyangan Jala

Dokumentasi telah dipindahkan ke sini

Bahan Distorsi Jala

Dokumentasi telah dipindahkan ke sini

Bahan Refraksi Mesh

Dokumentasi telah dipindahkan ke sini

Bahan Transmisi Mesh

Dokumentasi telah dipindahkan ke sini

MeshBuangBahan

Dokumentasi telah dipindahkan ke sini

Bahan Titik

Dokumentasi telah dipindahkan ke sini

Bayangan Lembut

Dokumentasi telah dipindahkan ke sini

bahan shader

Dokumentasi telah dipindahkan ke sini

Pengubah

Pengubah Kurva

Dokumentasi telah dipindahkan ke sini

Lain-lain

gunakanContextBridge

Dokumentasi telah dipindahkan ke sini

Contoh

Dokumentasi telah dipindahkan ke sini

HTML

Dokumentasi telah dipindahkan ke sini

SiklusRaycast

Dokumentasi telah dipindahkan ke sini

Memilih

Dokumentasi telah dipindahkan ke sini

Animator Sprite

Dokumentasi telah dipindahkan ke sini

Statistik

Dokumentasi telah dipindahkan ke sini

StatistikGl

Dokumentasi telah dipindahkan ke sini

Bingkai gambar

Dokumentasi telah dipindahkan ke sini

gunakanDepthBuffer

Dokumentasi telah dipindahkan ke sini

Fbo / gunakanFBO

Dokumentasi telah dipindahkan ke sini

gunakan Kamera

Dokumentasi telah dipindahkan ke sini

CubeCamera / gunakanCubeCamera

Dokumentasi telah dipindahkan ke sini

DeteksiGPU / gunakanDeteksiGPU

Dokumentasi telah dipindahkan ke sini

useAspect

Dokumentasi telah dipindahkan ke sini

gunakan Kursor

Dokumentasi telah dipindahkan ke sini

gunakanIntersect

Dokumentasi telah dipindahkan ke sini

gunakanBoxProjectedEnv

Dokumentasi telah dipindahkan ke sini

Jejak / useTrail

Dokumentasi telah dipindahkan ke sini

gunakanSurfaceSampler

Dokumentasi telah dipindahkan ke sini

FaceLandmarker

Dokumentasi telah dipindahkan ke sini

Memuat

Pemuat

Dokumentasi telah dipindahkan ke sini

Kemajuan / penggunaan Kemajuan

Dokumentasi telah dipindahkan ke sini

Gltf / gunakanGLTF

Dokumentasi telah dipindahkan ke sini

Fbx / gunakanFBX

Dokumentasi telah dipindahkan ke sini

Tekstur / penggunaanTekstur

Dokumentasi telah dipindahkan ke sini

Ktx2 / gunakanKTX2

Dokumentasi telah dipindahkan ke sini

CubeTexture / gunakanCubeTexture

Dokumentasi telah dipindahkan ke sini

VideoTekstur / gunakanVideoTekstur

Dokumentasi telah dipindahkan ke sini

TrailTexture / gunakanTrailTexture

Dokumentasi telah dipindahkan ke sini

gunakanFont

Dokumentasi telah dipindahkan ke sini

gunakanSpriteLoader

Dokumentasi telah dipindahkan ke sini

Pertunjukan

Contoh

Dokumentasi telah dipindahkan ke sini

Digabung

Dokumentasi telah dipindahkan ke sini

Poin

Dokumentasi telah dipindahkan ke sini

Segmen

Dokumentasi telah dipindahkan ke sini

Terperinci

Dokumentasi telah dipindahkan ke sini

Pramuat

Dokumentasi telah dipindahkan ke sini

PanggangBayangan

Dokumentasi telah dipindahkan ke sini

batas jala

Dokumentasi telah dipindahkan ke sini

AdaptifDpr

Dokumentasi telah dipindahkan ke sini

Peristiwa Adaptif

Dokumentasi telah dipindahkan ke sini

Bvh

Dokumentasi telah dipindahkan ke sini

Monitor Kinerja

Dokumentasi telah dipindahkan ke sini

Portal

Hud

Dokumentasi telah dipindahkan ke sini

Melihat

Dokumentasi telah dipindahkan ke sini

RenderTekstur

Dokumentasi telah dipindahkan ke sini

RenderCubeTekstur

Dokumentasi telah dipindahkan ke sini

mata ikan

Dokumentasi telah dipindahkan ke sini

Masker

Dokumentasi telah dipindahkan ke sini

Bahan Portal Mesh

Dokumentasi telah dipindahkan ke sini

Memanggungkan

Tengah

Dokumentasi telah dipindahkan ke sini

Ubah ukuran

Dokumentasi telah dipindahkan ke sini

BBAnchor

Dokumentasi telah dipindahkan ke sini

Batas

Dokumentasi telah dipindahkan ke sini

Goyang Kamera

Dokumentasi telah dipindahkan ke sini

Mengambang

Dokumentasi telah dipindahkan ke sini

Panggung

Dokumentasi telah dipindahkan ke sini

Latar belakang

Dokumentasi telah dipindahkan ke sini

Bayangan

Dokumentasi telah dipindahkan ke sini

kaustik

Dokumentasi telah dipindahkan ke sini

Hubungi Bayangan

Dokumentasi telah dipindahkan ke sini

Cahaya Acak

Dokumentasi telah dipindahkan ke sini

Bayangan Akumulatif

Dokumentasi telah dipindahkan ke sini

Menyoroti

Dokumentasi telah dipindahkan ke sini

Bayangan Cahaya Sorotan

Dokumentasi telah dipindahkan ke sini

Lingkungan

Dokumentasi telah dipindahkan ke sini

pembentuk cahaya

Dokumentasi telah dipindahkan ke sini

Langit

Dokumentasi telah dipindahkan ke sini

Bintang

Dokumentasi telah dipindahkan ke sini

Berkilau

Dokumentasi telah dipindahkan ke sini

Awan

Dokumentasi telah dipindahkan ke sini

gunakan Lingkungan

Dokumentasi telah dipindahkan ke sini

MatcapTexture / gunakanMatcapTexture

Dokumentasi telah dipindahkan ke sini

Tekstur Normal / gunakanTekstur Normal

Dokumentasi telah dipindahkan ke sini

BayanganAlpha

Dokumentasi telah dipindahkan ke sini

Dev

MEMASANG

$ corepack enable
$ yarn install

Tes

Lokal

Prasyarat:

• $ npx playwright install

Untuk menjalankan tes visual secara lokal:

$ yarn build
$ yarn test

Untuk memperbarui cuplikan:

$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test 

Buruh pelabuhan

Penting

Snapshot bergantung pada sistem, jadi untuk menjalankan penulis naskah di lingkungan yang sama dengan CI:

$ docker run --init --rm 
    -v $( pwd ) :/app -w /app 
    ghcr.io/pmndrs/playwright:drei 
      sh -c " corepack enable && yarn install && yarn build && yarn test "

Untuk memperbarui cuplikan:

$ docker run --init --rm 
    -v $( pwd ) :/app -w /app 
    -e PLAYWRIGHT_UPDATE_SNAPSHOTS=1 
    ghcr.io/pmndrs/playwright:drei 
      sh -c " corepack enable && yarn install && yarn build && yarn test "