如何用 Tikz 制作带有叠加层的 3D 图像

Question

我有下面的图像用 tikz 以四个级别而不是五个级别来表示：

我希望首先显示级别 4，然后是级别 4 和级别 3，然后是级别 4、级别 3 和级别 2，然后是级别 4、级别 3、级别 2，级别 1 位于帧中。如果您不介意我的所有叠加层都位于单个帧中。

我想要具有黑色边框且具有独特颜色填充的不同级别。

我只想要 4 级到 1 级。

Discription應該是Description。

这是我正在尝试的：

\documentclass[compress]{beamer}
\usetheme{Warsaw}
\usepackage{amsmath}
\usepackage{amssymb}
\usepackage{tikz}
\usetikzlibrary{arrows,shapes}
\tikzstyle{na} = [baseline=-.5ex]
\tikzstyle{every picture}+=[remember picture]

\begin{document}

    \begin{frame}
        \frametitle{Test}
    
    
        \begin{itemize}
            \begin{itemize}
                \item Level $4$ \tikz[na] \node[coordinate] (L1) {};
        \end{itemize}
                \item Level 3 $3$ \tikz[na] \node[coordinate] (L2) {};
                \item Level 2 $2$ \tikz[na] \node[coordinate] (L3) {};
                \item Level 1 $1$ \tikz[na] \node[coordinate] (L4) {};
    \end{itemize}
%\begin{tikzpicture}[overlay]
    %\path[->] (L4) edge [bend right] (d1);
    %\path[->] (L3) edge [bend right] (d2);
    %\path[->] (L2) edge [out=0, in=-90] (d3);
    %\path[->] (L1) edge [out=0, in=-90] (d4);
%\end{tikzpicture}

\end{frame}

\end{document}

Answer 1

一种解决方案是使用在当前帧的层\draw<n> ...上创建相应图形元素的命令。n

• 我改变了砖块上的光线，给人一种稍微真实的印象。
• 砖块的尺寸在环境开始时受到控制（通过可预测的变量）tikzpicture。

代码

\documentclass[compress]{beamer}
\usetheme{Warsaw}

\usepackage{tikz}
\usetikzlibrary{math}

\xdefinecolor{O}{RGB}{255, 102, 17}
\begin{document}


