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

@react-three/fiber

Package Overview
Dependencies
Maintainers
15
Versions
247
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-three/fiber

A React renderer for Threejs

  • 7.0.22
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
437K
increased by7.41%
Maintainers
15
Weekly downloads
 
Created

What is @react-three/fiber?

@react-three/fiber is a React renderer for Three.js, enabling the creation of 3D graphics and animations using React components. It simplifies the process of integrating Three.js with React, allowing developers to leverage React's declarative approach to build complex 3D scenes.

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

Creating a Basic 3D Scene

This code demonstrates how to create a basic 3D scene with two boxes using @react-three/fiber. The `Canvas` component sets up the 3D rendering context, and the `Box` component from `@react-three/drei` is used to add 3D objects to the scene.

```jsx
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { Box } from '@react-three/drei';

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
    </Canvas>
  );
}

export default App;
```

Animating Objects

This code shows how to animate a 3D object using @react-three/fiber. The `useFrame` hook is used to update the rotation of the box on every frame, creating a continuous animation.

```jsx
import React, { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';

function RotatingBox() {
  const mesh = useRef();
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
  return (
    <mesh ref={mesh}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={'orange'} />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <RotatingBox />
    </Canvas>
  );
}

export default App;
```

Loading 3D Models

This code demonstrates how to load and display a 3D model using @react-three/fiber. The `useGLTF` hook from `@react-three/drei` is used to load a GLTF model, which is then added to the scene using the `primitive` component.

```jsx
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { useGLTF } from '@react-three/drei';

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

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Model />
    </Canvas>
  );
}

export default App;
```

Other packages similar to @react-three/fiber

Keywords

FAQs

Package last updated on 10 Dec 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