abhi78nath / ThreeJs-World-Tutorial

This repository contains a React Three Fiber 3D world with ConvAI NPCs. The 3D world is rendered using Three.js and React Three Fiber. The NPCs are created using Convai.

Building your own NPC Universe on web browser

**Prerequisites**

A foundational understanding of THREE JS and React three fiber. Basic scene setup.

import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'


const App = () => {
  return (
    <Canvas
      camera={{
        position: [5, 5, -5],
        fov: 75,
      }}
    >
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  )
}

createRoot(document.getElementById('root')!).render(<App />)