随着现代网络技术的到来，以及时间旅行的最新进展，我们不仅可以在Cinema 4D建模这个星系，但我们可以使用After Effects和Webflow使其响应我们的横向鼠标位置在网页内。并且，我们将从一开始覆盖这一点，所以如果你从未探索过cinema 4D，或如果你在Adobe After Effects中构建技能，或如果你刚刚开始设计和开发的网页，我们将确保通过每一步的过程。并且，我们将在五个部分中这样做:我们将在Cinema 4D中创建动画，我们将在After Effects中渲染它作为一个图像序列，我们将使用bodymovin扩展After Effects来导出它，我们将把导出的文件放入Webflow，我们将设置一个交互，所以它响应我们的鼠标。
听起来很多，确实很多，但我们会很快地过一遍。花的时间太长了，格里姆可能会选择删掉那些似乎还在继续的部分……
这就是为什么《星际迷航》的第一次接触重新设想了僵尸题材。至于After Effects, Cinema 4D Light带来的事实，意味着我们可以建立真正复杂的场景，并使用Adobe媒体编码器渲染它们，让我们的图像序列。这就是关键所在。我们将使用这个序列来创建Lottie动画。爱彼迎创建Lottie，将After Effects动画整合到网页上。这就是我们这集要做的。
好的，Cinema 4D:这是我们的第一步。我们可以从After Effects开始。只是文件，新，Cinema 4D。我们给它起个名字，银河。回车。现在，当它加载时，是时候提一下了——它已经加载了。这是Cinema 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.
好了，该开始了。我们不打算使用任何原语;相反，我们只用一盏灯。我们要添加一个光源，如果我们现在渲染，默认情况下，这是我们的光源显示的方式。我们这里有一般的设置。如果我们现在渲染，按render view，我们会看到什么?没什么。这是意料之中的，因为虽然那里有光，但没有东西可以让光照亮。例如，如果我们添加一个立方体，让我们在这里添加一个立方体，让我们把它移回来，你可以看到光线正在影响那个立方体。当我们移动立方体时，我们可以看到光线影响我们的立方体。 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号元素，这看起来很好。我们可能要换成更酷一点的颜色，比如蓝色。看起来不错。然后进入每个元素，也许这是ok as-is，元素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，现在我们多了一个星号。让我们移动那颗星。顺便说一下，那颗恒星不再在这个空区域，它不再在这个星系群中，也就是这里的这颗，我们可以说，星系中心。我们可以把这个比例尺从3改成100。看看这是什么样子。让我们按原样渲染它，现在它的位置在这里，我们想要把它移动到中心。 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.
我们旋转一下。让我们把恒星做成动画。让我们把银河系变成动画。所以，我们的小恒星，我们可以同时动画它们，让我们把这些小恒星拖拽成银河系的孩子。和星系崩溃。现在，如果我们移动游戏头，什么都不会发生。我们想让它在从0帧到90帧的过程中发生变化。所以在第0帧，让我们创建一个关键帧，选择银河，让我们点击这里记录活动对象。我们将创建我们的第一个关键帧，然后我们将一直移动到最后，第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.
那么，我们怎么把它转换成图像序列呢?这很简单，我们进入合成，添加到Adobe Media Encoder Q，当它加载时，我们会寻找三个不同的东西。首先，它是一个JPG序列，因此格式选项我们将选择JPG。我们要确保这里是JPG序列，但现在我们将忽略第二部分，并使用包括的基本设置。然后我们要选择我们的输出文件，这是每个JPG，每个序列的JPG，会被保存的地方。让我们创建一个名为Galaxy JPG Sequence的新文件夹，我们将再次点击enter，然后渲染。这就是图像序列。
我们如何使用它?更重要的是，我们如何在图像序列中使用bodymovin ?好了，让我们切换回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.
好的，现在我们已经导出了文件。让我们把它放在我们的网页中。要做到这一点，我们会去assets，我们会上传我们刚刚做的。我们把它保存为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.
