随着现代网络技术的出现，以及时间旅行的最新进展，我们不仅可以在Cinema 4D中建模这个星系，而且可以使用After Effects和Webflow使它响应我们在网页内的横向鼠标位置。而且，我们会从最开始覆盖这，所以如果你从未探索cinema 4D，或如果你在Adobe After Effects建设技能，或如果你刚刚开始设计和开发的网页，我们会确保通过每一步的过程。并且，我们将分五部分来做这个:我们将在Cinema 4D中创建动画，我们将在After Effects中渲染它作为图像序列，我们将使用After Effects的bodymovin扩展来导出它，我们将把导出的文件放到Webflow中，我们将设置一个交互，让它响应我们的鼠标。
听起来很多，确实很多，但我们会很快地过一遍。花的时间太长了，格里默可能会选择删掉那些似乎继续下去的部分……
这就是《星际迷航》第一次接触僵尸题材的原因。至于After Effects，事实上，与Cinema 4D光，意味着我们可以建立真正复杂的场景和渲染他们使用Adobe媒体编码器，得到我们的图像序列。这是关键。我们将使用该序列来创建Lottie动画。Airbnb创建Lottie是为了将After Effects的动画直接集成到web中。这就是我们这集视频要做的。
好了，4D影院:这是我们的第一步。我们可以从After Effects开始。只需文件，新的，Cinema 4D。我们给它起个名字，银河。回车。现在，当这个正在加载时，是时候提一下——它已经加载了。这是4D电影，在我们开始之前，让我们改变一些渲染设置。我们将进入编辑渲染设置，让我们改变宽度为1000像素，高度为400像素。现在，你的视角可能是不同的。它可能有不同的纵横比，你可能会看到它的大小不同，你可能会看到底部和顶部的深色条，就在这里。 We’ve just resized our so it corresponds to that aspect ratio, that 1,000 x 400 aspect ratio, that 10:4 5:2 aspect ratio.
好了，是时候开始了。我们不打算使用任何原语;相反，我们只需要一盏灯。我们要添加一个光，如果我们现在渲染，默认情况下，这是我们的光的显示方式。我们这里有基本设置。如果我们现在渲染，按渲染视图，我们会看到什么?没什么。这是意料之中的，因为只要有光，就没有任何东西可以被光照亮。例如，如果我们添加一个立方体，我们在这里添加一个立方体，我们把它移回来，你可以看到光影响那个立方体。当我们移动立方体时，我们可以看到光影响我们的立方体。 Now, we’ll remove that cube, and we have our light again, again if we render, let’s hit command R on Mac, or control R on a windows as a shortcut, and you can see there’s nothing there, that’s expected. Let’s change that. And there are a few ways to have visible light in Cinema 4D. One way is to use volumetric light. So with our light selected, you can change visible light, this is under General, change the visible light to volumetric. If you render now, you can see the light, but the really impressive part is if we put some type of primitive there, let’s do a cube again, move this cube to the side, it should cast shadows. So, when that light hits that cube, that cube is casting shadows. That’s volumetric light, and it’s pretty interesting to work with, but it’s not what we’re using here. So we’ll select our light, change visible light to none, and instead click lens. And, what lens lets us do is it lets us add lens effects, or lens flares, and we can do that by switching glow to any of these presets, like wide angle, or high eight. In this case, we’ll use star two. And if we render now, command R, or control R on Windows, that’s what we can see. We have a visible light. This is a good starting point.
现在，我们可以改变这个光的样子。举个例子，如果我们进入设置，如果我们点击编辑，我们有一个叫做发光编辑器的东西。光晕编辑器让我们修改每个元素在这个镜头光晕内，在这个镜头效果内。1号元素，看起来不错。我们可能需要换个更酷一点的颜色，比如蓝色。看起来不错。然后进入每一个元素，也许这个可以，元素3，把它换成更温暖的颜色，比如红色或橙色。看起来不错。点击确定，然后渲染，这是一个非常漂亮的星形。
我们还可以影响其他东西，比如规模。我们把比例降低到5%因为会有大量的恒星。我们再来看看这个选项，发光距离刻度。我们来确认一下。这意味着，如果某物距离更远或比例不同，它的亮度，它的辉光，就会降低。启用了所有这些选项后，让我们点击渲染。这是一个明星。不是很银河。我们可以把它变成银河。我们可以这样做。 Let’s use an array. The array option is right up here, we’ll click that. And what happens when we render now? Still nothing. We still have the tiny star. We have to make that light a child of the array. So let’s grab the light, click and drag, and drag it into the array. And now, that array is duplicating, it’s setting up copies for our light. So now we have seven copies, that means in addition to our original, we have eight total stars. Still not enough for a galaxy. Let’s do something much higher like seven hundred. And, that looks pretty good. If we render as-is, will it look like a galaxy? Not so much. Looks a little more like a portal, but this is a good start, because in a galaxy the stars are randomized. It’s not a perfect ring. Instead, there’s randomization. So what we can do is right-click our array, we can convert the current state, this current state, everything we see here, to an object. And that object is going to also be called array. And if we open that up, we see individual instances for every single star. Let’s turn off, let’s uncheck the original array and collapse that. And this we’ll call Galaxy. Okay, let’s randomize our stars. Let’s select the top one, and then scroll all the way down, hold down shift, select the bottom one, now all 700, 701 of our stars are selected. And we can randomize their position, and we can randomize their scale. Let’s go into tools, arrange objects, randomize. And, we can move them, this’ll be the range in which something will move. So we can say, one hundred fifty centimeters along our x-axis. Let’s value the first one as x, the second one as y, the third one as z. X-axis is our left and right axis, so if we hit enter, we’ll see everythings been randomized, but only one way, only in one direction, along the x-axis, or, two directions along the x-axis. Let’s do the same thing along the y, but let’s make it a little bit less, let’s do 30 centimeters so we get a little variation along the y-axis, that’s up and down. Looking a little better. Maybe 50 centimeters for that one. That looks pretty good. And another 150 for the z-axis. This is our depth axis. And, that looks a lot better. If we render this as-is right now, if we render, it doesn’t quite look right, though. Let’s affect scale, because in a galaxy, not every point is identical. Points tend to cluster, there tend to be different sizes of stars, different brightness levels. So, let’s do that. Let’s change our scale to 200, 200, 200. Render now. That’s looking a lot better.
现在，仍然有一些变化。例如，我们可以进入模式和对象，把5%的比例降到3%这可能是一个很好的基础比例。看起来好多了。好了，现在让我们把一颗巨星放在中间，这样它看起来就像我们星系的中心。我们可以抓取任何一个灯，比如701号，复制，命令C，粘贴，命令V，现在我们多了一个星号。我们把那颗星移开。顺便说一下，这颗恒星不再在这个空区，不再在这个星系群中，也就是这个，我们可以说，星系中心。我们可以用100来代替3的刻度。看看是什么样子的。让我们把它渲染成原样，现在它的位置在这里，我们要把它移动到中心。 So we’re going to set our x position to 0, we’ll set our y position to 0, and we’ll set our z position to 0. Now if we render, we can see that star right at the center. In fact, let’s affect that scaling, maybe a little larger, maybe 200 percent. Let’s see what that looks like. That looks pretty good. 150 might be a nice compromise. There it is. Now, one more thing we can do to add a little more granularity, some realism to this galaxy, we can take our first galaxy object, copy and paste it, and then randomize yet again. Let’s grab our top one, and grab our bottom while we’re holding down shift to select all of these, that’s looking good, the selection has been made, let’s go into randomize. We can click this shortcut right here or just go back up to tools, we’ll do it this way, and let’s randomize it again. Let’s move it even farther. Let’s do 400, here we can keep it at 50, 400. And scale, we can reset those to 100.
这里我们要做的有点不同，我们要把这些做得小很多。为了做到这一点，我们进入模式，进入对象，改变初始比例，初始比例，只有1%现在如果我们渲染，我们应该看到远处一堆较小的恒星，这给了我们额外的深度，额外的现实感，它看起来很好。现在，我们把这个星系叫做小恒星，折叠它，现在我们有两个大的物体，我们有星系和小恒星。你可以缩小，看看它在不同视图中的样子。这看起来很好，但缩小我们失去了一点真实感。让我们创建一个相机对象。创建一个相机对象，你可以缩小并看一下我们刚刚创建的相机对象。这是相机。要看摄像头看到什么，我们会选择这个小目标图标，这个小准星。 Click that, now we’re looking at what the camera sees. And, with the camera selected, let’s go in and zoom a little more. Let’s go in a little bit closer. And, we’ll decrease our focal length, so right now it’s a 36 millimeter lense, let’s change that to 24, so we have a little bit of a winder field of view. Let’s render. That’s looking pretty good.
让我们旋转这个。让我们的星星动起来。让我们的星系充满活力。我们可以同时对小恒星进行动画化，让我们拖动这些小恒星成为Galaxy的子元素。和星系崩溃。现在，如果我们移动播放头，什么也不会发生。当我们从第0帧到第90帧时，我们希望它是动画的。在第0帧，我们创建一个关键帧，选中Galaxy，点击这里记录活动对象。我们将创建我们的第一个关键帧，然后我们将一直移动到最后，第90帧。我们在这里使用旋转工具，旋转一下。 Let’s rotate about 90 degrees maybe, maybe 50 degrees is enough, and we’ll create a keyframe. If we click and drag the playhead, our galaxy rotates. If we render any of these frames, it looks pretty good. Now, we might want the center of the galaxy to be a little closer to the center of the camera. We can do that with our camera selected, we can move up that angle, that downward angle from -18 to maybe -12, or -13. Render that, and now the center of the galaxy is closer to the center of the shot. Maybe -14. That’s looking pretty good. So, as our galaxy rotates, the camera remains pointed to the center of the project. That’ s looking pretty good. Last step before we move on, let’s go to file, and we’ll save our project. That’s part one in Cinema 4D.
我们要做的是用After Effects渲染出来。这部分讲得很快。而且，这是关于整合After Effects和Cinema 4D的有趣的事情，因为现在我们已经保存了，我们可以切换到After Effects，我们的星系就出现在那里。我们可以把那个星系拖进来在这里创建一个新的合成，放手，我们就有了一个具有确切帧数的新合成，当我们旋转时，它不是正确的视图。我们可以看到一些东西，但并不完全正确。我们正在看的是一个预览，每个星星的位置，但我们想要的是改变我们的渲染器从软件到标准。这是最后一次。当我们这样做的时候，我们将看到我们的星星。
现在，如果我们想要做出改变，会发生什么?如果我们想改变这些镜头效果的颜色会发生什么。我们可以切换到Cinema 4D，我们可以打开我们的星系，我们可以选择所有的主要光源，这些是这个群中所有的光，不是较小的恒星，让我们点击编辑，我们可以改变颜色。例如，我们可能想让它少一点蓝绿色，多一点蓝色，让我们这么做。打好了。打好了。保存。而且，当我们切换到After Effects时，更改几乎立即更新。也许是主光的颜色，这是中心的大光，星系的中心，也许我们也想改变它。让我们点击编辑，影响它的颜色，我们在这里做同样的事情，让我们预热元素3。 This was the red center, we can make it a little warmer, little redder, hit okay. Okay. And save. If we take a look after switching to After Effects, we can see we have that warmer center which loads right up.
那么，我们怎么把它变成一个图像序列呢?这很简单，我们去合成，添加到adobemediaencoder Q，当它加载时，我们要找三个不同的东西。第一件事是它是一个JPG序列，所以格式选项我们要选择JPG。我们要确保它在这里是JPG序列，但现在我们将忽略第二部分，只使用包含的基本设置。然后我们要选择我们的输出文件，这是每个JPG，序列的每个JPG，将被保存的地方。让我们创建一个名为Galaxy JPG Sequence的新文件夹，再次按回车键，然后渲染。这就是图像序列。
我们如何使用它?更重要的是，我们如何在图像序列上使用身体移动?切换回After Effects保存我们的项目。点击文件，保存，另存为，命名为Example Galaxy。让我们关闭这个合成，因为我们马上要创建一个新的。这是如何。我们抓取我们的Example Galaxy文件夹，我们进入刚才创建的JPG序列，在Mac上命令a或在Windows上控制a来选择所有，我们把图片序列，所有91张图片，拖到项目箱中。它们会直接加载，有了这个，我们可以直接把它们拖到下面这个空白区域，图层区域。和放手。这就是有趣的地方。 We can create a single composition using the dimensions from any of these, since they’re all the same size, and we’ll create a still duration of one frame, just one at the end, all other values are 0. This means each frame, each JPG will take up one frame. And, we’re going to sequence the layers with no overlap. Let’s hit okay. That image sequence is laid out right here. So, how do we use bodymovin? We just use bodymovin. Let’s go to window, extensions, bodymovin. Now, it might not show up right away. Sometimes this takes a moment, but when it does, there it is, we can hit selected, we’ll make sure to select this for render, we’ll go into the settings, and in the settings there are a couple things to look at. Assets, let’s open that up. We want to enable compression. Let’s do something like 40 for right now, but we can tweak this and render it later if we want to increase that image quality or decrease the image quality based on the result. We’re wanting to manage, we’re wanting to find that perfect balance between image size, file size, and image quality. So, let’s also include in JSON, we’re going to include these JPGs, these compressed JPGs in the JSON file. Hit save, confirm the destination, galaxy, and render.
好了，现在我们已经导出了文件。让我们把它放在我们的网页中。要做到这一点，我们会转到资产，我们会上传我们刚刚做的。我们将它保存为Galaxy，而不是JSON，点击打开，这将是配置完成后，我们可以将鼠标悬停在上面，预览Lottie动画。我们会直接把它拖到我们的项目中，拖到动画占位符中。现在如果我们现在去预览，你会看到动画和预期的一样播放，但是在空白的底部有大约5个像素。根据Lottie如何解释这个动画，我们可能需要选择我们的Lottie动画并添加一些负边界，让我们做-5像素。如果我们再次渲染，效果会很好。现在，让我们退出预览模式因为它会被放到我们的网页中。
现在让我们进入最后一步，在这里我们设置交互本身。我们可以在相互作用中做这个。我们将创建一个页面触发器。当鼠标在视口中移动时，我们希望这个动画继续进行。我们选这个选项。我们会播放一个鼠标动画，当鼠标移动时，我们会播放这个鼠标动画。我们现在新建一个，命名为Galaxy Rotate。鼠标有两种移动方式，y轴是上下方向，x轴是左右方向。x是我们想要控制的。我们要在这里添加一个新动作，我们要确保没有其他东西被选中，我们不需要段落，标题，只需要Lottie动画。 We’ll create a new action right here, click the little plus, and go down to Lottie. When the mouse is all the way to the left, we want our animation to be at frame 0. When the mouse is all the way to the right, at 100 percent, we want it to be at the end. Now, sometimes if we go too far to the end, it can get a bit finicky, so we’ll pull that back down to 99. That looks pretty good. And if we turn on live preview, just enable live preview, we can see it rotates exactly as expected.
现在，我们得到的是一个反向效应。当我们向左移动时，星系逆时针旋转。当我们向右移动时，它顺时针旋转。我们可以把它翻转。我们可以把动画拖到另一边，我们只需要点击并拖动第一个到100，最后一个到0。我们只是把它们翻转。而且，如果我们现在启用实时预览，它将完全按照预期工作。让我们进入预览模式，就这样。当我们向左移动时，当我们向右移动时，星系就会跟着移动。现在，我们可以回到预览模式并影响平滑或阻尼，那个值是50%，但我们可以切换到85%左右，这意味着当我们移动鼠标时，它会赶上来。 The animation will smoothly approach the current mouse position. But that’s it. Now, how does this contrast with other ways of using 3D for the web? Because with modern web technologies, there are technologies like WebGL that can render primitives and shadows, and textures, in real-time, in many cases with small file sizes. But, when we get into more advanced lens effects, physically accurate renders, shading, advanced depth of field, thats where prerendering works great. It’s where an image sequence can ensure things look consistent on all devices. It’s also great if you’re making something that can’t be represented in 3D space, like if you’re converting an existing video to an image sequence. But, for us, in this example, we just created something in Cinema 4D from scratch, and we made it into an image sequence, exported that using bodymovin, imported that into Webflow, and we set up the interaction to respond based on the position of our mouse. And that’s using a mouse-based trigger to control an image sequence, or video, with After Effects and Webflow.
