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
MeshGeometryMaterial
scene.add(mesh)
-
new
Camerascene.add(camera)
-
new
OrbitControls(camera, canvas)- .enableDamping = true
-
new
WebGLRenderer(camera, canvas)- setSize
- setPixel Ratio:
- render(scene, camera)
-
resize eventListner- 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()
- new
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();
Top comments (0)