drei

@react-3/섬유에 대한 유용한 도우미와 완벽하게 기능하는 기성 추상화 컬렉션이 점점 늘어나고 있습니다.

다른 사람에게 유용할 만큼 일반적인 구성 요소를 만든다면 기여하는 것을 고려해 보세요!

npm install @react-three/drei

중요한

이 패키지는 three/examples/jsm 대신 독립형 three-stdlib 사용하고 있습니다.

기본 사용법

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

반응 네이티브

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

라이브러리의 native 경로는 Html 또는 Loader 내보내지 않습니다 . 라이브러리의 기본 내보내기는 Html 및 Loader 내보내는 web 입니다.

선적 서류 비치

https://pmndrs.github.io/drei

오래된 문서

경고 다음은 문서 웹 사이트에 대한 새로운 해당 위치가 포함된 앵커 링크의 아카이브입니다. 아래 링크는 업데이트하지 마세요. 참고용으로만 사용하세요.

카메라

관점카메라

문서가 여기로 이동되었습니다.

직교카메라

문서가 여기로 이동되었습니다.

큐브카메라

문서가 여기로 이동되었습니다.

통제 수단

카메라 컨트롤

문서가 여기로 이동되었습니다.

스크롤컨트롤

문서가 여기로 이동되었습니다.

프리젠테이션컨트롤

문서가 여기로 이동되었습니다.

키보드 컨트롤

문서가 여기로 이동되었습니다.

얼굴 컨트롤

문서가 여기로 이동되었습니다.

MotionPathControl

문서가 여기로 이동되었습니다.

기즈모

기즈모헬퍼

문서가 여기로 이동되었습니다.

피벗 컨트롤

문서가 여기로 이동되었습니다.

드래그 컨트롤

문서가 여기로 이동되었습니다.

변환 컨트롤

문서가 여기로 이동되었습니다.

그리드

문서가 여기로 이동되었습니다.

도우미 / useHelper

문서가 여기로 이동되었습니다.

모양

평면, 상자, 구체, 원, 원뿔, 원통, 튜브, 원환체, TorusKnot, 반지, 사면체, 다면체, 정이십면체, 정팔면체, 정십이면체, 돌출, 선반, 모양

문서가 여기로 이동되었습니다.

둥근 상자

문서가 여기로 이동되었습니다.

스크린쿼드

문서가 여기로 이동되었습니다.

선

문서가 여기로 이동되었습니다.

2차베지어선

문서가 여기로 이동되었습니다.

큐빅베지어선

문서가 여기로 이동되었습니다.

CatmullRomLine

문서가 여기로 이동되었습니다.

페이스메쉬

문서가 여기로 이동되었습니다.

추상화

영상

문서가 여기로 이동되었습니다.

텍스트

문서가 여기로 이동되었습니다.

텍스트3D

문서가 여기로 이동되었습니다.

효과

문서가 여기로 이동되었습니다.

위치 오디오

문서가 여기로 이동되었습니다.

광고 게시판

문서가 여기로 이동되었습니다.

스크린스페이스

문서가 여기로 이동되었습니다.

스크린사이저

문서가 여기로 이동되었습니다.

그라데이션질감

문서가 여기로 이동되었습니다.

가장자리

문서가 여기로 이동되었습니다.

요점

문서가 여기로 이동되었습니다.

자취

문서가 여기로 이동되었습니다.

샘플러

문서가 여기로 이동되었습니다.

계산된 속성

문서가 여기로 이동되었습니다.

클론

문서가 여기로 이동되었습니다.

사용애니메이션

문서가 여기로 이동되었습니다.

마칭큐브

문서가 여기로 이동되었습니다.

데칼

문서가 여기로 이동되었습니다.

SVG

문서가 여기로 이동되었습니다.

Ascii렌더러

문서가 여기로 이동되었습니다.

스플랫

문서가 여기로 이동되었습니다.

셰이더

메시반사재질

문서가 여기로 이동되었습니다.

메쉬워블 머티리얼

문서가 여기로 이동되었습니다.

메쉬왜곡재료

문서가 여기로 이동되었습니다.

메시굴절재료

문서가 여기로 이동되었습니다.

메시전송재료

문서가 여기로 이동되었습니다.

MeshDiscardMaterial

문서가 여기로 이동되었습니다.

포인트 머티리얼

문서가 여기로 이동되었습니다.

부드러운 그림자

문서가 여기로 이동되었습니다.

셰이더재료

문서가 여기로 이동되었습니다.

수정자

곡선수정자

문서가 여기로 이동되었습니다.

기타

useContextBridge

문서가 여기로 이동되었습니다.

예

문서가 여기로 이동되었습니다.

