Сам код:
// Three.js - Fundamentals with light
// from
https://threejsfundamentals.org/threejs/threejs-fundamentals-with-light.htmlimport * as THREE from '
https://threejsfundamentals.org/threejs/resources/threejs/r112/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
}
const radiusTop = 4;
const radiusBottom = 4;
const height = 8;
const radialSegments = 12;
const geometry = new THREE.CylinderBufferGeometry(radiusTop, radiusBottom, height, radialSegments);
const material = new THREE.MeshPhongMaterial({color: 0x44aa88}); // greenish blue
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function render(time) {
time *= 0.001; // convert time to seconds
cube.rotation.x = time;
cube.rotation.y = time;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
