Познакомьтесь с three.js в первый раз, создайте проект three.js+vue.js

JavaScript Vue.js WebGL three.js

WebGL

Введение: WebGL (библиотека веб-графики с полной записью) — это протокол трехмерного рисования, этот стандарт технологии рисования позволяет использовать JavaScript и OpenGL ES 2.0 (OpenGL для встраиваемых систем, встроенная версия OpenGL, относительно легкая для мобильных телефонов, игровых консолей и других устройств, расширенная версия) вместе. , добавив привязку JavaScript к OpenGL ES 2.0, WebGL может обеспечить аппаратное ускорение 3D-рендеринга для HTML5 Canvas, чтобы веб-разработчики могли использовать системную графическую карту для более плавного отображения 3D-сцен в браузере и моделях, а также для создания сложной навигации и данных. визуализации.

Three.js

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

Официальная документация three.js:threejs.org/

Документация на китайском языке three.js:tech brood.com/три JS/doc…

Общее знание Three.js (прилагается:Обзор возможностей Three.js)

1. Threejs три компонента (сцена-сцена, камера-камера, рендерер-рендерер)

Сцены

Сцена является контейнером для всех объектов, и сцена только одна.

Конструктор сцены:

var scene = new THERR.Scene()

Туман (линейный туман):

scene.fog = new THREE.Fog(0xcce0ff, 10, 500)

Камеры

Он определяет метод проецирования из 3D-пространства на 2D-экран.Метод проецирования в основном делится на ортогональную проекцию и перспективную проекцию.

1. Ортогональная проекция: результаты, полученные камерой ортогональной проекции, должны быть параллельны линиям, которые параллельны в трехмерном пространстве при проецировании в двухмерное пространство.

2. Перспективная проекция: результат, полученный камерой с перспективной проекцией, аналогичен тому, что человеческий глаз видит в реальном мире, с эффектом «почти большого и очень маленького».

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

Конструктор камеры перспективы:

var camera = new THREE.PerspectiveCamera(fov, aspect, near, far)

Посмотрим на эти параметры через диаграмму, спроецированную перспективной камерой.

В виде в перспективе серая часть представляет собой объем просмотра, то есть область, в которой объекты могут визуализироваться.Объекты за пределами объема просмотра не будут визуализированы.

fov- вертикальный угол раскрытия объема просмотра (в градусах, а не в радианах), как показано на виде сбоку.

aspectравныйwidth / heightсоотношение горизонтальной и вертикальной длины камеры, обычно устанавливается наCanvasсоотношение сторон.

nearРасстояние до ближайшей камеры View Value, является положительным.

farРасстояние от камеры до самой дальней усеченной пирамиды обзора положительно.

Рендереры

Роль рендерера заключается в рендеринге изображения, снятого камерой, в браузере. Средство визуализации определяет, на каких элементах страницы должен отображаться результат визуализации и как он должен отображаться. В three.js есть много видов рендереров, например.webGLRenderer、canvasRenderer、SVGRenderer, обычно с использованиемwebGLRendererРендерер. Конструктор рендерера webGLRenderer:

renderer = new THERR.WebGLRenderer()

После создания рендерера нужно вызвать метод рендера, чтобы совместить ранее созданную сцену с камерой и отрендерить ее, то есть вызвать метод рендера рендерера:

renderer.render(scene,camera)

Поняв три основных элемента трехмерного рисования в three.js, вы можете создать сцену на странице и использовать камеру для визуализации сцены на веб-странице.

Во-первых, вам нужно загрузить библиотеку three.js и сослаться на нее в своем собственном коде.Ниже приведены три метода введения, выберите подходящий метод в своем собственном проекте.

<script src="lib/three.js"></script>  //ES5
const THREE=require（'three'）  //CommonJS/AMD
import * as THREE from 'three'   //ES6

// 创建场景
var scene = new THREE.Scene(); 
// 创建透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
// 创建一个 WebGL 渲染器
var renderer = new THREE.WebGLRenderer({
       alpha: true,// 默认情况下为黑色场景，此处设置为透明（即白色场景）
}); 
// 设置渲染器为全屏
renderer.setSize(window.innerWidth, window.innerHeight); 
// 添加到网页中
document.body.appendChild(renderer.domElement);

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

Представление изображений

Предыдущая подготовка рисунка была сделана, и теперь нужно добавить объект, который вы хотите нарисовать, на сцену. В компьютерном мире трехмерный мир состоит из точек, две точки могут образовывать прямую линию, три точки, не лежащие на прямой линии, могут образовывать треугольный сектор, бесчисленные треугольные секции могут образовывать различные объекты. сеточная модель. Модель MESH наиболее широко используется в трехмерной разработке.

Геометрии

