Знакомство с Three.js (3)

Знакомство с Three.js

В предыдущей статье мы визуализировали нашу первую 3D-графику с помощью фреймворка three.js.

Но текущие 3D-объекты не могут двигаться

Затем мы добавляем внутрь контроллеры, чтобы сделать 3D-графику подвижной.

контроллер

Прежде всего, нам нужно понять, что такое контроллер.В тройке есть много типов контроллеров.

Давайте узнаем о контроллере трека сейчас

OrbitControls

Элементы управления орбитой позволяют камере двигаться по орбите вокруг цели. Чтобы использовать эту функцию, как и все файлы в каталоге /examples (примеры), вы должны включить этот файл в свой HTML.

Другими словами, поворачивая созданную вами камеру, вы можете наблюдать созданный вами объект на 360°.

Это эквивалентно движению глаз человека при наблюдении за объектами.

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

В предыдущей статье мы его хорошо отрендерили, поэтому здесь не будем повторять вывод кода.

Если мы хотим создать контроллер дорожки, нам нужно импортировать из фреймворка three.js

import {
    
     OrbitControls } from "three/examples/jsm/controls/OrbitControls";

Кто-то спросил, почему это было введено в папку примера

Не спрашивай, а спрашивай три.Сами поставили на это место.

Это также объясняется в нашей ссылке выше

После того, как мы сослались на него, создайте новый контроллер через новый

// 控制器需要一个相机，还有指定渲染的元素，否则谁知道你是哪个相机，监听哪个页面的元素呢，对吧
const controls = new OrbitControls(camera, renderer.domElement);

Как было сказано выше, подразумевается, что вращение камеры на 360° удобно для понимания кода, а значит понимать код здесь

Ну, по логике, теперь и наш контроллер создан

Рендеринг также завершен, так что теперь мы сможем его контролировать, верно?

Попробуем на странице

Нажмите и удерживайте левую кнопку мыши и перетащите мышь, и обнаружил, что она не двигается

Почему это, разве мы еще не создали контроллер, почему он неподвижен?

На самом деле до сих пор элементы внутри менялись.

Просто потому, что мы не рендерили снова, объекты в сцене все еще в исходном состоянии.

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

Позвольте мне объяснить здесь, потому что наш дисплей имеет частоту обновления кадров, и браузер такой же, потому что минимальная непрерывная частота кадров, видимая нашим человеческим глазам, составляет 24 кадра в секунду, поэтому мы чувствуем, что эти вещи в браузере непрерывны.

Мы используем последние три для рендеринга функции и инкапсулируем ее.

function render() {
    
    
  renderer.render(scene, camera);
  // 浏览器自带方法，在刷新的时候自动执行某个函数↓，此处我们是在浏览器进行刷新的时候重新渲染一次
  requestAnimationFrame(render);
}

// 最后，我们在调用一下这个渲染的方法就可以开始了
render();

Удерживая левую кнопку мыши и перетащив, мы обнаружим, что появится 3D-эффект, который можно наблюдать в 360 °.

Помощник оси

В это время, например, я надеюсь иметь ось или другие линии сетки для отображения

Так было бы легче развиваться.

Итак, есть ли

ответ определенно

некоторый

В three.js есть хелпер оси

Как и подобные вспомогательные средства, все они заканчиваются словом помощник.

Например, помощник оси координат AxesHelper, который мы сейчас изучим.

ОсиПомощник

Объект для простого моделирования трех осей координат. Красный цвет представляет ось X. Зеленый цвет представляет ось Y. Синий представляет ось Z.

Нам нужно ввести значение при построении, чтобы оно могло отображать длину соответствующей оси координат

После добавления этого помощника в сцену его можно успешно отобразить

// 坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

движение объектов

Недостаточно иметь ось координат, я также хочу, чтобы объект мог двигаться, так что же мне делать?

Движение объекта очень простое, нам нужно только задать положение объекта в сокращенном методе частоты кадров обновления.

Таким образом, положение объекта в каждом кадре меняется, формируя движение объекта.

PS: Тот же принцип применим и к фильмам

Итак, как установить положение этого объекта?

Есть два способа достижения

// 三维物体的位置需要三个值来定位，x轴，y轴，z轴
// 以下是 Object3D 的公用方法，是构造出来的原型链上面的方法
cube.position.set(3,0,0)
// 或者可以通过对应的属性，来改变对应的值
cube.position.x = 3

Движение объекта заключается в том, чтобы немного изменить свое положение при обновлении, т. е.

function render() {
    
    
  renderer.render(scene, camera);

  cube.position.x += 0.01
  if(cube.position.x > 5){
    
    
		// 我们刚刚设置的坐标轴是5，那么这里设置当他大于5的时候，给他的坐标轴重置
    cube.position.x = 0
  }

  // 浏览器自带方法，在刷新的时候自动执行某个函数↓
  requestAnimationFrame(render);
}

зум

Масштаб объекта такой же, как и положение, масштаб поля

вращать

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

Существует атрибут, определяющий, какие данные отображать первыми.

Объяснение на официальном сайте таково.

Локальное вращение объекта, выраженное в радианах. (См. Углы Эйлера - Углы Эйлера)

cube.rotation.set(Math.PI / 4, 0, 0, 'XYZ');

Если вам нужно продолжить вращение, аналогично движению объектов, просто добавьте следующий код в предыдущий метод рендеринга~

cube.rotation.x += 0.01;

Я надеюсь, что это может быть полезно для вас. Если возможно, я надеюсь заглянуть в мой блог по пути.
Новый блог
Предыдущий блог

Тогда увидимся в следующем эпизоде~