Как сделать свой первый проект Three.js с помощью Vite+Javascript

Сегодня мы узнаем, что такое Three.js и как мы можем начать работу с ним, сделав на нем простой проект.

Three.js — это библиотека JavaScript для создания и отображения интерактивной трехмерной компьютерной графики в веб-браузере. Он использует WebGL, низкоуровневый графический API для современных веб-браузеров, для отображения 3D-графики в окне браузера. В Three.js доступно множество ресурсов и примеров, что делает его отличным выбором для разработчиков, стремящихся создавать увлекательные и захватывающие 3D-приложения в Интернете.

ПРЕДПОСЫЛКИ:

Базовые знания HTML, CSS и Javascript.
Базовое понимание 3D-графики и концепций, таких как сцены, камеры и сетки.
NodeJS установлен в вашей системе.

ШАГИ:

Создайте каталог для своего проекта three.js, откройте там командную строку и напишите:

npm init vite

и выберите ванильный javascript для своего проекта. Это инициализирует вашу папку проекта там.

2. Зайдите в папку вашего проекта:

cd your-project-name

3. Откройте проект в любом удобном для вас редакторе кода и удалите ненужные файлы и данные в main.js.

4. Установите npm в свой проект и установите three.js с помощью следующих команд:

npm install
npm install three

5. Теперь у вас все готово, просто добавьте приведенный ниже шаблон к вашему main.js и npm run dev в вашем терминале.

 import * as THREE from 'three';

       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: "orange" } );
             const cube = new THREE.Mesh( geometry, material );
             scene.add( cube );

           camera.position.z = 3;
           camera.position.y = -0.5;
           camera.position.x = -1;

       renderer.render( scene, camera );

6. На вашем экране появится куб, который вы создали с помощью Three.js.

7. С Three.js есть безграничные возможности, я тоже изучаю его на своем пути, и вы тоже можете. Просто продолжайте исследовать, и мы сможем творить чудеса.

Я написал эту статью на основе собственного опыта и изучения многих документов и статей. Если ниже есть какие-либо комментарии об ошибках и если у вас есть идеи по улучшению этой статьи, свяжитесь со мной. Если вы нашли мой блог интересным и хотите нанять меня, напишите мне [email protected]

Как сделать свой первый проект Three.js с помощью Vite+Javascript