\begin{frame}
  \frametitle{Test with bricks}
  \centering
  \tikzmath{
    real \e1, \e2, \e3, \e4, \w1, \w2, \w3, \w4;
    \e1 = 5;
    \e2 = 4;
    \e3 = 3;
    \e4 = 1.6;
    \w1 = 1.7;
    \w2 = \w1*\e2/\e1;
    \w3 = \w1*\e3/\e1;
    \w4 = \w1*\e4/\e1;
  }
  \hspace{-2cm}
  \begin{tikzpicture}[baseline=3cm, overlay, scale=.9]
    \draw<1-5> (-3, -2.5) rectangle (5.5, 5.5);

    % first tile
    \draw<5>[fill=O!70!black] (0, 0, \e1) -- (\w1, 0, \e1)
    -- (\w1, \e1, \e1) -- (0, \e1, \e1) -- cycle;
    \draw<5>[fill=O!70] (0, \e1, \e1) -- (\w1, \e1, \e1)
    -- (\w1, \e1, 0) -- (0, \e1, 0) -- cycle;
    \draw<5>[fill=O] (\w1, 0, \e1) -- (\w1, \e1, \e1)
    -- (\w1, \e1, 0) -- (\w1, 0, 0) -- cycle;
    
    % second tile
    \draw<4-5>[fill=O!70!black] (\w1+0, 0, \e2) -- (\w1+\w2, 0, \e2)
    -- (\w1+\w2, \e2, \e2) -- (\w1+0, \e2, \e2) -- cycle;
    \draw<4-5>[fill=O!70] (\w1+0, \e2, \e2) -- (\w1+\w2, \e2, \e2)
    -- (\w1+\w2, \e2, 0) -- (\w1+0, \e2, 0) -- cycle;
    \draw<4-5>[fill=O] (\w1+\w2, 0, \e2) -- (\w1+\w2, \e2, \e2)
    -- (\w1+\w2, \e2, 0) -- (\w1+\w2, 0, 0) -- cycle;

    % third tile
    \draw<3-5>[fill=O!70!black] (\w1+\w2+0, 0, \e3) -- (\w1+\w2+\w3, 0, \e3)
    -- (\w1+\w2+\w3, \e3, \e3) -- (\w1+\w2+0, \e3, \e3) -- cycle;
    \draw<3-5>[fill=O!70] (\w1+\w2+0, \e3, \e3) -- (\w1+\w2+\w3, \e3, \e3)
    -- (\w1+\w2+\w3, \e3, 0) -- (\w1+\w2+0, \e3, 0) -- cycle;
    \draw<3-5>[fill=O] (\w1+\w2+\w3, 0, \e3) -- (\w1+\w2+\w3, \e3, \e3)
    -- (\w1+\w2+\w3, \e3, 0) -- (\w1+\w2+\w3, 0, 0) -- cycle;

    % fourth tile
    \draw<2-5>[fill=O!70!black] (\w1+\w2+\w3+0, 0, \e4)
    -- (\w1+\w2+\w3+\w4, 0, \e4)
    -- (\w1+\w2+\w3+\w4, \e4, \e4)
    -- (\w1+\w2+\w3+0, \e4, \e4) -- cycle;
    \draw<2-5>[fill=O!70] (\w1+\w2+\w3+0, \e4, \e4)
    -- (\w1+\w2+\w3+\w4, \e4, \e4)
    -- (\w1+\w2+\w3+\w4, \e4, 0)
    -- (\w1+\w2+\w3+0, \e4, 0) -- cycle;
    \draw<2-5>[fill=O] (\w1+\w2+\w3+\w4, 0, \e4)
    -- (\w1+\w2+\w3+\w4, \e4, \e4)
    -- (\w1+\w2+\w3+\w4, \e4, 0)
    -- (\w1+\w2+\w3+\w4, 0, 0) -- cycle;
  \end{tikzpicture}
\end{frame}
\end{document}

OP 的进一步修改：

\documentclass[compress]{beamer}
\usetheme{Warsaw}

\usepackage{tikz}
\usetikzlibrary{math}

