Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@react-three/drei

Package Overview
Dependencies
Maintainers
5
Versions
888
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-three/drei

useful add-ons for react-three-fiber

  • 3.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
208K
decreased by-28.25%
Maintainers
5
Weekly downloads
 
Created

What is @react-three/drei?

@react-three/drei is a collection of useful helpers and abstractions for react-three-fiber, which is a React renderer for three.js. It provides a wide range of components and utilities to simplify the creation of 3D scenes in React applications.

What are @react-three/drei's main functionalities?

Camera Controls

The OrbitControls component allows you to easily add camera controls to your 3D scene, enabling users to rotate, zoom, and pan the camera.

import { OrbitControls } from '@react-three/drei';

function Scene() {
  return (
    <Canvas>
      <OrbitControls />
      {/* other components */}
    </Canvas>
  );
}

Environment

The Environment component allows you to quickly set up a realistic lighting environment using HDRI images. You can choose from various presets like 'sunset', 'dawn', 'night', etc.

import { Environment } from '@react-three/drei';

function Scene() {
  return (
    <Canvas>
      <Environment preset="sunset" />
      {/* other components */}
    </Canvas>
  );
}

Loading Models

The useGLTF hook allows you to easily load and display GLTF models in your scene. It returns the loaded scene, which you can then use as a primitive object.

import { useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/path/to/model.glb');
  return <primitive object={scene} />;
}

function Scene() {
  return (
    <Canvas>
      <Model />
      {/* other components */}
    </Canvas>
  );
}

Text

The Text component allows you to easily add 3D text to your scene. You can customize the font, size, color, alignment, and other properties.

import { Text } from '@react-three/drei';

function Scene() {
  return (
    <Canvas>
      <Text
        color="black"
        fontSize={1}
        maxWidth={200}
        lineHeight={1}
        letterSpacing={0.02}
        textAlign={'left'}
        font="/path/to/font.woff"
        anchorX="center"
        anchorY="middle"
      >
        Hello World
      </Text>
      {/* other components */}
    </Canvas>
  );
}

Other packages similar to @react-three/drei

Keywords

FAQs

Package last updated on 28 Jan 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc