drei

شفرة المصدر الأخرى

v9.117.3

تنزيل

شعار

مجموعة متزايدة من المساعدين المفيدين والتجريدات الجاهزة للعمل بكامل طاقتها لـ @react-three/fiber.

إذا قمت بإنشاء مكون عام بما يكفي ليكون مفيدًا للآخرين، ففكر في المساهمة!

npm install @react-three/drei

مهم

تستخدم هذه الحزمة حزمة three-stdlib المستقلة بدلاً من three/examples/jsm .

الاستخدام الأساسي

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

رد الفعل الأصلي

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

لا يقوم المسار native للمكتبة بتصدير Html أو Loader . التصدير الافتراضي للمكتبة هو web الذي يقوم بتصدير Html و Loader .

التوثيق

https://pmndrs.github.io/drei

وثيقة قديمة

[!تحذير] يوجد أدناه أرشيف للروابط المرساة مع مواقعها الجديدة إلى موقع التوثيق. لا تقم بتحديث الروابط أدناه، فهي للإشارة فقط.

الكاميرات

كاميرا المنظور

تم نقل التوثيق هنا

الكاميرا الهجائية

تم نقل التوثيق هنا

CubeCamera

تم نقل التوثيق هنا

الضوابط

ضوابط الكاميرا

تم نقل التوثيق هنا

عناصر التحكم في التمرير

تم نقل التوثيق هنا

ضوابط العرض التقديمي

تم نقل التوثيق هنا

ضوابط لوحة المفاتيح

تم نقل التوثيق هنا

ضوابط الوجه

تم نقل التوثيق هنا

MotionPathControls

تم نقل التوثيق هنا

الأدوات

GizmoHelper

تم نقل التوثيق هنا

PivotControls

تم نقل التوثيق هنا

ضوابط السحب

تم نقل التوثيق هنا

TransformControls

تم نقل التوثيق هنا

شبكة

تم نقل التوثيق هنا

مساعد / useHelper

تم نقل التوثيق هنا

الأشكال

مستوى، صندوق، كرة، دائرة، مخروط، أسطوانة، أنبوب، طور، عقدة طورية، حلقة، رباعي السطوح، متعدد السطوح، عشروني الوجوه، ثماني السطوح، اثني عشري السطوح، مقذوف، مخرطة، شكل

تم نقل التوثيق هنا

RoundedBox

تم نقل التوثيق هنا

ScreenQuad

تم نقل التوثيق هنا

خط

تم نقل التوثيق هنا

QuadraticBezierLine

تم نقل التوثيق هنا

CubicBezierLine

تم نقل التوثيق هنا

كاتمولروملين

تم نقل التوثيق هنا

شبكة الوجه

تم نقل التوثيق هنا

التجريدات

صورة

تم نقل التوثيق هنا

نص

تم نقل التوثيق هنا

نص3D

تم نقل التوثيق هنا

التأثيرات

تم نقل التوثيق هنا

الصوت الموضعي

تم نقل التوثيق هنا

لوحة الإعلانات

تم نقل التوثيق هنا

مساحة الشاشة

تم نقل التوثيق هنا

حجم الشاشة

تم نقل التوثيق هنا

GradientTexture

تم نقل التوثيق هنا

الحواف

تم نقل التوثيق هنا

الخطوط العريضة

تم نقل التوثيق هنا

أثر

تم نقل التوثيق هنا

أخذ العينات

تم نقل التوثيق هنا

السمة المحسوبة

تم نقل التوثيق هنا

استنساخ

تم نقل التوثيق هنا

useAnimations

تم نقل التوثيق هنا

MarchingCubes

تم نقل التوثيق هنا

صائق

تم نقل التوثيق هنا

SVG

تم نقل التوثيق هنا

AsciiRenderer

تم نقل التوثيق هنا

ضجة

تم نقل التوثيق هنا

تظليل

مادة عاكسة شبكية

تم نقل التوثيق هنا

مادة شبكية متذبذبة

تم نقل التوثيق هنا

MeshDistortMaterial

تم نقل التوثيق هنا

مادة الانكسار الشبكية

تم نقل التوثيق هنا

مادة نقل شبكية

تم نقل التوثيق هنا

MeshDiscardMaterial

تم نقل التوثيق هنا

مادة النقطة

تم نقل التوثيق هنا

الظلال الناعمة

تم نقل التوثيق هنا

shaderMaterial

تم نقل التوثيق هنا

المعدلات

معدل المنحنى

تم نقل التوثيق هنا

متنوعات

useContextBridge

تم نقل التوثيق هنا

مثال

تم نقل التوثيق هنا

أتش تي أم أل

تم نقل التوثيق هنا

CycleRaycast