HTML

문서가 여기로 이동되었습니다.

CycleRaycast

문서가 여기로 이동되었습니다.

선택하다

문서가 여기로 이동되었습니다.

스프라이트 애니메이터

문서가 여기로 이동되었습니다.

통계

문서가 여기로 이동되었습니다.

통계Gl

문서가 여기로 이동되었습니다.

와이어프레임

문서가 여기로 이동되었습니다.

useDepthBuffer

문서가 여기로 이동되었습니다.

FBO / 사용FBO

문서가 여기로 이동되었습니다.

사용카메라

문서가 여기로 이동되었습니다.

CubeCamera / useCubeCamera

문서가 여기로 이동되었습니다.

DetectGPU / useDetectGPU

문서가 여기로 이동되었습니다.

useAspect

문서가 여기로 이동되었습니다.

사용커서

문서가 여기로 이동되었습니다.

사용교차

문서가 여기로 이동되었습니다.

useBoxProjectedEnv

문서가 여기로 이동되었습니다.

트레일 / 용도트레일

문서가 여기로 이동되었습니다.

표면 샘플러 사용

문서가 여기로 이동되었습니다.

얼굴랜드마커

문서가 여기로 이동되었습니다.

로드 중

짐을 싣는 사람

문서가 여기로 이동되었습니다.

진행 / 사용진행

문서가 여기로 이동되었습니다.

Gltf / 사용GLTF

문서가 여기로 이동되었습니다.

Fbx/사용FBX

문서가 여기로 이동되었습니다.

질감 / 용도질감

문서가 여기로 이동되었습니다.

Ktx2 / KTX2 사용

문서가 여기로 이동되었습니다.

CubeTexture / 사용CubeTexture

문서가 여기로 이동되었습니다.

VideoTexture / 사용VideoTexture

문서가 여기로 이동되었습니다.

TrailTexture / 사용TrailTexture

문서가 여기로 이동되었습니다.

사용글꼴

문서가 여기로 이동되었습니다.

사용SpriteLoader

문서가 여기로 이동되었습니다.

성능

인스턴스

문서가 여기로 이동되었습니다.

병합됨

문서가 여기로 이동되었습니다.

전철기

문서가 여기로 이동되었습니다.

세그먼트

문서가 여기로 이동되었습니다.

상세한

문서가 여기로 이동되었습니다.

예압

문서가 여기로 이동되었습니다.

그림자 굽기

문서가 여기로 이동되었습니다.

메쉬바운드

문서가 여기로 이동되었습니다.

적응형Dpr

문서가 여기로 이동되었습니다.

적응형 이벤트

문서가 여기로 이동되었습니다.

Bvh

문서가 여기로 이동되었습니다.

성능 모니터

문서가 여기로 이동되었습니다.

포털

후드

문서가 여기로 이동되었습니다.

보다

문서가 여기로 이동되었습니다.

렌더텍스처

문서가 여기로 이동되었습니다.

렌더큐브텍스처

문서가 여기로 이동되었습니다.

피쉬아이

문서가 여기로 이동되었습니다.

마스크

문서가 여기로 이동되었습니다.

메시포털재료

문서가 여기로 이동되었습니다.

각색

센터

문서가 여기로 이동되었습니다.

크기 조정

문서가 여기로 이동되었습니다.

BBA앵커

문서가 여기로 이동되었습니다.

범위

문서가 여기로 이동되었습니다.

카메라쉐이크

문서가 여기로 이동되었습니다.

뜨다

문서가 여기로 이동되었습니다.

단계

문서가 여기로 이동되었습니다.

배경

문서가 여기로 이동되었습니다.

그림자

문서가 여기로 이동되었습니다.

화선

문서가 여기로 이동되었습니다.

접촉그림자

문서가 여기로 이동되었습니다.

무작위 조명

문서가 여기로 이동되었습니다.

누적그림자

문서가 여기로 이동되었습니다.

스포트라이트

문서가 여기로 이동되었습니다.

스폿라이트그림자

문서가 여기로 이동되었습니다.

환경

문서가 여기로 이동되었습니다.

라이트포머

문서가 여기로 이동되었습니다.

하늘

문서가 여기로 이동되었습니다.

별

문서가 여기로 이동되었습니다.

반짝임

문서가 여기로 이동되었습니다.

구름

문서가 여기로 이동되었습니다.

사용환경

문서가 여기로 이동되었습니다.

MatcapTexture / 사용MatcapTexture

문서가 여기로 이동되었습니다.

NormalTexture / 사용NormalTexture

문서가 여기로 이동되었습니다.

섀도우알파

문서가 여기로 이동되었습니다.

데브

설치하다

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