Skip to main content

Initial Setup

This is the boilerplate code required for starting a new ThreeJs Project.

Basic Setup​

npx create-react-app my-app --template typescript
cd my-app
yarn add three
yarn add @types/three --dev
src/index.css
*
{
    margin: 0;
    padding: 0;
}
html,
body
{
    overflow: hidden;
}
src/App.css
.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
}
  • Run Dev Server
yarn start
  • Build Project
yarn build

Basic Scene​

App.tsx
import React, { useRef, useEffect } from 'react';
import * as THREE from 'three'
import './App.css';

function App() {
  const mountRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const scene = new THREE.Scene()

    const geometry = new THREE.CircleGeometry(1, 50)
    const material = new THREE.MeshBasicMaterial({color: 0xff0000})
    const mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)

    const sizes = {
        width: window.innerWidth,
        height: window.innerHeight
    }

    const camera = new THREE.PerspectiveCamera(75, sizes.width/ sizes.height)
    camera.position.z = 2.0
    scene.add(camera)

    const renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    const canvas = mountRef?.current?.appendChild(renderer.domElement);
    renderer.setSize(sizes.width, sizes.height)

    renderer.render(scene, camera)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

    window.addEventListener('resize', () => {
        sizes.width = window.innerWidth
        sizes.height = window.innerHeight
        camera.aspect = sizes.width / sizes.height
        camera.updateProjectionMatrix()
        renderer.setSize(sizes.width, sizes.height)
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    })

    const tick = () => {
        renderer.render(scene, camera)
        window.requestAnimationFrame(tick)
    }

    tick()
  }, [])

  return <div ref={mountRef}></div>;
}

export default App;
  • Result

Basic Scene Image