three.js – Javascript библиотека для добавления +анимационных 3D моделей на сайт (html)

• Нет отзывов

Автор

Описание

Цель проекта — создать простую в использовании, легкую, кросс-браузерную 3D-библиотеку общего назначения. Текущие сборки включают только средство визуализации WebGL, но средства визуализации WebGPU (экспериментальные), SVG и CSS3D также доступны в качестве надстроек.

Полная документация на сайте: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

Это краткое введение в three.js. Мы начнем с создания сцены с вращающимся кубом. Внизу страницы приведен рабочий пример на случай, если вы застряли и вам нужна помощь.

 

Прежде чем мы начнем

Прежде чем вы сможете использовать three.js, вам нужно где-то его отобразить. Сохраните следующий HTML-файл в файл на своем компьютере и откройте его в браузере.

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>My first three.js app</title>

<style>

body { margin: 0; }

</style>

</head>

<body>

<script type=”module”>

import * as THREE from ‘https://unpkg.com/three/build/three.module.js’;

 

// Our Javascript will go here.

</script>

</body>

</html>

Вот и все. Весь следующий код помещается в имеющийся <script> после самой библиотеки.

 

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

 

const renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

Мы сцену сцену, нашу камеру и рендерер.

 

 

const geometry = new THREE.BoxGeometry( 1, 1, 1 );

const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

const cube = new THREE.Mesh( geometry, material );

scene.add( cube );

 

camera.position.z = 5;

Добавляем Куб.

 

function animate() {

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

 

requestAnimationFrame( animate );

renderer.render( scene, camera );

}

animate();

Добавляем движение кубу и самое главное – Рендерим полученное. Это создаст цикл, который заставит визуализатор рисовать сцену каждый раз, когда обновляется экран (на обычном экране это означает 60 раз в секунду).

 

Итого полный код:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>My first three.js app</title>

<style>

body { margin: 0; }

</style>

</head>

<body>

<script type=”module”>

import * as THREE from ‘https://unpkg.com/three/build/three.module.js’;

 

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

 

const renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

 

const geometry = new THREE.BoxGeometry( 1, 1, 1 );

const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

const cube = new THREE.Mesh( geometry, material );

scene.add( cube );

 

camera.position.z = 5;

 

function animate() {

requestAnimationFrame( animate );

 

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

 

renderer.render( scene, camera );

}

 

animate();

</script>

</body>

</html>

 

 

Похожие

Поиск

Медиа

Монетизируйте свое творчество

Графика

Занимайся любимым делом не тратя время на подготовку

Вход

Либо введите логин и пароль:

Продолжая, я соглашаюсь с

Пользовательским соглашением,

Политикой конфиденциальности,

Политикой возврата.

Оплата