\xdefinecolor{O}{rgb}{0.85, 1.0, 0.3}
\xdefinecolor{OO}{rgb}{0.67, 1.0, 0.3}
\xdefinecolor{OOO}{rgb}{0.43, 1.0, 0.3}
\xdefinecolor{OOOO}{rgb}{0.27, 1.0, 0.3}
\begin{document}


    \begin{frame}
        \frametitle{Test with bricks}
        \centering
        \tikzmath{
            real \e1, \e2, \e3, \e4, \w1, \w2, \w3, \w4;
            \e1 = 5;
            \e2 = 4;
            \e3 = 3;
            \e4 = 1.6;
            \w1 = 1.7;
            \w2 = \w1*\e2/\e1;
            \w3 = \w1*\e3/\e1;
            \w4 = \w1*\e4/\e1;
        }
        \hspace{-2cm}
        \begin{tikzpicture}[baseline=3cm, overlay, scale=.9]
            \draw<1-5> (-3, -2.5) rectangle (5.5, 5.5);
        
            % first tile
            \draw<5>[fill=OOOO!70!black] (0, 0, \e1) -- (\w1, 0, \e1)
            -- (\w1, \e1, \e1) -- (0, \e1, \e1) -- cycle;
            \draw<5>[fill=OOOO!70] (0, \e1, \e1) -- (\w1, \e1, \e1)
            -- (\w1, \e1, 0) -- (0, \e1, 0) -- cycle;
            \draw<5>[fill=OOOO] (\w1, 0, \e1) -- (\w1, \e1, \e1)
            -- (\w1, \e1, 0) -- (\w1, 0, 0) -- cycle;
        
            % second tile
            \draw<4-5>[fill=OOO!70!black] (\w1+0, 0, \e2) -- (\w1+\w2, 0, \e2)
            -- (\w1+\w2, \e2, \e2) -- (\w1+0, \e2, \e2) -- cycle;
            \draw<4-5>[fill=OOO!70] (\w1+0, \e2, \e2) -- (\w1+\w2, \e2, \e2)
            -- (\w1+\w2, \e2, 0) -- (\w1+0, \e2, 0) -- cycle;
            \draw<4-5>[fill=OOO] (\w1+\w2, 0, \e2) -- (\w1+\w2, \e2, \e2)
            -- (\w1+\w2, \e2, 0) -- (\w1+\w2, 0, 0) -- cycle;
        
            % third tile
            \draw<3-5>[fill=OO!70!black] (\w1+\w2+0, 0, \e3) -- (\w1+\w2+\w3, 0, \e3)
            -- (\w1+\w2+\w3, \e3, \e3) -- (\w1+\w2+0, \e3, \e3) -- cycle;
            \draw<3-5>[fill=OO!70] (\w1+\w2+0, \e3, \e3) -- (\w1+\w2+\w3, \e3, \e3)
            -- (\w1+\w2+\w3, \e3, 0) -- (\w1+\w2+0, \e3, 0) -- cycle;
            \draw<3-5>[fill=OO] (\w1+\w2+\w3, 0, \e3) -- (\w1+\w2+\w3, \e3, \e3)
            -- (\w1+\w2+\w3, \e3, 0) -- (\w1+\w2+\w3, 0, 0) -- cycle;
        
            % fourth tile
            \draw<2-5>[fill=O!70!black] (\w1+\w2+\w3+0, 0, \e4)
            -- (\w1+\w2+\w3+\w4, 0, \e4)
            -- (\w1+\w2+\w3+\w4, \e4, \e4)
            -- (\w1+\w2+\w3+0, \e4, \e4) -- cycle;
            \draw<2-5>[fill=O!70] (\w1+\w2+\w3+0, \e4, \e4)
            -- (\w1+\w2+\w3+\w4, \e4, \e4)
            -- (\w1+\w2+\w3+\w4, \e4, 0)
            -- (\w1+\w2+\w3+0, \e4, 0) -- cycle;
            \draw<2-5>[fill=O] (\w1+\w2+\w3+\w4, 0, \e4)
            -- (\w1+\w2+\w3+\w4, \e4, \e4)
            -- (\w1+\w2+\w3+\w4, \e4, 0)
            -- (\w1+\w2+\w3+\w4, 0, 0) -- cycle;
        
        \node <5> [below] at (-1.25,3.1) {\huge R};
        \node <5> [below] at (-1.25,2.05) {\huge A};
        \node <5> [below] at (-1.25,1.0) {\huge T};
        \node <5> [below] at (-1.25,-0.05) {\huge I};
        \node <5> [below] at (-1.25,-1.1) {\huge O};
        
        \node <4-5> [below] at (0.75,2.45) {\large I};
        \node <4-5> [below] at (0.75,2.05) {\large N};
        \node <4-5> [below] at (0.75,1.55) {\large T};
        \node <4-5> [below] at (0.75,1.05) {\large E};
        \node <4-5> [below] at (0.75,0.55) {\large R};
        \node <4-5> [below] at (0.75,0.05) {\large V};
        \node <4-5> [below] at (0.75,-0.45) {\large A};
        \node <4-5> [below] at (0.75,-0.9) {\large L};
        
        \node <3-5> [below] at (2.3,1.8) {\normalsize O};
        \node <3-5> [below] at (2.3,1.4) {\normalsize R};
        \node <3-5> [below] at (2.3,1.0) {\normalsize D};
        \node <3-5> [below] at (2.3,0.6) {\normalsize I};
        \node <3-5> [below] at (2.3,0.2) {\normalsize N};
        \node <3-5> [below] at (2.3,-0.2) {\normalsize A};
        \node <3-5> [below] at (2.3,-0.6) {\normalsize L};
        
        \node <2-5> [below] at (3.7,1.1) {\footnotesize N};
        \node <2-5> [below] at (3.7,0.83) {\footnotesize O};
        \node <2-5> [below] at (3.7,0.63) {\footnotesize M};
        \node <2-5> [below] at (3.7,0.4) {\footnotesize I};
        \node <2-5> [below] at (3.7,0.2) {\footnotesize N};
        \node <2-5> [below] at (3.7,0.0) {\footnotesize A};
        \node <2-5> [below] at (3.7,-0.225) {\footnotesize L};
        \end{tikzpicture}
    \end{frame}

