three.js responsive starter template:
Tags: threejs, html, css, javascript
Published: 2022-01-07 17:07:07

## Step 1 - Start with the [webpack starter file](https://github.com/dharmikumbhani/webpack-multipage-starter)

## Step 2 - index.hml
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic-Webpack Setup + three.js</title>
</head>
<body>
    <canvas class="webgl"></canvas>
</body>
</html>
```

## Step 3 - Style.css:
```css
html,
body
{
    overflow: hidden;
}
.webgl {
    position: fixed;
    top: 0;
    left: 0;
    outline: 0;
}
```

## Step 4 - Script.js
`yarn add three`
  1. Get canvas, sizes
  2. new `Scene`
  3. new `Mesh`
      - `Geometry`
      - `Material`
     
      scene.add(mesh)

  4. new `Camera`

      scene.add(camera)      

  5. new `OrbitControls(camera, canvas)`
     - .enableDamping = true
  6. new `WebGLRenderer(camera, canvas)`
     - setSize
     - setPixel Ratio:
     - render(scene, camera)
  7. `resize event` Listner
     - update sizes.width/height
     - update camera
         - .aspect(size.w/size.h)
         - updateProjectionMatrix()
     - update renderer:
         - setsize
         - setpixelRatio
  8. Clock() / Animate()
     - new `Three.Clock()`
     - tick() - requestAnimation Frame
         - `elapsedTime`
         - `controls.update()`          
            renderer.render(scene, camera)    
         - call tick()

```jsx
import './style.css'
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

/**
 * from dom and window and other objects
 */
// ====== Canvas
const canvas = document.querySelector('.webgl');
// ====== Sizes
 const size = {
    width: window.innerWidth,
    height: window.innerHeight
}

//=====================
/**
 * Scene
 */
const scene = new THREE.Scene();

//======================
/**
 * Mesh
 */
const cubeGeometry = new THREE.BoxBufferGeometry(2, 2, 2)
const cubeMaterial = new THREE.MeshBasicMaterial({
    color: '#00ff00',
})
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cubeMesh);

//======================
/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(45, size.width/size.height, 0.1, 100);
camera.position.x = 4;
camera.position.y = 2;
camera.position.z = 4;
scene.add(camera)

//======================
/**
 * Controls
 */
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true

//======================
/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})
renderer.setSize(size.width, size.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.render(scene, camera)
// renderer update
window.addEventListener('resize', () => {
    //Update Sizes:
    size.width = window.innerWidth;
    size.height = window.innerHeight;

    //Camera
    camera.aspect = size.width/size.height
    camera.updateProjectionMatrix()

    //Update renderer:
    renderer.setSize(size.width, size.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

//======================
/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () => {
    const elapsedTime = clock.getElapsedTime()

    //Update Controls
    controls.update()

    renderer.render(scene, camera)

    window.requestAnimationFrame(tick)
}
tick();
```