Я сделал неудачную 3D-карту с помощью Sprite3d в PixiJS.

Canvas

предисловие

Недавно я хочу сделать эффект 3D карты.Схема конструкции выглядит следующим образом:

Выходные данные

Версия, используемая PixiJS: PixiJS 4.8.7 — WebGL

причина попробовать

В моей первой попытке я использовал PixiJS, с которым я знаком.Хотя PixiJS — это механизм 2D-рендеринга,pixi-projectionПлагин обеспечивает 2D- и 3D-проекцию в будущих версиях PixiJS.

На момент публикации этой статьи официальный API для v5 не был предоставлен.

Я использовал его в предыдущих проектахSprite2d,Container2d,setAxisY,AFFINE.AXIS_XПосле того, как API реализовал эффект 2d проекции, эффект неплохой.Если вам интересно, вы можетеНажмите здесь, чтобы просмотреть.

Итак, на этот раз я хочу использоватьCamera3d,Container3d,Sprite3d,position3d,eulerПодождите, пока API-интерфейс 3D-проекции реализует эффект этой 3D-карты.

Эффект

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

Процесс реализации

Сначала создайте камеру (Camera3d), затем пройдитеContainer3dа такжеSprite3dДобавьте 3d элементы в камеру, затем передайтеeulerа такжеposition3dЧтобы настроить макет и, наконец, анимировать, изменив положение и проекцию элементов или изменение положения камеры. Следующий основной код пропускает настройку центра положения и вращения.

основной код

импортные компоненты

import * as PIXI from 'pixi.js';
import 'pixi-projection';
import {TweenMax} from "gsap/TweenMax";

камера3d инициализация

const camera = new PIXI.projection.Camera3d();
camera.setPlanes(350,-5000,5000); // 参数依次为 焦距、z 轴最近距离， z 轴最远距离
app.stage.addChild(camera);

Инициализировать вертикальный фон

const card_bg_vertical = new PIXI.projection.Sprite3d(PIXI.loader.resources['bg_0.jpg'].texture);
camera.addChild(card_bg_vertical);

наземная инициализация

this.card_ground = new PIXI.projection.Container3d();
this.card_ground.euler.x = -Math.PI/180*10; // 给地面添加透视
camera.addChild(this.card_ground);

const card_ground_bg:PIXI.projection.Sprite3d = new PIXI.projection.Sprite3d(PIXI.loader.resources['bg_1.jpg'].texture);
this.card_ground.addChild(card_ground_bg);

Добавьте элементы сцены на землю

for(let i = 0; i < 10; i++){
    const thing = new PIXI.projection.Sprite3d(PIXI.loader.resources['card1_thing_'+i+'.png'].texture);
    thing.euler.x = Math.PI/180*10; // 将父元素的透视复原
    this.card_ground.addChild(thing);
}

Добавьте анимацию, чтобы повернуть землю, чтобы закрыть карту

const cardTween = new TweenMax.to(this.card_ground.euler,2,{x:-Math.PI/180*180});

Суммировать

об API

  • Camera3d3d сцена определена, нам нужно добавить 3d элементы в камеру,Camera3dПредоставляет такие параметры, как фокусное расстояние, ближайшая ось z, самая дальняя ось z и является ли это ортогональной проекцией;
  • Container3d,Sprite3dИспользуется для определения 3D-элементов тем же методом, что иContainer,SpriteТочно так же некоторые свойства добавляют управление по оси Z;
  • Container3d,Sprite3dсвойства:position3d,scale3d,pivot3dа такжеposition,scale,pivotОтличие заключается в добавлении управления по оси Z. где API не предоставляетсяrotation3d,можно использоватьeulerдобиться трехмерного вращения;

Отзывы

  • Для студентов, знакомых с API PixiJS, относительно просто начать работу с эффектами 2d и 3d проекции, но официальная документация не предоставляется, и необходимо изучить примеры на официальном сайте, чтобы проверить функцию и эффект. каждого API;
  • Эффект проекции 2d и 3d основан на расширении старой версии, поэтому преимущества старой версии все еще могут быть использованы в новой версии;
  • В конце концов, PixiJS — это движок 2D-рендеринга.
  • Во второй попытке я добился вышеуказанного эффекта, используя CSS3DRenderer в three.js,Нажмите здесь, чтобы просмотреть, эффект хоть и вышел, но тоже неудачная попытка, и в дальнейшем будет написано краткое содержание.

больше статей

Посмотрите еще мои статьи:GitHub.com/NingboNingbo/Первоначально…

Категории