DEV Community

Dharmi Kumbhani
Dharmi Kumbhani

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

Step 3 - Style.css:

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

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()
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();
Enter fullscreen mode Exit fullscreen mode

Discussion (0)