DefectingCat.github.io/pages/p/how-to-load-a-background-with-threejs.mdx

---
title: How to load a background with three.js
date: '2022-04-13'
tags: ['three.js', 'JavaScript']
---

import Layout from 'layouts/MDXLayout.tsx';
import dynamic from 'next/dynamic';

export const RUASandpack = dynamic(() =>
  import('components/RUA/RUASandpack.tsx')
);

export const meta = {
  title: 'How to load a background with three.js',
  date: '2022-04-13',
  tags: ['three.js', 'JavaScript'],
};

export default ({ children }) => <Layout {...meta}>{children}</Layout>;

## Three.js setup

First, we need a little bit of setup. Let's create a sence and a camera.

```ts
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
```

The default camera position is in the center at `(0, 0, 0)`.

And now, We need render scene into our document. So we need a WebGL renderer.

```ts
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas')
  antialias: true,
});
```

With a little bit of setup:

```ts
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
```

Render to screen :

```ts
renderer.render(scene, camera);
```

Now, we can get a black canvas in our document.

export const main = `import { useEffect, useRef } from 'react';
import * as THREE from 'three';

export default function App() {
  const ref = useRef(null);
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  useEffect(() => {
    const renderer = new THREE.WebGLRenderer({
      canvas: ref.current,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    const render = (time) => {
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    };
    requestAnimationFrame(render);
    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
      render(0);
    }
    window.addEventListener('resize', onWindowResize);
    return () => {
      window.removeEventListener('resize', onWindowResize);
    };
  }, []);
  return (
    <>
      <canvas ref={ref}></canvas>
    </>
  )
}`;

<RUASandpack
  template="react"
  files={{
    '/App.js': main,
  }}
  options={{
    autorun: false,
  }}
  customSetup={{
    dependencies: {
      'stats.js': '^0.17.0',
      three: '^0.139.2',
      'lil-gui': '^0.16.1',
    },
  }}
/>

## Load a Skybox

Image a camera inside a cube box. The cube box is our scene. just like `const scene = new THREE.Scene();`. The camera is our perspect camera.

```ts
new THREE.PerspectiveCamera();
```

Now, we are inside of the cube box. The inside texture of the box is our sky. Our camera can see all six texture surround ours give ours the illusion the we are within a larger environment.

We know how skybox works. But what is a skybox?

### Texture

![Skybox_example.png](/images/p/how-to-load-a-background-with-threejs/Skybox_example.png)