three.js responsive starter template:

Step 1 - Start with the webpack starter file

Step 2 - index.hml

<!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:

html,
body
{
    overflow: hidden;
}
.webgl {
    position: fixed;
    top: 0;
    left: 0;
    outline: 0;
}

Step 4 - Script.js

yarn add three

Get canvas, sizes
new Scene
new Mesh
- Geometry
- Material
scene.add(mesh)
new Camera

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

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();

Blog

three.js responsive starter template:

Dharmi Kumbhani

Step 1 - Start with the webpack starter file

Step 2 - index.hml

Step 3 - Style.css:

Step 4 - Script.js

Join Our Newsletter. No Spam, Only the good stuff.

Related