Первый вкус Three.js с нуля [большое количество кейсов, простой старт]

внешний интерфейс three.js
Первый вкус Three.js с нуля [большое количество кейсов, простой старт]

Случайно увидел динамический эффект официального сайта~
Это так красиво! очень дружелюбный
Проверил технологию достижения такого эффекта - оказалосьThree.js
Тогда позвольте мне попробовать динамический 3D-эффект Three.js с нуля✨
✨Кейсов и способов найти исходный код очень много✨

задний план

С ростом популярности внешнего интерфейса в современную эпоху эффект от реализации страницы действительно становится все лучше и лучше!
С развитием цифровой обработки изображений и технологии искусственного интеллекта
Визуальный эффект, отображаемый пользователю, не ограничивается плоским визуальным эффектом 2D.
Начал фокусироваться на полном спектре эффектов 3D-стереоскопического отображения.
Стремитесь к 361-градусному продукту без тупиков, чтобы пользователи знали и понимали
Сегодня ~ давайте впервые попробуем превосходный 3D-движокThree.js

учиться

Three.js — это 3D-движок, основанный на собственном пакете WebGL.Среди всех движков WebGL Three.js является наиболее широко используемым 3D-движком в Китае.

Threejs — это 3D-движок WebGL, его можно использовать для многих приложений сцен.

Теперь позвольте мне представить классический случай официальной операции.

Сценарии применения

3D-визуализация Интернета вещей

С развитием Интернета вещей в различных областях, таких как промышленность, строительство и Интернет вещей, интерфейс взаимодействия с веб-страницами веб-проектов будет отображаться
3D тренд.
Метод 3D более интуитивен, конечно, стоимость разработки также относительно велика.
И Three.js может значительно снизить стоимость разработки
Кейс 3D-визуализации IoT Granary

Онлайн-предварительный просмотр продукта 720

Благодаря постоянному продвижению технологий WebGL и 5G онлайн-отображение 3D различных продуктов будет становиться все более и более популярным.
Например, новый автомобиль автомобильной компании можно просмотреть онлайн на официальном сайте.
Возможно, когда-нибудь некоторые платформы электронной коммерции заменят 2D-изображения 3D-моделями.
Теперь ваш друг рекомендует вам новое платье, вы скажете, пришлите фото, чтобы увидеть
Может в будущем скажете пришлите ссылку на 3д модель посмотреть
диван онлайн превью
Онлайн-предварительный просмотр одежды
Онлайн интерактивный превью стиральной машины

визуализация данных

Есть два основных аспекта визуализации данных, связанных с webgl.
С одной стороны, это визуализация массивных больших данных, а с другой стороны, это визуализация данных, связанных с 3D.
Для очень больших объемов данных
Веб-визуализация на основе canvas, svg и т. д. не имеет лучшей производительности на основе технологии WebGL.
Для визуализации данных, связанных с 3D, на основе технологии WebGL.
С помощью 3D-движка Threejs можно хорошо реализовать
Анализ данных GeoJOSN для визуализации ВВП Китая
3D гистограмма

Мини-игры H5/WeChat

очень жаркоПрыжок в мини-игру WechatОн разработан с использованием движка Three.js.
Движок Three.js — очень хороший выбор для разработки 3D-игр H5 или игр WeChat. Не нужно скачивать, легко распространять, текущая экология очень и малая разработка игры.

Наука и образование

В сфере науки и образования отображение конкретных знаний в 3D более интуитивно понятно, чем изображения.
Платформа для научных исследований-кейс для визуализации структуры белка
Химическая корреляция — визуализация молекулярной структуры
География и астрономия - 3D-предварительный просмотр Солнечной системы

Механическое поле

Onshape — это программное обеспечение для 3D-моделирования в области механики.
Если вы знакомы с программным обеспечением САПР, таким как Solidworks и UG, то вы можете понимать Onshape как облачную Solidworks.Онлайн-демонстрация предварительного просмотра механической модели

Более

В Three.js также есть много изысканных сценариев приложений.
Я не буду перечислять их все здесь
Счастливые друзья могут зайти на официальный сайт Three.js, чтобы ознакомиться с делом.
Нажмите сюда, чтобы увидеть больше

знать

Ресурсы Three.js

Первый взгляд на ресурсы Three.js

ссылка на гитхаб
Официальный сайт Three.js
Документация Three.js на китайском языке

Загрузите пакет Three.js

Вы можете напрямую вытащить основную ветку из github на локальную

Из-за того, что существуют десятки M, github медленно загружает threejs.
Поэтому автор выложил копию на сетевой диск для скачивания всеми желающими.
Ресурсы сетевого диска

первый вкус

Сначала зайдите на официальный сайт, чтобы ознакомиться с локальным кейсом Three.js.

Локальный проект инициализации

Инициализировать структуру каталогов

Создайте папку ThreeJs Создать файл index.html
создать js-папку
Поместите загруженный пакет three.js в папку js

Случай 1: первая 3D-сцена

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>第一个three.js文件_WebGL三维场景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <!-- <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>-->
  <script src="js/three/build/three.js"></script>
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
  </script>
</body>
</html>

Структура всей программы:

Случай 2: анимация вращения, периодический рендеринг

В первом случае была создана 3D-модель куба.
Исходя из этого, мы пытаемся вращать его

Периодический рендеринг

