react 3d模型_制作3D React Carousel

灰太狼 2023-02-22 03:33 3阅读 0赞

react 3d模型

[![format_png][]][format_png 1]

There is something in me that is amazed but beautiful 3D interfaces. And it doesn't matter whether they're functional like Gyroscope features [menu][], technology demonstrators like the amazing periodic table demo from [famous][] or they're artistic representation pushing the limits of the current CSS technology like pens from [Ana Tudor][] or [Hakim El Hattab][]. I love them all and look for an excuse to use something similar in my applications.

我里面有些东西令人惊讶，但漂亮的3D界面。 它们的功能像陀螺仪的功能[菜单][menu] ，技术的演示者(如[著名][famous]的令人惊奇的元素周期表演示)或它们的艺术表现都推动了当前CSS技术的极限，如[Ana Tudor][]或[Hakim El Hattab的][Hakim El Hattab]笔[都没关系][Hakim El Hattab] 。 我喜欢他们所有人，并寻找借口在我的应用程序中使用类似内容。

Few months ago I tried React, it amazed me how quickly I become productive with it and enabled me to concentrate on writing my application. I quickly adapted a bootstrap theme, orchestrated interactivity and application interface was done in no time. However I felt that something was missing. As soon as the basic look and feel could be done with so little effort the little voice inside me felt unsatisfied. The goalposts were moved, I wanted animation.

几个月前，我尝试了React，这让我惊讶，我很快就变得高效，并使我能够专注于编写应用程序。 我很快适应了引导程序主题，精心安排了交互性，并立即完成了应用程序界面。 但是我感到有些东西丢失了。 只要花很少的精力就可以完成基本的外观和感觉，我内心的声音就会变得不满意。 球门柱被移动了，我想要动画。

> "If everything seems under control, you're not going fast enough."
> 
> “如果一切似乎都受到控制，那么您的步伐就不够快。”
> 
> ― Mario Andretti
> 
> ―马里奥·安德烈蒂

## 学习绳索 **(**Learning the Ropes**)** ##

I decided to make a 3D carousel with React, as a standalone exercise how the framework works with small but self sustaining component. My first rule was the animation wont reset when I add and remove elements, change the layout or rotate the carousel. This hard constraint that was missing even from the commercial carousels made the underlying design difference.

我决定使用React制作3D轮播，作为一个独立的练习，该框架如何与小型但可自我维持的组件一起工作。 我的第一个规则是添加和删除元素，更改布局或旋转轮播时动画不会重置。 甚至在商业轮播中也缺少这种硬约束，从而在根本上改变了设计。

At first I took a look at React [ReactCSSTransitionGroup][] but somehow it didn't feel right and the comments on the forums regarding adding and removing elements were scary. So I started to work manually using the Dave DeSandro [tutorial][] regarding 3D transformations. Drawing the carousel with the suggested layout wasn't too hard, and I've managed to transform DeSandro CSS rules into JavaScript functions without much problems.

起初，我看了一下React [ReactCSSTransitionGroup，][ReactCSSTransitionGroup]但不知何故，论坛上关于添加和删除元素的评论令人恐惧。 因此，我开始使用有关3D转换的Dave DeSandro [教程][tutorial]进行手动工作。 用建议的布局绘制轮播并不是很难，而且我设法将DeSandro CSS规则转换为JavaScript函数也没有太大问题。

[View Demo][format_png 1] [观看演示][format_png 1]

## 实现3D效果 **(**Achieving 3D Effect**)** ##

The carousel is made of the four elements:

轮播由以下四个元素组成：

1. A section that contains the images and controls, has static length and width, contains perspective and its **relative**to the parent element.

1.包含图像和控件的部分，具有固定的长度和宽度，包含透视图及其**相**对于父元素的部分。

// Static styling
    .react-3d-carousel { 
        width: 400px; 
        height: 300px; 
        position: relative; 
        perspective: 1000px;
    }

2. A `div` containing the shown figures, its `position` is `absolute` and has `transform-style: preserve-3d` property. This element is translated over Z axis in order to have the carousel on the correct distance from the viewer.

2.包含所示图形的`div` ，它的`position`是`absolute`并且具有`transform-style: preserve-3d`属性。 为了使轮播与观看者保持正确的距离，该元素在Z轴上平移。

// Static styling
    .react-3d-carousel .carousel {  // image container
       width: 100%; 
       height: 100%; 
       position: absolute; 
       transform-style: preserve-3d;
    } 
    // Dynamic styling  example
      transform:translateZ(-347px);