\end{document}

Answer 2

虽然@daniel-n 的答案在保持原始图像的 3D 效果方面当然是更出色的，但我想指出的是，由于 tikz 的 3D 功能较差，答案也相当复杂。通常 3D 也不会携带其他信息，因此就风格而言，我通常建议不要使用 3D 效果，除非相关用例需要它们。

以下是使用二维金字塔的答案（基于答案由 Daniel N. 提供。)：

\documentclass[compress]{beamer}
\usetheme{Warsaw}
\usepackage{tikz}
\usetikzlibrary{math}

\begin{document}
    \begin{frame}
        \centering
        \tikzmath{
            real \h1, \h2, \h3, \h4, \w1, \w2, \w3, \w4, \f1;
            \h4 = 0.8;
            \h3 = 1.25*\h4;
            \h2 = 1.5*\h4;
            \h1 = 1.75*\h4;
            \w4 = 4*\h4;
            \w3 = 5*\h4;
            \w2 = 6*\h4;
            \w1 = 7*\h4;
            \t = \h1+\h2+\h3+\h4;
        }
        \begin{tikzpicture}[pyramidblock/.style={rectangle,draw=black,thick,anchor=south},descriptdot/.style={circle,fill,minimum height=1.5mm,inner sep=0},arrow/.style={thick,->,>=stealth}]
            \path (-0.5*\w1,0) -- (2.5*\w1,1.5\t);
            \node<5->[pyramidblock,fill=red,   minimum width=\w4 cm,minimum height=\h4 cm] (P4) at (P3.north) {Layer 4};
            \node<5->[] (D4) at (7/8*\w1,\t*1.25) {Descriptor 4};
            \draw<5->[arrow] (P4.east) to[out=0,in=180] (D4.west) node[descriptdot] at (P4.east) {};
            
            \node<4->[pyramidblock,fill=blue,  minimum width=\w3 cm,minimum height=\h3 cm] (P3) at (P2.north) {Layer 3};
            \node<4->[] (D3) at (7/8*\w1,\t*.75) {Descriptor 3};
            \draw<4->[arrow] (P3.east) to[out=0,in=180] (D3.west) node[descriptdot] at (P3.east) {};
            
            \node<3->[pyramidblock,fill=green, minimum width=\w2 cm,minimum height=\h2 cm] (P2) at (P1.north) {Layer 2};
            \node<3->[] (D2) at (7/8*\w1,\t*.25) {Descriptor 2};
            \draw<3->[arrow] (P2.east) to[out=0,in=180] (D2.west) node[descriptdot] at (P2.east) {};
            
            \node<2->[pyramidblock,fill=yellow,minimum width=\w1 cm,minimum height=\h1 cm] (P1) at (0,0)     {Layer 1};
            \node<2->[] (D1) at (7/8*\w1,-\t*0.25) {Descriptor 1};
            \draw<2->[arrow] (P1.east) to[out=0,in=180] (D1.west) node[descriptdot] at (P1.east) {};        
        \end{tikzpicture}
    \end{frame}
\end{document}