В предыдущих главах мы создавали трехмерные сцены с помощью HTML+JS. Начиная с этой главы, мы будем использовать vite+vue3+threejs для создания трехмерных сцен.

Создание среды проекта

Откройте диспетчер терминалов vscode и введите следующую команду

npm create vite@latest vue3-threejs-app --template vue

Во всплывающем напоминании о рамке выбора нажмите клавиши вверх и вниз, выберите Vue и нажмите Enter.

Выберите JavaScript и нажмите Enter. Подскажет, что создание проекта завершено.

Введите cd vue3-threejs-app, войдите в папку и введите npm install, чтобы установить зависимости, необходимые для проекта. Введите npm run dev, чтобы запустить и увидеть эффект.

Структура каталогов

После создания проекта Структура каталоги, как показано ниже

Публичный каталог используется для хранения статических файлов. Каталог src используется для хранения исходного кода. Каталог ресурсов используется для хранения статических ресурсов, таких как изображения, шрифты и т. д. каталог компонентов используется для хранения компонентов App.vue — корневой компонент приложения. main.js — это входной файл приложения. vite.config.ts файл конфигурации vite

Установить триджс

Войдите в терминалnpm install three Установить триджс

Четко определите содержимое и формат страницы App.vue по умолчанию.

Ознакомьтесь с компонентом HelloWorld и содержимым причины в App.vue и создайте новый элемент div с идентификатором сцены в качестве контейнера трехмерной сцены. Код в App.vue выглядит следующим образом.

<template>
  <div id="scene">    
  </div>
</template>
<script setup> 
</script>
<style scoped> 
</style>

Очистите стили в style.css, очистите поля и отступы.

* {
  margin: 0;
  padding: 0;
}

Создайте новую папку 3dModules.

В общей папке создайте новую папку 3dModules.,Используется для хранения файлов трехмерных моделей.,Скопируйте в эту папку файл Motor03.gltf, который будет отображаться на странице.

Создайте новую папку утилит.

Загрузите макет в папку src. новую папку утилит.,Используется для хранения js-кода инструмента.,Создайте новый файл Motor3d.js в этой папке.,Этот файл используется для создания трехмерных сцен с помощью Threejs.,И смонтируйте его на div для отображения.

Представляем файлы библиотеки Threejs, контроллер треков и загрузчик GLTF.

Добавьте файл библиотеки Threejs в Motor3d.js, а также файлы контроллера пути и GLTLoader.

import * as THREE from 'three'//Импортировать основную библиотеку Three.js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' //Импортируем контроллер пути
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'//Импортировать загрузчик GLTFМодель

Создайте класс Motor3d и экспортируйте его.

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

class motor3d {
}
export default motor3d

Создать конструктор

Чтобы лучше использовать модуль Motor3d, мы создаем конструктор в классе Motor3d для инициализации объекта Motor3d;

class motor3d {
constructor(selector) {    
    this.container = document.querySelector(selector)//Получатьконтейнер    this.scene
    this.camera 
    this.renderer
    this.controls
    this.init() //инициализация
    this.animate()//Loopфункция
  }
} 

Создать функцию инициализации()

После создания структуры Function давайте создадим функцию инициализации(),Функция для Сцены инициализации、камера、свет、Рендереры и т. д.

init() {
    // Сцена инициализации
    this.initScene()    
    // Инициализировать вспомогательную ось
    this.initAxesHelper()
    // Инициализация освещения
    this.initLight() 
    // Инициализировать камеру
    this.initCamera()
    // Инициализировать рендерер
    this.initRender()
    // Инициализировать контроллер пути
    this.initControls()
    // Отслеживайте изменения размера сцены и повторно визуализируйте размер.
    window.addEventListener('resize',this.onWindowResize.bind(this))
  }

Создайте функцию initScene().

Функция initScene() используется для создания экземпляров сцен Threejs.

initScene() {
    this.scene = new THREE.Scene()
    this.scene.background = new THREE.Color(0xa0a0a0)
}

Создайте функцию initAxesHelper().

Функция initAxesHelper() используется для добавления вспомогательных осей в сцену, чтобы помочь нам лучше понять информацию о сцене.

 initAxesHelper() {
    const axesHelper = new THREE.AxesHelper(5)
    this.scene.add(axesHelper)
  }

Создайте функцию initLight().