three.js предоставляет множество методов для создания фиксированных форм сетки, таких как прямоугольник (BoxGeometry), сфера (SphereGeometry), круг (CircleGeometry) и так далее. Существует также метод создания определенных фигур в соответствии с определенными координатами, которые можно импортировать после моделирования с помощью стороннего программного обеспечения для моделирования (SketchUp).В настоящее время поддерживаются форматы моделей: .obj (наиболее часто используемый), .dae, .ctm, .ply, .stl, .wrl, .vtk и т. д. Three.js имеет ряд функций, поддерживающих внешние файлы импорта, которые находятся за пределами библиотеки three.js и должны быть использованы перед использованием.Скачать отдельно. (Пример: OrbitControls — контроллер, OBJLoader — загружает файлы .obj, MTLLoader — загружает файлы .mtl).

Материалы

three.js предоставляет множество методов для непосредственной генерации материалов, среди которых будут отображаться MeshBasicMaterial (нечувствительный к освещению, придающий геометрии простой цвет или отображающий каркасы), MeshLambertMaterial (реагирующий на освещение, не лишенный источников света), используемый для создания тусклых несветящиеся объекты), MeshPhongMaterial (реагирующий на освещение, источник света не отображается, используется для создания металлических объектов) и так далее. Причина, по которой объект может быть виден человеческим глазом, заключается в том, что, во-первых, его собственный материал может излучать свет без помощи внешнего источника света, а во-вторых, что его собственный материал не излучает свет и должен отражать свет в пространстве. окружение. Для объектов, которые сами по себе не излучают свет, необходимо добавить в сцену источник света для достижения визуального эффекта.

Огни

Существует множество различных типов источников света, которые можно создать в three.js, например AmbientLight (его цвет добавляется к текущему цвету всей сцены и всех объектов), PointLight (излучающий свет из одной и той же точки) и Radiation направление во всех направлениях, например, свет от свечей), направленный свет DirectionalLight (также известный как бесконечный свет, свет от этого источника света можно рассматривать как параллельный, например солнечный свет), прожектор SpotLight (свет этого источника света излучается из конуса и производит конденсирующий эффект на освещенный объект, такой как свет, излучаемый фонариком.) Если есть источник света, нет недостатка в тенях.В Three.js единственный источники света, которые могут формировать тени, — это DirectionalLight и SpotLight; единственными материалами, которые могут выразить эффект тени, являются LambertMaterial и PhongMaterial. Накладные расходы на рендеринг теней в three.js относительно велики, поэтому объекты по умолчанию не имеют теней и должны включаться отдельно. Как включить тени:

  • Установите для свойства shadowMapEnabled средства визуализации значение true (указывает средству визуализации отображать невидимым).
  • Установите для свойства castShadow объекта и источника света значение true (указывает объекту и источнику света передавать тени)
  • Установите для свойства ReceiveShadow объекта, который получает тень, значение true (скажите объекту получать тени от других объектов).

Зная основы графики, добавьте простое изображение на основе приведенного выше кода.

var geometry = new THREE.BoxGeometry(1,1,1); // 创建一个长宽高都为1个单位的立方体
var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 创建材质，对光照无感
var cube = new THREE.Mesh(geometry, material); // 创建一个立方体网格（mesh）,将材质包裹在立方体上
scene.add(cube); // 将立方体网格添加到场景中

camera.position.z = 5; // 指定相机位置
function render() {
requestAnimationFrame(render); // 让浏览器执行参数中的函数，不断循环（浏览器一个新的API）
renderer.render(scene, camera); // 结合场景和相机进行渲染，即用摄像机拍下此刻的场景
}
render();

существуетrender（）Добавьте следующий код функции, чтобы сделать куб выше, а затем добавьте его к сцене в движении.

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

Элементы управления

контроль трекаПлагин OrbitControls.jsСо сценой можно взаимодействовать с помощью мыши, сцену можно перемещать, а также можно управлять вращением, перемещением и масштабированием сцены. Поскольку OrbitControls.js — это подключаемый модуль, его необходимо импортировать отдельно при использовании в three.js.

controls = new THREE.OrbitControls(camera);// 初始化控制器
controls.target.set(0, 0, 0);// 设置控制器的焦点，使控制器围绕这个焦点进行旋转
controls.minDistance = 80;// 设置移动的最短距离（默认为零）
controls.maxDistance = 400;// 设置移动的最长距离（默认为无穷）
controls.maxPolarAngle = Math.PI / 3;//绕垂直轨道的距离（范围是0-Math.PI,默认为Math.PI）
controls.update();// 照相机转动时，必须更新该控制器

Эффект, достигнутый после настройки плагина:

манипулировать Эффект
Удерживая левую кнопку мыши, перемещайте Камера вращается вокруг центра сцены
Поверните колесико мыши или удерживайте среднюю кнопку и перемещайте увеличить или уменьшить масштаб
Удерживайте правую кнопку мыши и перемещайте Панорамирование сцены
Клавиши со стрелками вверх, вниз, влево, вправо Панорамирование сцены

