Three.js реализует развлекательную 3D-страницу на тему зимних Олимпийских игр 2022 года 🐼

«Это второй день моего участия в первом испытании обновлений 2022 года. Подробную информацию о мероприятии см.:Вызов первого обновления 2022 г.".

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

задний план

Добро пожаловать на зимние Олимпийские игры и вместе смотрим в будущее!Зимние Олимпийские игры 2022 г.Вот-вот начнется, в этой статье используетсяThree.js + ReactСтек технологий для реализации зимних и олимпийских элементов, что делает тему Зимних Олимпийских игр веселой и памятной.3Dстраница.本文涉及到的知识点主要包括：TorusGeometryтор,MeshLambertMaterialнеглянцевый поверхностный материал,MeshDepthMaterialматериал сетки глубины,custromMaterialиндивидуальный материал,Pointsчастица,PointsMaterialматериал и т.д.

Эффект

Эффект следующий👇Как показано на анимации, страница в основном состоит из2022талисман зимних олимпийских игр冰墩墩, олимпийские кольца, развевающийся флаг🚩, деревья🌲и эффект снега❄️и т.п. состав. Нажмите и удерживайте левую кнопку мыши, чтобы изменить положение камеры, чтобы получить другой вид.

👀онлайн просмотр:Dragon Ir.github.IO/3/#/ol и MPI...(развернут вGitHub, может немного медленно загружаться😓)

выполнить

Представить ресурсы

Сначала представьте библиотеки и внешние ресурсы, необходимые для разработки страницы,OrbitControlsдля управления треком объектива,TWEENИспользуется для реализации анимации движения,GLTFLoaderдля погрузкиglbилиgltfформатированный3Dмодели, а также некоторые другие модели, текстуры и другие ресурсы.

import React from 'react';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import bingdundunModel from './models/bingdundun.glb';
// ...

DOM-структура страницы

страницаDOMСтруктура очень простая, только рендеринг3Dэлементаль#containerконтейнер и показ прогресса загрузки.olympic_loadingэлемент.

<div>
  <div id="container"></div>
  {this.state.loadingProcess === 100 ? '' : (
    <div className="olympic_loading">
      <div className="box">{this.state.loadingProcess} %</div>
    </div>
  )}
</div>

инициализация сцены

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

container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
scene.background = new THREE.TextureLoader().load(skyTexture);
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 30, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));

Добавить источник света

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

// 直射光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.intensity = 1;
light.position.set(16, 16, 8);
light.castShadow = true;
light.shadow.mapSize.width = 512 * 12;
light.shadow.mapSize.height = 512 * 12;
light.shadow.camera.top = 40;
light.shadow.camera.bottom = -40;
light.shadow.camera.left = -40;
light.shadow.camera.right = 40;
scene.add(light);
// 环境光
const ambientLight = new THREE.AmbientLight(0xcfffff);
ambientLight.intensity = 1;
scene.add(ambientLight);

Управление прогрессом загрузки

использоватьTHREE.LoadingManagerУправляйте ходом загрузки модели страницы и выполняйте некоторые методы, связанные с ходом загрузки, в его функции обратного вызова. Прогресс загрузки страницы в этом примере находится наonProgressзавершено через , когда процесс загрузки страницы100%когда, выполнитьTWEENАнимация движения объектива.

const manager = new THREE.LoadingManager();
manager.onStart = (url, loaded, total) => {};
manager.onLoad = () => { console.log('Loading complete!')};
manager.onProgress = (url, loaded, total) => {
  if (Math.floor(loaded / total * 100) === 100) {
    this.setState({ loadingProcess: Math.floor(loaded / total * 100) });
    // 镜头补间动画
    Animations.animateCamera(camera, controls, { x: 0, y: -1, z: 20 }, { x: 0, y: 0, z: 0 }, 3600, () => {});
  } else {
    this.setState({ loadingProcess: Math.floor(loaded / total * 100) });
  }
};

Создайте землю

Бугристый грунт в этом примере используетсяBlenderСоздайте модель, затем экспортируйтеglbЗагрузка формата создана. Конечно, вы также можете просто использоватьThree.jsАналогичный эффект может быть достигнут со встроенной плоской сеткой и карту удара. использоватьBlenderПреимущество самостроительной модели состоит в том, что эффект волнистости земли может быть отрегулирован свободно и визуально.

