Начало работы с Three.js

Создание скелета HTML

‹!DOCTYPE html›
‹html lang="en" ›
‹head›
‹meta charset="UTF-8›
‹title›Three.js‹/title ›
‹link rel="stylesheet" href=""./style.css"›
‹/head›
‹body›

‹script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js'›‹/script›
‹script src=»./script .js”›‹/скрипт›

‹/тело›
‹/html›

Визуализация и просмотр 3D-объекта

Сначала я покажу вам, как это выглядит в коде, а затем объясню, что происходит:

var scene, camera, renderer, box, box2, box3;
var clock = new THREE.Clock();
var time = 0;
var delta = 0;

в этом();

function init(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);

camera = new THREE.PerspectiveCamera( 75 , window.innerWidth / window.innerHeight, 0,1, 1000 );
camera.position.z = 3;

renderer = new THREE.WebGLRenderer();
renderer.setSize ( window.innerWidth , window.innerHeight );
document.body.appendChild( renderer.domElement );

const light = new THREE.DirectionalLight();
light.position .set(0,1,2);
scene.add(light);

константная геометрия = new THREE.BoxGeometry( 1, 1, 1);
константный материал = new THREE.MeshStandardMaterial({color: new THREE.Color('skyblue')});
box = new THREE.Mesh(геометрия, материал);
scene.add(box);

box2 = new THREE.Mesh(геометрия, материал);
box2.position.x = -1.5
scene.add(box2);

box3 = new THREE.Mesh(геометрия, материал);
box3.position.x = 1,5
scene.add(box3);

window.addEventListener( 'resize', onResize, false);

update();
}

function update(){
requestAnimationFrame( update );
renderer.render( сцена, камера );
box.rotation.y += 0,01;
box2.rotation.x + = 0,01;
//box3.rotation.z += 0,05;

delta = clock.getDelta();
time += delta;
box3.rotation.x = time * 2;
box3.position.y = 0,5 + Math.abs(Math.sin (время * 3)) * 2;

box3.rotation.x = время * 4;
box3.position.y -= 0,5 + Math.abs(Math.sin(время * 1)) * 1;

// box3.position.z = Math.cos(время) * 4;

}

function onResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight);
}

Пройдемся по коду:

scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0,1, 1000 );
camera.position.z = 3;

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ) ;
document.body.appendChild( renderer.domElement );

const light = new THREE.DirectionalLight();
light.position.set(0,1,2) ;
scene.add(light);

константная геометрия = new THREE.BoxGeometry( 1, 1, 1);
const material = new THREE.MeshStandardMaterial({color: new THREE.Color('skyblue')});
box = new THREE.Mesh(геометрия, материал);
scene.add(box);

В верхней части примера мы создаем сцену, камеру и средство визуализации. Объект сцены — это контейнер, который используется для хранения и отслеживания всех объектов, которые мы хотим визуализировать, и всех источников света, которые мы хотим использовать. Без объекта THREE.Scene Three.js ничего не может отобразить. Мы также создаем объект камеры. Объект камеры определяет, что мы увидим при рендеринге сцены. Далее мы определяем рендерер. Объект рендерера отвечает за вычисление того, как объект сцены будет выглядеть в браузере, исходя из того, на что смотрит камера. Мы создаем WebGLRenderer, который использует вашу видеокарту для рендеринга сцены в этом примере. После этого мы создали сетку, объединив геометрию и материал, и добавили ее на экран.

function update(){
requestAnimationFrame( update );
renderer.render( сцена, камера );
box.rotation.y += 0.01;
box2.rotation.x += 0,01;
//box3.rotation.z += 0,05;

delta = clock.getDelta();
time += delta;
box3.rotation.x = time * 2;
box3.position.y = 0,5 + Math.abs(Math.sin (время * 3)) * 2;

box3.rotation.x = время * 4;
box3.position.y -= 0,5 + Math.abs(Math.sin(время * 1)) * 1;

// box3.position.z = Math.cos(время) * 4;

}

Мы вызвали функцию обновления, которая будет выполнять такие переходы, как вращение, подпрыгивание и т. д., и в конце мы вызвали функцию изменения размера на всякий случай. Если пользователи изменяют размер браузера, в этом случае все должно работать как положено.

function onResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight);
}

Для получения более подробной информации перейдите по ссылкам ниже
https://threejs.org/
https://threejs.org/editor/