如何使用three.js融化3D对象

null

我们所知道的网络正在不断变化和发展。几年前,我们仍然记得作为一种简单而直接的媒介获得了另一个维度,看起来它也不会停止在那里。为一个网站建设者曾经是科幻小说电影视觉效果的一部分现在可以放在躺在沙发上的平板电脑上,并且有大型互动装置覆盖的建筑物实际上只是全屏谷歌Chrome窗口。

按照以下步骤了解如何使用three.js创建逼真的融化效果。

01.设置three.js场景

继续抓住three.js库并将其包含在您的站点中。您需要实例化WebGLRenderer,Scene和PerspectiveCamera。在实例化这些之后,您将需要渲染场景RequestAnimationFrame

02.为场景添加灯光

接下来,需要将灯光添加到3D场景中。在此示例中,将使用两个灯:环境光和点光源。环境光作为场景的整体全局颜色,而点光源将发出随距离减小的光。这会给场景带来一些对比。

var ambientLight = new THREE.AmbientLight(0xccccccc); scene.add(ambientLight); var pointLight = new THREE.PointLight(0xffffff,1); pointLight.position.set(10,5,0);

03.加载3D模型

现在已经设置了场景,需要加载3D模型。可以使用任何支持的格式(JSON,OBJ,DAE等)加载模型。下面是加载DAE模型的示例。在此示例中,模型具有足够的多边形来执行顶点修改非常重要。

在这个例子中使用的鹿头骨有3,500多边形。如果多边形数量太低,则顶点动画将过于明显且失真。

loader = new THREE.ColladaLoader(); loader.load('dae / deer_skull / deer_skull.dae',onLoadCompleteHandler);

04.添加凹凸贴图

凹凸贴图非常适合以低成本为纹理添加深度。创建凹凸贴图图像后,只需将其应用于下面的材质即可实现。此外,您还需要调整凹凸贴图的比例以适合模型的比例。

material.bumpMap ='img / deer_skull / deer-bump.jpg'; material.bumpScale = .008;

05.使用顶点动画师

在整个网站中,约翰尼利用Jerome Etienne的游戏扩展为three.js,这使得更容易做顶点动画。此扩展允许以帧速率轻松访问模型的每个顶点,从而可以直接使用波形操作顶点。

顶点动画扩展可以通过Etienne的GitHub获得。我们将进一步探讨在接下来的步骤中如何使用它。

Users can interact with the 3D model and view from multiple angles

用户可以与3D模型进行交互并从多个角度进行查看

06.开始融化

熔化一块几何体涉及几个整体步骤。首先,每个点不断向下推。当一个点到达地面时,它会被我们称为“推矢量”的东西向外推。

接下来,我们将给出沿底部聚集厚度的点,以使熔化的几何形状不完全平坦。为了实现这一目标,Johnny已经从Hkeini的Skeel Lee的VFX着色器中移植了代码并对其进行了修改。

07.开始向下移动顶点

下面是使用顶点动画师连续将模型的几何体推向地面的示例用法。

var vertexAnimation = new THREEx.VertexAnimation(geometry,function(origin,position,delta,now){position.y  -  = meltAmount * modelHeight;}

这将按照定义的速率降低点数MeltAmount。还记得在渲染周期中对顶点动画调用'update'。

08.确定推送向量

当一个点到达地面时,需要将其向外推,以实现融化效果。下面的代码是确定X和Z轴中的哪个方向推动顶点,以便获得均匀的位移。条件确保只有到达模型最低边界的点(地面)才会向外推。

if(position.y <bbox.min.y){var centroid = bbox.max.clone()。add(bbox.min.clone())。divideScalar(2.0); pushVector = position.clone()。sub(centroid); pushVector.y = 0; }

09.让融化感觉自然

下面的代码使用噪音来创造机芯的随机性,使融化感觉有机。可以调整噪声变量以获得所需的效果。然后将噪声与推动矢量一起应用MeltAmountSpreadAmount控制融化池的速度和大小。最后计算该向外矢量,然后将其应用于顶点本身。

var n = noiseAmplitude * generator.getVal((position.x)* noiseFrequency + noiseOffset); var outwardVector = pushVector.multiplyScalar(((meltAmount * spreadAmount)+ n)* outwardSpeed); position.add(outwardVector);

10.给出融化的池厚度

到目前为止解释的代码将实现融化效果,但有两个问题是错误的。首先,游泳池将感觉非常平坦,因为所有点都融化到相同的Y位置。其次,由于它们都共享相同的Y,所以在相同高度处堆叠太多点,这可能导致闪烁。为避免这种情况,以熔化速率施加厚度:

position.y + = meltAmount * poolThickness;

11.在其他型号上试一试

使用上面的代码,任何具有足够多边形的模型都可以融化。从代码中下载一个zip文件这里并用你想要的任何东西换掉模型。玩得开心!

这篇文章最初出现在 网页设计者 问题265.买 这里

相关文章:



翻译字数超限