var loader = new THREE.GLTFLoader(manager);
loader.load(landModel, function (mesh) {
  mesh.scene.traverse(function (child) {
    if (child.isMesh) {
      child.material.metalness = .1;
      child.material.roughness = .8;
      // 地面
      if (child.name === 'Mesh_2') {
        child.material.metalness = .5;
        child.receiveShadow = true;
      }
  });
  mesh.scene.rotation.y = Math.PI / 4;
  mesh.scene.position.set(15, -20, 0);
  mesh.scene.scale.set(.9, .9, .9);
  land = mesh.scene;
  scene.add(land);
});

Создайте талисман зимних Олимпийских игр Бинг Дундун

Теперь добавьте милый талисман зимних Олимпийских игр Панда Бинг Дундун.🐼, Бингдундун также используетglbМодель формата загружена. Его оригинальная модель происходит отздесь, после бесплатной модели с этого сайта используется оригинальная модель3D maxЯ обнаружил, что его нельзя использовать непосредственно на веб-странице, он должен быть вBlenderЧтобы восстановить эффект рендеринга, вам также необходимо настроить нормаль текстуры модели для преобразования формата модели.

оригинальная модель:

карта ледяного пирса:

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

экспортировать в формате glb:

📖существуетBlenderДобавьте текстуру к модели в учебном портале:Как текстурировать модель в Blender

Внимательно наблюдайте冰墩墩 🐼Можно обнаружить, что у него есть слой снаружиПрозрачный пластиковый или стеклянный текстурированный корпус, этот эффект может быть достигнут путем изменения параметров материала, таких как прозрачность, металличность, шероховатость и т. д. модели, и, наконец, рендеринга, таких как👆 banner图Тип показанного эффекта, как показано в следующем коде.

loader.load(bingdundunModel, mesh => {
  mesh.scene.traverse(child => {
    if (child.isMesh) {
      // 内部
      if (child.name === 'oldtiger001') {
        child.material.metalness = .5
        child.material.roughness = .8
      }
      // 半透明外壳
      if (child.name === 'oldtiger002') {
        child.material.transparent = true;
        child.material.opacity = .5
        child.material.metalness = .2
        child.material.roughness = 0
        child.material.refractionRatio = 1
        child.castShadow = true;
      }
    }
  });
  mesh.scene.rotation.y = Math.PI / 24;
  mesh.scene.position.set(-8, -12, 0);
  mesh.scene.scale.set(24, 24, 24);
  scene.add(mesh.scene);
});

Создание олимпийских колец

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

const fiveCycles = [
  { key: 'cycle_0', color: 0x0885c2, position: { x: -250, y: 0, z: 0 }},
  { key: 'cycle_1', color: 0x000000, position: { x: -10, y: 0, z: 5 }},
  { key: 'cycle_2', color: 0xed334e, position: { x: 230, y: 0, z: 0 }},
  { key: 'cycle_3', color: 0xfbb132, position: { x: -125, y: -100, z: -5 }},
  { key: 'cycle_4', color: 0x1c8b3c, position: { x: 115, y: -100, z: 10 }}
];
fiveCycles.map(item => {
  let cycleMesh = new THREE.Mesh(new THREE.TorusGeometry(100, 10, 10, 50), new THREE.MeshLambertMaterial({
    color: new THREE.Color(item.color),
    side: THREE.DoubleSide
  }));
  cycleMesh.castShadow = true;
  cycleMesh.position.set(item.position.x, item.position.y, item.position.z);
  meshes.push(cycleMesh);
  fiveCyclesGroup.add(cycleMesh);
});
fiveCyclesGroup.scale.set(.036, .036, .036);
fiveCyclesGroup.position.set(0, 10, -8);
scene.add(fiveCyclesGroup);

`💡`ТорГеометрический тор

TorusGeometryДля создания класса кольцевой геометрии.

Конструктор:

TorusGeometry(radius: Float, tube: Float, radialSegments: Integer, tubularSegments: Integer, arc: Float)

radius: Радиус кольца от центра кольца до центра трубы (поперечное сечение). Значение по умолчанию1.
tube: Радиус трубы, значение по умолчанию0.4.
radialSegments: количество сегментов кольца, значение по умолчанию8.
tubularSegments: количество сегментов конвейера, значение по умолчанию6.
arc: Центральный угол кольца (единица измерения — радианы), значение по умолчанию —Math.PI * 2.

`💡`MeshLambertMaterial неглянцевый поверхностный материал

Материал поверхности без блеска без зеркального освещения. Этот материал использует нефибиционныеLambertianМодель для расчета отражения. Это хорошо имитирует некоторые поверхности (такие как необработанные древесины или камень), но не глянцевые поверхности с зеркальными бликами (такие как окрашенные древесины).

Конструктор:

MeshLambertMaterial(parameters : Object)

parameters: (необязательно) Объект, определяющий внешний вид материала с одним или несколькими свойствами. Отсюда можно передать любые свойства материала.

Создать баннер

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

карта флага:

Флаг добавил анимацию, которую необходимо выполнить в коде для воспроизведения кадра анимации.

loader.load(flagModel, mesh => {
  mesh.scene.traverse(child => {
    if (child.isMesh) {
      child.castShadow = true;
      // 旗帜
      if (child.name === 'mesh_0001') {
        child.material.metalness = .1;
        child.material.roughness = .1;
        child.material.map = new THREE.TextureLoader().load(flagTexture);
      }
      // 旗杆
      if (child.name === '柱体') {
        child.material.metalness = .6;
        child.material.roughness = 0;
        child.material.refractionRatio = 1;
        child.material.color = new THREE.Color(0xeeeeee);
      }
    }
  });
  mesh.scene.rotation.y = Math.PI / 24;
  mesh.scene.position.set(2, -7, -1);
  mesh.scene.scale.set(4, 4, 4);
  // 动画
  let meshAnimation = mesh.animations[0];
  mixer = new THREE.AnimationMixer(mesh.scene);
  let animationClip = meshAnimation;
  let clipAction = mixer.clipAction(animationClip).play();
  animationClip = clipAction.getClip();
  scene.add(mesh.scene);
});

создавать деревья

Чтобы обогатить картинку и создать зимнюю атмосферу, я добавил несколько сосен.🌲как украшение. Очень важно использовать хитрость при добавлении сосен: мы знаем, что, поскольку модель дерева очень сложна и имеет много граней, слишком много граней снизят производительность страницы и вызовут зависания. В данной работе используются следующие две диаграммы👇Две показанные пересекающиеся грани используются в качестве основы дерева, поэтому дерево имеет только две грани.Использование этого трюка может в значительной степени оптимизировать производительность страницы, а дерево🌲похоже, есть3Dчувство.

карта материалов:

сделать деревоПрозрачный только в прозрачной части карты, непрозрачный в других местах, и можетСоздавать тени деревьев вместо теней коробок, вам нужно добавить следующее в модель дереваMeshPhysicalMaterial,MeshDepthMaterialДва материала, два материала используют одну и ту же текстурную карту, гдеMeshDepthMaterialдобавил в модельcustromMaterialхарактеристики.

 let treeMaterial = new THREE.MeshPhysicalMaterial({
  map: new THREE.TextureLoader().load(treeTexture),
  transparent: true,
  side: THREE.DoubleSide,
  metalness: .2,
  roughness: .8,
  depthTest: true,
  depthWrite: false,
  skinning: false,
  fog: false,
  reflectivity: 0.1,
  refractionRatio: 0,
});
let treeCustomDepthMaterial = new THREE.MeshDepthMaterial({
  depthPacking: THREE.RGBADepthPacking,
  map: new THREE.TextureLoader().load(treeTexture),
  alphaTest: 0.5
});
loader.load(treeModel, mesh => {
  mesh.scene.traverse(child =>{
    if (child.isMesh) {
      child.material = treeMaterial;
      child.custromMaterial = treeCustomDepthMaterial;
    }
  });
  mesh.scene.position.set(14, -9, 0);
  mesh.scene.scale.set(16, 16, 16);
  scene.add(mesh.scene);
  // 克隆另两棵树
  let tree2 = mesh.scene.clone();
  tree2.position.set(10, -8, -15);
  tree2.scale.set(18, 18, 18);
  scene.add(tree2)
  // ...
});

Эффект также может быть достигнут от👆надBannerКак вы можете видеть на картинке, для того, чтобы картинка выглядела лучше, я отменил отображение теней дерева.

📌существует3DПри разработке функций некоторые неважные модели оформления могут использовать эту стратегию для оптимизации.

`💡`MeshDepthMaterial материал сетки глубины

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

Конструктор:

MeshDepthMaterial(parameters: Object)

parameters: (необязательно) Объект, определяющий внешний вид материала с одним или несколькими свойствами. Отсюда можно передать любые свойства материала.

специальные свойства:

.depthPacking[Constant]:depth packingкодировка. По умолчаниюBasicDepthPacking.
.displacementMap[Texture]: карты смещения влияют на положение вершин сетки, и в отличие от других карт, которые влияют только на освещение и тени материала, смещенные вершины могут отбрасывать тени, блокировать другие объекты и действовать как реальная геометрия.
.displacementScale[Float]: Насколько сильно карта смещения влияет на меш (черный — отсутствие смещения, белый — максимальное смещение). Если карта смещения не задана, это значение не будет применяться. По умолчанию1.
.displacementBias[Float]: смещение карты смещения по вершинам меша. Если карта смещения не задана, это значение не будет применяться. По умолчанию0.

`💡`cusomMaterial пользовательский материал

добавить в сеткуcustromMaterialПользовательские свойства материала для достижения прозрачного периметраpngТень области содержимого карты изображения.

Создайте снежинку

Создайте снежинку❄️, буду использоватьзнание частиц.THREE.Points— это класс, используемый для создания точек, а также для управления пакетами частиц. В этом примере создан1500Задается частица снежинка, и для нее задаются случайные координаты, определяющие трехмерное пространство, и случайные скорости горизонтального и вертикального перемещения.

// 雪花贴图
let texture = new THREE.TextureLoader().load(snowTexture);
let geometry = new THREE.Geometry();
let range = 100;
let pointsMaterial = new THREE.PointsMaterial({
  size: 1,
  transparent: true,
  opacity: 0.8,
  map: texture,
  // 背景融合
  blending: THREE.AdditiveBlending,
  // 景深衰弱
  sizeAttenuation: true,
  depthTest: false
});
for (let i = 0; i < 1500; i++) {
  let vertice = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range * 1.5, Math.random() * range - range / 2);
  // 纵向移速
  vertice.velocityY = 0.1 + Math.random() / 3;
  // 横向移速
  vertice.velocityX = (Math.random() - 0.5) / 3;
  // 加入到几何
  geometry.vertices.push(vertice);
}
geometry.center();
points = new THREE.Points(geometry, pointsMaterial);
points.position.y = -30;
scene.add(points);

