Krok 1 – Začněte se startovacím souborem webpacku
Krok 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>
Krok 3 – Style.css:
html,
body
{
overflow: hidden;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: 0;
}
Krok 4 – Script.js
yarn add three
- Získejte plátno, velikosti
- nové
Scene
-
nový
Mesh
Geometry
Material
scene.add(mesh)
-
nový
Camera
scene.add(camera)
-
nový
OrbitControls(camera, canvas)
- .enableDamping =true
-
nový
WebGLRenderer(camera, canvas)
- setSize
- setPixel Ratio:
- render (scéna, kamera)
-
resize event
Listner- aktualizujte velikosti.šířka/výška
- aktualizovat fotoaparát
- .aspect(size.w/size.h)
- updateProjectionMatrix()
- aktualizovat renderer:
- setsize
- setpixelRatio
-
Clock() / Animate()
- nové
Three.Clock()
- tick() - requestAnimation Frame
elapsedTime
controls.update()
renderer.render(scéna, kamera)- volání tick()
- nové
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();