تم نقل التوثيق هنا

يختار

تم نقل التوثيق هنا

العفريت الرسوم المتحركة

تم نقل التوثيق هنا

احصائيات

تم نقل التوثيق هنا

إحصائياتGl

تم نقل التوثيق هنا

الإطار السلكي

تم نقل التوثيق هنا

useDepthBuffer

تم نقل التوثيق هنا

Fbo / استخدمFBO

تم نقل التوثيق هنا

com.useCamera

تم نقل التوثيق هنا

CubeCamera / استخدم CubeCamera

تم نقل التوثيق هنا

DetectGPU / useDetectGPU

تم نقل التوثيق هنا

useAspect

تم نقل التوثيق هنا

useCursor

تم نقل التوثيق هنا

useIntersect

تم نقل التوثيق هنا

useBoxProjectedEnv

تم نقل التوثيق هنا

درب / استخدام درب

تم نقل التوثيق هنا

useSurfaceSampler

تم نقل التوثيق هنا

FaceLandmarker

تم نقل التوثيق هنا

تحميل

محمل

تم نقل التوثيق هنا

التقدم / الاستخدامالتقدم

تم نقل التوثيق هنا

جلتف / استخدمGLTF

تم نقل التوثيق هنا

Fbx / استخدمFBX

تم نقل التوثيق هنا

الملمس / الاستخدام

تم نقل التوثيق هنا

Ktx2/استخدامKTX2

تم نقل التوثيق هنا

CubeTexture / useCubeTexture

تم نقل التوثيق هنا

VideoTexture / useVideoTexture

تم نقل التوثيق هنا

TrailTexture / useTrailTexture

تم نقل التوثيق هنا

useFont

تم نقل التوثيق هنا

useSpriteLoader

تم نقل التوثيق هنا

أداء

المثيلات

تم نقل التوثيق هنا

تم الدمج

تم نقل التوثيق هنا

نقاط

تم نقل التوثيق هنا

شرائح

تم نقل التوثيق هنا

مفصل

تم نقل التوثيق هنا

التحميل المسبق

تم نقل التوثيق هنا

بيك شادوز

تم نقل التوثيق هنا

MeshBounds

تم نقل التوثيق هنا

AdaptiveDpr

تم نقل التوثيق هنا

AdaptiveEvents

تم نقل التوثيق هنا

BVH

تم نقل التوثيق هنا

مراقب الأداء

تم نقل التوثيق هنا

البوابات

هود

تم نقل التوثيق هنا

منظر

تم نقل التوثيق هنا

RenderTexture

تم نقل التوثيق هنا

RenderCubeTexture

تم نقل التوثيق هنا

عين السمكة

تم نقل التوثيق هنا

قناع

تم نقل التوثيق هنا

MeshPortalMaterial

تم نقل التوثيق هنا

التدريج

مركز

تم نقل التوثيق هنا

تغيير الحجم

تم نقل التوثيق هنا

BBAnchor

تم نقل التوثيق هنا

الحدود

تم نقل التوثيق هنا

اهتزاز الكاميرا

تم نقل التوثيق هنا

يطفو

تم نقل التوثيق هنا

منصة

تم نقل التوثيق هنا

الخلفية

تم نقل التوثيق هنا

الظل

تم نقل التوثيق هنا

المواد الكاوية

تم نقل التوثيق هنا

اتصل بالظلال

تم نقل التوثيق هنا

RandomizedLight

تم نقل التوثيق هنا

الظلال التراكمية

تم نقل التوثيق هنا

أضواء كاشفة

تم نقل التوثيق هنا

com.SpotLightShadow

تم نقل التوثيق هنا

بيئة

تم نقل التوثيق هنا

لايتفورمر

تم نقل التوثيق هنا

سماء

تم نقل التوثيق هنا

النجوم

تم نقل التوثيق هنا

البريق

تم نقل التوثيق هنا

سحاب

تم نقل التوثيق هنا

useEnvironment

تم نقل التوثيق هنا

MatcapTexture / useMatcapTexture

تم نقل التوثيق هنا

NormalTexture / useNormalTexture

تم نقل التوثيق هنا

ShadowAlpha

تم نقل التوثيق هنا

ديف

ثَبَّتَ

$ corepack enable
$ yarn install

امتحان

محلي

المتطلبات المسبقة:

```
$ npx playwright install
```

لإجراء الاختبارات المرئية محليًا:

$ yarn build
$ yarn test

لتحديث لقطة:

$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test

عامل ميناء

مهم

تعتمد اللقطات على النظام، لذا لتشغيل الكاتب المسرحي في نفس بيئة 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 "

لتحديث لقطة:

$ 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 "

يوسع

معلومات إضافية