Погрузчики

Используется для загрузки файлов разных форматов, в основном представлены следующие три:

Загрузчик OBJLoader (необходимо добавить файл js отдельно): Используется для загрузки файлов .obj (с материалами и без).

// 没有材质
new THREE.OBJLoader().load('./tree.obj', function (obj) {
    obj.scale.set(10, 10, 10);
    obj.position.set(-10, 0, 0);
   obj.children.forEach(function (e) {
          e.castShadow = true
});// 设置阴影
    scene.add(obj)
});

Загрузчик MTLLoader (необходимо добавить файл js отдельно): используется для загрузки файла .mtl (то есть загрузка файла mtl перед загрузкой файла obj с материальным объектом).

// 有材质
new THREE.MTLLoader().setPath('./model/VANS/').load('VANS.mtl', function (materials) {
    materials.preload();
    new THREE.OBJLoader().setMaterials(materials).setPath('./model/VANS/').load('VANS.obj', function (obj) {
        obj.scale.set(0.8, 0.8, 0.8);
        obj.position.set(-40, -50, 10);
        scene.add(obj)  
    })
});

Загрузчик CSS2DRenderer (необходимо добавить файл js отдельно): Средство визуализации CSS2DRenderer полезно, если вы хотите комбинировать HTML-теги с 3D-объектами. Здесь отдельные элементы DOM также завернуты в экземпляр CSS2DObject и добавлены в граф сцены.

// 初始化 CSS2DRenderer
labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
container.appendChild(labelRenderer.domElement);
// 标注实例
function addSprite(text, Mash, callback) {
       biaozhudiv = document.createElement('div');
       biaozhudiv.className = 'label';
       biaozhudiv.textContent = text;
       biaozhudiv.onclick = function () {
           callback(Mash)
       };
       biaozhuLabel = new THREE.CSS2DObject(biaozhudiv);
       biaozhuLabel.position.set(0, 0, 0);
       Mash.add(biaozhuLabel);
    }

Текстуры

Текстура — это 2D-изображение (есть даже 1D- и 3D-текстуры), которое можно использовать для добавления деталей к объекту; представьте себе текстуру в виде листа бумаги с нарисованными на нем кирпичиками, сложенными плавно, чтобы они подошли к вашему 3D-дому. Ваш дом выглядит так, будто снаружи он кирпичный.

var textureCube = new THREE.CubeTextureLoader().load(urls);
scene.background = textureCube；

Three.js+vue.js

1. Установите три с помощью npmnpm install three     

адрес установки three.js:Woohoo, That Horse Plus.com/package/Tian Hairong…

После успешной установки в проектеimport three from 'three';, затем запустите программу.

найдена ошибка консолиdefault export is not declared in imported moduleОбъясните, что в three.js нет объекта экспорта по умолчанию, он должен быть записан какimport * as three from 'three';Или это может быть так:import { Scene, WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshBasicMaterial, Mesh} from 'three';

Или импортировать в виде CommonJSvar three = require ('three');

2. Установите плагин управления треками с помощью npm.npm install three-orbit-controls  

Адрес установки Three-Orbit-Controls:Woohoo, That Horse Plus.com/package/Tian Hairong…

Перед введением плагина убедитесь, что библиотека three.js добавлена.OrbitControls = require('three-orbit-controls')(THREE)

Инструкции:controls = new OrbitControls(camera);

3. Установите плагины, которые загружают файлы .obj и .mtl с помощью npm.npm i --save three-obj-mtl-loader

адрес установки three-obj-mtl-loader:Woohoo, That Horse Plus.com/package/Tian Hairong…

Перед введением плагина необходимо подтвердить, что была введена библиотека three.js Плагин включает загрузчик для загрузки файлов .obj и .mtl.

import {MTLLoader,OBJLoader} from 'three-obj-mtl-loader';

Инструкции:mtlLoader = new MTLLoader(); objLoader = new OBJLoader();

Примечание: использовать отдельноthree-mtl-loaderа такжеthree-obj-loaderПри двух плагинах возникает ошибка:

4. Установите с помощью npmthree-css2drenderплагин,npm i --save three-css2drender

Адрес установки Three-css2drender:Woohoo, That Horse Plus.com/package/Tian Hairong…

Перед введением плагина необходимо подтвердить, что библиотека htree.js введена.

import {CSS2DRenderer,CSS2DObject} from 'three-css2drenderer';

Инструкции:labelRenderer = new CSS2DRenderer(); label = new CSS2DObject( text );

Учебный проект Three.js+vue.js

Исходный код:GitHub.com/Пожалуйста, можете ли вы/M Можете ли вы.GI…

Категории