For the prism layout distance is calculated as the apothem of the [polygon][]. For the classic carousel layout I've experimented with few formulas until I made something that looked about OK.

对于棱镜布局距离，计算为[多边形][polygon]的振幅。 对于经典的轮播布局，我尝试了一些公式，直到做出看起来不错的东西为止。

function apothem(width, sides) { 
         return Math.ceil(width / (2 * Math.tan(Math.PI / sides))); 
    }
    function magic(width, sides) {        
        return Math.round(width * Math.log(sides))    
    }

3. Figure tag represents the single image shown. It's dynamically styled according to the provided layout and the state of the animation. Since the function definitions are too large, check the [layout][] file for the corresponding calculation. Below I present the static styling with example of the generated element style from the layout functions.

3. Figure标签代表所示的单个图像。 根据提供的布局和动画状态动态设置样式。 由于功能定义太大，请检查[布局][layout]文件以进行相应的计算。 下面，我将通过布局函数生成静态样式，并举例说明生成的元素样式。

// Static styling
    .react-3d-carousel .carousel figure { // single image
       display: block; 
       position: absolute; 
       width: 400px; 
       height: 300px; 
    }
    // Dynamic styling
    // Prism layout figure example styling
    transform: rotateY(1.047rad) translateX(0px) translateZ(347px);
    opacity:  1;
    // Classic layout figure example styling
    transform: rotateY(0rad) translateX(620.94px) translateZ(358.5px); opacity: 1;

4. Controls - Currently the controls are statically styles using two white chevrons as backgrounds, if you have other preferences simply change the CSS into the [style.css][] file. Below is the snippet representing directional chevrons.

4.控件-当前，控件是静态样式，使用两个白色人字形作为背景，如果您有其他首选项，只需将CSS更改为[style.css][]文件。 以下是代表定向V形的代码段。

.react-3d-carousel   .prev:before { 
          content: url("chevron_left_white.png");
    }
    .react-3d-carousel    .next:before { 
          content: url("chevron_right_white.png");
    }

## 添加布局 **(**Adding layouts**)** ##

If you want to add additional layout say the one used in the [Royal 3D carousel][] or the star topology of the [Ultimate 3D carousel][] you have to implement two functions which calculate the distance from the viewer and the position of each figure.

如果要添加其他布局，例如说要在[Royal 3D旋转木马][Royal 3D carousel]或[Ultimate 3D旋转木马][Ultimate 3D carousel]的星形拓扑中使用的布局，则必须实现两个功能，这些功能可以计算距查看器的距离和每个图形的位置。