`💡`Точки Частицы

Three.jsсредний, дождь🌧️,Снег❄️,облако☁️, звезды✨И другие общие частицы в жизни могут быть использованыPointsИмитировать достичь.

Конструктор:

new THREE.Points(geometry, material);

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

`💡`PointsMaterial Материал точки

пройти черезTHREE.PointsMaterialВы можете установить параметры атрибута частицы, даPointsМатериал по умолчанию для использования.

Конструктор:

PointsMaterial(parameters : Object)

parameters: (необязательно) Объект, определяющий внешний вид материала с одним или несколькими свойствами. Отсюда можно передать любые свойства материала.

`💡`Свойство материала .смешивание

материал.blendingАтрибут в основном управляет методом наложения слияния текстур,.blendingК значениям свойств относятся:

THREE.NormalBlending: По умолчанию
THREE.AdditiveBlending: Аддитивный режим слияния
THREE.SubtractiveBlending: Режим субтрактивного слияния
THREE.MultiplyBlending: Мультипликативный режим слияния
THREE.CustomBlending: пользовательский режим слияния, с.blendSrc, .blendDstили.blendEquationкомбинация свойств

`💡`Свойство материала .sizeAttenuation

Будет ли размер частиц ослаблен глубиной камеры, по умолчаниюtrue(Только перспективные камеры).