Каждый раз, когда выполняется метод рендеринга объекта рендерера WebGLRenderer. Браузер будет отображать кадр изображения и отображать его на веб-странице, что означает, что вы можете постоянно вызывать метод рендеринга. Это означает, что пока куб вращается и выполняется метод рендеринга .render() для повторного рендеринга, эффект вращения куба может быть достигнут.

Таким образом, мы можем использовать timer + render() в js для перемещения 3D-куба.

Поместите код:

renderer.render(scene,camera);

Заменить на: си

// 渲染函数
function render() {
    renderer.render(scene,camera);//执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
}
//间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
setInterval(render,20);

Вот официальная поговоркаЧастота рендеринга при вызове метода рендеринга .render() для рендеринга не может быть слишком низкой.

//设置调用render函数的周期为200ms，刷新频率相当于5你能明显的感受到卡顿
setInterval("render()",200);

Запрос функцииAnimationFrame()

В реальной разработке, чтобы лучше использовать рендеринг браузера Вы можете использовать функцию requestAnimationFrame() вместо функции setInterval().

Параметр requestAnimationFrame() — это имя вызываемой функции. Когда requestAnimationFrame() вызывает функцию, она не вызывается немедленно, а инициирует запрос к браузеру на выполнение функции. Браузер решает, когда он будет выполняться. будет выполняться. Как правило, по умолчанию поддерживается частота 60 кадров в секунду. Функция, указанная в методе requestAnimationFrame(), вызывается каждые 16,7 мс. 60 кадров в секунду — идеальная ситуация. может быть ниже этой частоты. Может просматривать статьи"ЗапросАнимацияФраме()"Узнайте больше о функции requestAnimationFrame().

function render() {
        renderer.render(scene,camera);//执行渲染操作
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);//请求再次执行渲染函数render
    }
render();

Случай 3: Работа с мышью в 3D-сцене

Код

function render() {
  renderer.render(scene,camera);//执行渲染操作
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
controls.addEventListener('change', render);//监听鼠标、键盘事件

Элемент управления OrbitControls.js предоставляет конструкторTHREE.OrbitControls(), когда в качестве параметра используется объект камеры, выполняется кодnew THREE.OrbitControls(camera,renderer.domElement), браузер автоматически обнаружит изменения мыши и клавиатуры и обновит параметры объекта камеры в соответствии с изменениями мыши и клавиатуры.

Например, если вы перетащите левую кнопку мыши, браузер обнаружит событие мыши и по определенному алгоритму преобразует расстояние перемещения мыши в угол поворота камеры. естественным рендерером изменится.Определив событие слушателяcontrols.addEventListener('change', render), если вы постоянно работаете с мышью, параметры камеры будут продолжать изменяться, а функция рендеринга render() будет вызываться непрерывно для рендеринга, так что threejs будет использовать новое положение камеры или данные угла для рендеринга.

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

сцена операция

  • Масштаб: прокрутка — средняя кнопка мыши
  • Поворот: перетаскивание - левая кнопка мыши
  • Панорамирование: перетаскивание - правая кнопка мыши

Использование requestAnimationFrame()

Если в коде threejs реализован периодический вызов метода рендеринга рендерера render() через requestAnimationFrame()
При изменении состояния камеры через операцию OrbitControls
Нет необходимости вызывать функцию рендеринга, прослушивая события мыши через control.addEventListener('change', render)
Потому что requestAnimationFrame() будет продолжать вызывать функцию рендеринга.

function render() {
  renderer.render(scene,camera);//执行渲染操作
  // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
  requestAnimationFrame(render);//请求再次执行渲染函数render
}
render();
var controls = new THREE.OrbitControls(camera);//创建控件对象
// 已经通过requestAnimationFrame(render);周期性执行render函数，没必要再通过监听鼠标事件执行render函数
// controls.addEventListener('change', render)

Эффект:

Будьте в курсе официальных конфликтов

Обратите внимание, что при разработке не используйте requestAnimationFrame() илиcontrols.addEventListener('change', render) для одновременного вызова одной и той же функции, что может привести к конфликту.

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

Руководство по официальному сайту Three.js

Официальный случай

Неужели первый раз пробую Three.js и только "попробовать" эти кейсы мало!
Ничего страшного! Давайте посмотрим на отличные кейсы на официальном сайте
И найдите их исходный код!

Официальный сайт Three.js отличный кейс

экспонат

Позвольте мне остановиться на нескольких особенно хороших Amway среди них.

  • gpgpu_birds

  • geometry_minecraft

  • effects_anaglyph

  • animation_skinning_morph

  • buffergeometry_drawrange

Вышеупомянутый Amway - это просто Amway, который я нахожу интересным~ На официальном сайте почти сотни дел.Чего же ты ждешь! Поторопитесь и ощутите чудесный эффект Three.js~

исходный код

Я нашел много отличных кейсов на официальном сайте~
Итак, как я могу получить его исходный код?

Я разобрал два способа запросить его исходный код.

  1. В правом нижнем углу официального сайта естькнопка

Нажмите кнопку, чтобы ввести исходный код кейса в github

  1. Все официальные кейсы сайта можно найти в папке дерева

дерево > примеры > [название случая].html

Таким образом, мы впервые почувствовали вкус Tree.js.
должен сказать! Это так "вкусно"

конечные слова

Я очень рада поделиться с вами этой статьей~
Если эта статья оказалась для вас полезной, ставьте лайк👍

Категории