// Receives width of the image and number of sides returns
    // distance from the viewer to the carousel
    function distance(width, sides) {
    // Receives width of the image, images and initial rotation
    // of the carousel, return array of all images with their
    // corresponding transformations & rotations
    function figures(width, images, initial) {

This enables the carousel to be extensible with additional layout, but the user will have to find a way to express the layout as a function.

这使得轮播可以通过其他布局进行扩展，但是用户将不得不找到一种将布局表达为功能的方法。

## 管理状态 **(**Managing state**)** ##

On the other hand managing state was problematic from the start. The carousel has intermediate state when it rotates and when it adds or removes sides, which are made worse by ability to change layout on the fly which completely changes the look of the carousel. My first approach was to use animation library or engine to manage state. There was some nice libraries that could have made my life easier, but since the carousel was a component I was very familiar about forcing people to add dependencies that are magnitudes larger than the functionality they really need. Since RxJS didn't seemed so heavy at the moment I made my first iteration using [Paul Taylor][] port of [Robert Penner][] easing functions and using [Ramda ][Ramda]for low level functional tasks.

另一方面，从一开始就管理状态是有问题的。 转盘在旋转时以及在添加或移除侧面时处于中间状态，这由于动态更改布局的能力而变得更糟，这完全改变了转盘的外观。 我的第一种方法是使用动画库或引擎来管理状态。 有一些不错的库可以使我的生活更轻松，但是由于轮播是一个组件，我非常熟悉强迫人们添加比实际需要的功能大很多的依赖。 由于此刻RxJS似乎还不那么繁重，因此我使用[Robert Penner的][Robert Penner] [Paul Taylor][]端口缓和函数并将[Ramda][]用于低级函数任务进行了第一次迭代。

The carousel state is stored in the [depot][] file which enables the user to pass new properties and/ or to rotate the carousel.

轮播状态存储在软件[仓库][depot]文件中，该文件使用户能够传递新属性和/或旋转轮播。

## 删除依赖 **(**Removing dependencies**)** ##

The code worked but it was a mess and RxJS and Ramda still felt as too much baggage, so in the second iteration I've extracted all the functionality I needed and refactored the code. The ability to change layout on the fly led me to very functional design. Working directly with [requestAnimationFrame][] revealed some very interesting problems like why is my code called only once.

代码可以正常工作，但是混乱不堪，RxJS和Ramda仍然感到负担沉重，因此在第二次迭代中，我提取了所需的所有功能并重构了代码。 动态更改布局的能力使我进行了非常实用的设计。 直接使用[requestAnimationFrame会][requestAnimationFrame]发现一些非常有趣的问题，例如为什么我的代码仅被调用一次。

## 发布和清理 **(**Publishing and clean up**)** ##

My component was ready, so I've bundled the demo that was used during development as an example and published it on Github. At first there were a lot of issues that I haven't foreseen, most of them pointed by [Juho Vepsäläinen][Juho Veps_l_inen] with his helpful advice how to fix them. I was very surprised when another user was unable to install the carousel. But I guess bugs come with the users, in the end I managed to fix them and make the carousel usable.

我的组件已经准备就绪，因此我将开发过程中使用的演示作为示例进行捆绑，并将其发布在Github上。 最初，我有很多未预见的问题，其中大多数是[JuhoVepsäläinen][Juho Veps_l_inen]提出的有关如何解决这些问题的有用建议。 当另一个用户无法安装转盘时，我感到非常惊讶。 但是我猜想bug伴随着用户，最终我设法修复了它们并使转盘可用。

[View Demo][format_png 1] [观看演示][format_png 1]

## 结论 **(**Conclusion **)** ##

The carousel represents the miniature example of the unidirectional data flow and ability to manage intermediate state. Its just a small step toward next generation of user interfaces, where animation will be the backbone of the interaction instead of sprinkled eye candy for the user to enjoy. With growth in processing speed in hardware the browsers are ready, the rest is up to the software.

轮播代表了单向数据流和管理中间状态的能力的微型示例。 这只是迈向下一代用户界面的一小步，在该界面中，动画将是交互的基础，而不是让用户欣赏的糖果。 随着硬件处理速度的提高，浏览器已经准备就绪，其余的取决于软件。

You can find the source at [github][] and see the finished carousel at [codepen][]. Try changing layout, easing functions, number of sides and of course rotate the carousel.

您可以在[github上][github]找到源代码，并在[codepen上][codepen]查看完成的轮播。 尝试更改布局，缓动功能，边数，当然还要旋转转盘。

> 翻译自: [https://davidwalsh.name/3d-carousel][https_davidwalsh.name_3d-carousel]

react 3d模型

[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby8zZC1jYXJvdXNlbC5qcGc?x-oss-process=image/format,png
[format_png 1]: https://davidwalsh.name/demo/3d-carousel.php
[menu]: https://gyrosco.pe/features/
[famous]: http://disrupt.famo.us/periodic402/
[Ana Tudor]: http://codepen.io/thebabydino/pen/xbfao
[Hakim El Hattab]: http://codepen.io/hakimel/pen/mBIro
[ReactCSSTransitionGroup]: https://facebook.github.io/react/docs/animation.html
[tutorial]: https://desandro.github.io/3dtransforms/docs/carousel.html
[polygon]: http://www.mathopenref.com/apothem.html
[layout]: https://github.com/bobiblazeski/react-3d-carousel/blob/master/src/layout.js
[style.css]: https://github.com/bobiblazeski/react-3d-carousel/blob/master/static/style.css
[Royal 3D carousel]: http://www.webdesign-flash.ro/p/royal-3d-carousel/index.html
[Ultimate 3D carousel]: http://www.webdesign-flash.ro/p/u3dcar/index-minimal-classic.html
[Paul Taylor]: https://twitter.com/trxcllnt
[Robert Penner]: https://twitter.com/robpenner
[Ramda]: http://ramdajs.com
[depot]: https://github.com/bobiblazeski/react-3d-carousel/blob/master/src/depot.js
[requestAnimationFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
[Juho Veps_l_inen]: https://github.com/bebraw
[github]: https://github.com/bobiblazeski/react-3d-carousel
[codepen]: http://codepen.io/bobiblazeski/pen/KpzpBQ
[https_davidwalsh.name_3d-carousel]: https://davidwalsh.name/3d-carousel