`💡`3.js вектор

Маломерный вектор имеет несколько компонент, двумерный векторVector2имеютxа такжеyдвухкомпонентный трехмерный векторVector3имеютx,y,zтрехкомпонентный четырехмерный векторVector4имеютx,y,z,wчетыре компонента.

Связанный API:

Vector2: 2D вектор
Vector3: 3D вектор
Vector4: 4D вектор

Управление объективом, адаптация зума, анимация

controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
// 禁用平移
controls.enablePan = false;
// 禁用缩放
controls.enableZoom = false;
// 垂直旋转角度限制
controls.minPolarAngle = 1.4;
controls.maxPolarAngle = 1.8;
// 水平旋转角度限制
controls.minAzimuthAngle = -.6;
controls.maxAzimuthAngle = .6;

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}, false);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls && controls.update();
  // 旗帜动画更新
  mixer && mixer.update(new THREE.Clock().getDelta());
  // 镜头动画
  TWEEN && TWEEN.update();
  // 五环自转
  fiveCyclesGroup && (fiveCyclesGroup.rotation.y += .01);
  // 顶点变动之后需要更新，否则无法实现雨滴特效
  points.geometry.verticesNeedUpdate = true;
  // 雪花动画更新
  let vertices = points.geometry.vertices;
  vertices.forEach(function (v) {
    v.y = v.y - (v.velocityY);
    v.x = v.x - (v.velocityX);
    if (v.y <= 0) v.y = 60;
    if (v.x <= -20 || v.x >= 20) v.velocityX = v.velocityX * -1;
  });
}