Функция initLight() используется для инициализации источников света и добавления их на сцену.

initLight() {
    const hesLight = new THREE.HemisphereLight(0xffffff,0x444444)
    hesLight.intensity = 0.6
    this.scene.add(hesLight)

    const dirLight = new THREE.DirectionalLight()
    dirLight.position.set(5,5,5)
    this.scene.add(dirLight)    
}

Создайте функцию initCamera().

Функция initCamera() используется для инициализации камеры.

 initCamera() {
    this.camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,100)
    this.camera.position.set(1.5,1.5,1.5)
}

Создайте функцию initRender().

Создайте функцию initRender() для инициализации средства рендеринга.

  initRender() {
    this.renderer = new THREE.WebGLRenderer({antialias:true})//Устанавливаем сглаживание
    //Устанавливаем соотношение пикселей экрана
    this.renderer.setPixelRatio(window.devicePixelRatio)
    //Размер рендеринга
    this.renderer.setSize(window.innerWidth,window.innerHeight) 
    // Добавить в корзину
    this.container.appendChild(this.renderer.domElement)
  }

Создать функцию рендеринга()

 render() {    
    this.renderer.render(this.scene,this.camera)
  }

Создайте функцию анимации().

  animate() { 
    this.renderer.setAnimationLoop(this.render.bind(this))
  }

Создайте функцию initControls().

  initControls() {
    this.controls = new OrbitControls(this.camera,this.renderer.domElement)
  }

Создайте функцию onWindowResize().

  onWindowResize() {
    this.camera.aspect = window.innerWidth / window.innerHeight
    this.camera.updateProjectionMatrix()//Обновить матрицу, проецировать 3D-контент на 2D-экран для преобразования
    this.renderer.setSize(window.innerWidth,window.innerHeight)
  }

На этом этапе мы в основном завершили построение трехмерной сцены. Мы добавили файл Motor3d.js в App.vue и создали экземпляр объекта в onMounted(). Код в App.vue выглядит следующим образом.

<template>
  <div id="scene">    
  </div>
</template>
<script setup> 
 import motor3d from './utils/motor3d';
 import { onMounted } from 'vue'; 
 onMounted(()=>{ 
   new motor3d('#scene') 
 })
</script>
<style scoped> 
</style>

Обновляем браузер и видим, что 3D-сцена построена.

инициализировать объект

Затем мы добавляем модель в 3D-сцену. Сначала мы создаем метод для добавления файла GLTF.

Добавьте метод addGLTFModel(modelName)

// Загрузка модели
  addGLTFModel(modelName) { 
    return new Promise((resolve,reject) => {
      const loader = new GLTFLoader().setPath('3dModels/')
      loader.load(modelName,(gltf) =>{
        console.log(gltf);  
        this.scene.add(gltf.scene)
        resolve(this.modelName + 'Модель успешно добавлена')
      })
    })  
  }

Создайте метод initMesh().

Создайте метод initMesh().,Вызовите метод addGLTFModel() выше в этом методе.,И передайте имя файла GLTF в папке 3dModels.

initMesh() {
    this.addGLTFModel('motor03.gltf')
  }

Вызовите метод initMesh() в методе init().

  init() {
    // Сцена инициализации
    this.initScene()    
    // Инициализировать вспомогательную ось
    this.initAxesHelper()
    // Инициализация освещения
    this.initLight()
    // Инициализировать сетку
    this.initMesh()
    // Инициализировать камеру
    this.initCamera()
    // Инициализировать рендерер
    this.initRender()
    // Инициализировать контроллер пути
    this.initControls()
    // Отслеживайте изменения размера сцены и повторно визуализируйте размер.
    window.addEventListener('resize',this.onWindowResize.bind(this))
  }

Обновите браузер, чтобы увидеть эффект.

Здесь мы столкнулись с проблемой отличия цвета от моделей Threejs и gltf, которые мы видели ранее. Добавьте следующий код в функцию инициализации рендерера.

    //Решаем проблему загрузки формата gltf. Модель текстурной карты, отличающаяся от исходного изображения.
    this.renderer.outputEncoding = THREE.sRGBEncoding;

Обновите браузер и проблема решена

Хорошо, вот как создать трехмерную сцену Threejs на основе vite+vue3+threejs. Если вам это нравится, ставьте лайк, подписывайтесь и собирайте!