🔗Полный код:GitHub.com/дракон ИК/3…

Суммировать

💡Основные новые точки знаний, включенные в эту статью, включают:

TorusGeometryтор
MeshLambertMaterialнеглянцевый материал поверхности
MeshDepthMaterialматериал сетки глубины
custromMaterialпользовательский материал
Pointsчастица
PointsMaterialточечный материал
Свойства материала.blending,.sizeAttenuation
Three.jsвектор

Возможности для дальнейшей оптимизации:

Добавьте больше интерактивных функций и еще больше оптимизируйте стиль интерфейса;
Талисман Бинг Дун Дун добавляет скелетную анимацию и может управлять своим движением и взаимодействием с помощью мыши и клавиатуры.

следующее уведомление:

"MetahumanМетачеловек!Three.jsОптимизация портрета"

Хотите узнать об инициализации сцены, освещении, тенях, базовой геометрии, сетках, материалах и многом другом.Three.jsДля получения соответствующих знаний вы можете прочитать мои предыдущие статьи. Если вы считаете, что статья полезна для вас, не забудьтеТри ссылки в один клик 👍.

приложение

[1]. 1000 порошка! Используйте Three.js, чтобы сделать эксклюзивную 3D-медаль 🥇
[2]. Three.js реализует 3D-творческую страницу китайского Нового года Тигра.
[3]. Three.js реализует динамический логотип Facebook Metaverse 3D
[4]. Three.js реализует трехмерную панорамную детективную игру
[5]. Three.js реализует классные кислотные 3D-страницы
[6]. Преобразование моделей 3dx в форматы, поддерживаемые блендером

задний план

Эффект

выполнить

Представить ресурсы

DOM-структура страницы

инициализация сцены

Добавить источник света

Управление прогрессом загрузки

Создайте землю

Создайте талисман зимних Олимпийских игр Бинг Дундун

Создание олимпийских колец

💡ТорГеометрический тор

💡MeshLambertMaterial неглянцевый поверхностный материал

Создать баннер

создавать деревья

💡MeshDepthMaterial материал сетки глубины

💡cusomMaterial пользовательский материал

Создайте снежинку

💡Точки Частицы

💡PointsMaterial Материал точки

💡Свойство материала .смешивание

💡Свойство материала .sizeAttenuation

💡3.js вектор

Управление объективом, адаптация зума, анимация

Суммировать

приложение

`💡`ТорГеометрический тор

`💡`MeshLambertMaterial неглянцевый поверхностный материал

`💡`MeshDepthMaterial материал сетки глубины

`💡`cusomMaterial пользовательский материал

`💡`Точки Частицы

`💡`PointsMaterial Материал точки

`💡`Свойство материала .смешивание

`💡`Свойство материала .sizeAttenuation

`💡`3.js вектор