Three.js实现脸书元宇宙3D动态Logo效果

程序员文章站 2022-03-26 08:56:07

目录背景什么是元宇宙实现效果试炼一：three.torusgeometry试炼二：three.torusknotgeometry试炼三：three.tubegeometry试炼四：blender +...

背景

facebook 近期将其母公司改名为 meta，宣布正式开始进军 元宇宙 ????领域。本文主要讲述通过 three.js + blender 技术栈，实现 meta 公司炫酷的 3d 动态 logo，内容包括基础模型圆环、环面扭结、管道及模型生成、模型加载、添加动画、添加点击事件、更换材质等。

什么是元宇宙

元宇宙 metaverse 一词源于 1992 年尼尔·斯蒂芬森的 《雪崩》，该书描述了一个平行于现实世界的虚拟世界 metaverse，所有现实生活中的人都有一个网络分身 avatar。* 对元宇宙的描述是：通过虚拟增强的物理现实，呈现收敛性和物理持久性特征的，基于未来互联网，具有链接感知和共享特征的 3d 虚拟空间。

Three.js实现脸书元宇宙3D动态Logo效果

元宇宙的内涵是吸纳了信息革命 5g/6g、互联网革命 web3.0、人工智能革命，以及 vr、ar、mr，特别是游戏引擎在内的虚拟现实技术革命的成果，向人类展现出构建与传统物理世界平行的全息数字世界的可能性；引发了信息科学、量子科学，数学和生命科学的互动，改变科学范式；推动了传统的哲学、社会学甚至人文科学体系的突破；囊括了所有的数字技术。正如电影 《头号玩家》 的场景，在未来某一天，人们可以随时随地切换身份，*穿梭于物理世界和数字世界，在虚拟空间和时间节点所构成的元宇宙中生活学习。

实现效果

进入正题，先来看看本文示例的实现效果。

Three.js实现脸书元宇宙3D动态Logo效果

???? 在线预览：https://dragonir.github.io/3d-meta-logo （由于模型较大，加载进度可能比较缓慢，需要耐心等待）

开发实现

???? 注意：上述示例动图展示的是试炼四，不想看试错过程（试炼一、试炼二、试炼三）的，可直接跳转到试炼四段落查看详细实现流程。失败流程中都列出了难点，知道解决方案的大佬请在评论区不吝赐教。

Three.js实现脸书元宇宙3D动态Logo效果

开发之前我们先观察一下 meta logo，可以发现它是一个圆环经过对折扭曲形成的，因此实现它的时候可以从实现圆环开始。

试炼一：three.torusgeometry

three.js 提供的基础几何体 three.torusgeometry（圆环），它是一种看起来像甜甜圈 ???? 的简单图形。主要参数：

radius：可选。定义圆环的半径尺寸。默认值是 1。
tube：可选。定义圆环的管子半径。默认值是 0.4。
radialsegments：可选。定义圆环长度方向上的分段数。默认值是 8。
tubularsegments：可选。定义圆环宽度方向上的分段数。默认值是 6。
arc：可选。定义圆环绘制的长度。取值范围是 0 到 2 * π。默认值是 2 * π（一个完整的圆）。

语法示例：

three.torusgeometry(radius, tube, radialsegments, tubularsegments, arc);

???? 失败：没有找到扭曲圆环的方法。

Three.js实现脸书元宇宙3D动态Logo效果

试炼二：three.torusknotgeometry

three.torusknotgeometry 可以用来创建三维环面扭结，环面扭结是一种比较特别的结，看上去像一根管子绕着它自己旋转了几圈。主要参数：

radius：可选。设置完整圆环的半径，默认值是 1。
tube：可选。设置管道的半径，默认值是 0.4。
radialsegments：可选。指定管道截面的分段数，段数越多，管道截面圆越光滑，默认值是 8。tubularsegments：可选。指定管道的分段数，段数越多，管道越光滑，默认值是 64。
p：可选。决定几何体将绕着其旋转对称轴旋转多少次，默认值是 2。
q：可选。决定几何体将绕着其内部圆环旋转多少次，默认值是 3。

语法示例：

three.torusknotgeometry(radius, tube, radialsegments, tubularsegments , p, q);

???? 失败：没找到能够控制手动扭曲程度的方法。

Three.js实现脸书元宇宙3D动态Logo效果

试炼三：three.tubegeometry

three.tubegeometry 沿着一条三维的样条曲线拉伸出一根管。你可以指定一些定点来定义路径，然后使用 three.tubegeometry 创建这根管。主要参数：

path：该属性用一个 three.splinecurve3 对象来指定管道应当遵循的路径。
segments：该属性指定构建这个管所用的分段数。默认值为 64.路径越长，指定的分段数应该越多。
radius：该属性指定管的半径。默认值为 1.
radiussegments：该属性指定管道圆周的分段数。默认值为 8，分段数越多，管道看上去越圆。
closed：如果该属性设置为 true，管道的头和尾会连起来，默认值为 false。

代码示例

// ...
var controls = new function () {
  // 点的位置坐标
  this.deafultpoints = [
    [0, 0.4, -0.4],
    [0.4, 0, 0],
    [0.4, 0.8, 0.4],
    [0, 0.4, 0.4],
    [-0.4, 0, 0],
    [-0.4, 0.8, -0.4],
    [0, 0.4, -0.4]
  ]
  this.segments = 64;
  this.radius = 1;
  this.radiussegments = 8;
  this.closed = true;
  this.points = [];
  this.newpoints = function () {
    var points = [];
    for (var i = 0; i < controls.deafultpoints.length; i++) {
      var _x = controls.deafultpoints[i][0] * 22;
      var _y = controls.deafultpoints[i][1] * 22;
      var _z = controls.deafultpoints[i][2] * 22;
      points.push(new three.vector3(_x, _y, _z));
    }
    controls.points = points;
    controls.redraw();
  };
  this.redraw = function () {
    redrawgeometryandupdateui(gui, scene, controls, function() {
      return generatepoints(controls.points, controls.segments, controls.radius, controls.radiussegments,
        controls.closed);
    });
  };
};
controls.newpoints();
function generatepoints(points, segments, radius, radiussegments, closed) {
  if (spgroup) scene.remove(spgroup);
  spgroup = new three.object3d();
  var material = new three.meshbasicmaterial({ color: 0xff0000, transparent: false });
  points.foreach(function (point) {
    var spgeom = new three.spheregeometry(0.1);
    var spmesh = new three.mesh(spgeom, material);
    spmesh.position.copy(point);
    spgroup.add(spmesh);
  });
  scene.add(spgroup);
  return new three.tubegeometry(new three.catmullromcurve3(points), segments, radius, radiussegments, closed);
}
// ...

Three.js实现脸书元宇宙3D动态Logo效果

???? 勉强成功：但是管道连成的圆环不够圆，实现完美的圆弧需要精确的坐标，暂时没找到坐标计算方法。

试炼四：blender + three.js

虽然使用 three.tubegeometry 可以勉强实现，但是效果并不好，要实现圆滑的环，需要为管道添加精确的扭曲圆环曲线路径函数。由于数学能力有限 ????️，暂时没找到扭曲圆弧路径计算的方法。因此决定从建模层面解决。

成功 ????：但是手残的我使用 blender 建模花费了大量的时间 ????。

建模教程

逛 b站 的时候发现了这位大佬发的宝藏视频，刚好解决了自己的难题。

Three.js实现脸书元宇宙3D动态Logo效果

???? 传送门：【动态设计教程】ae+blender能怎么玩？脸书元宇宙meta动态logo已完全解析，100%学会

用blender建模

使用 blender 进行建模，并导出可携带动画的 fbx 格式，导出的时候不要忘记勾选 烘焙动画 选项。

Three.js实现脸书元宇宙3D动态Logo效果

加载依赖

<script src="./assets/libs/three.js"></script>
<script src="./assets/libs/loaders/fbxloader.js"></script>
<script src="./assets/libs/inflate.min.js"></script>
<script src="./assets/libs/orbitcontrols.js"></script>
<script src="./assets/libs/stats.js"></script>

场景初始化

var container, stats, controls, compose, camera, scene, renderer, light, clickableobjects = [], mixer, mixerarr = [], manmixer;
var clock = new three.clock();
init();
animate();
function init() {
  container = document.createelement('div');
  document.body.appendchild(container);
  // 场景
  scene = new three.scene();
  scene.transparent = true;
  scene.fog = new three.fog(0xa0a0a0, 200, 1000);
  // 透视相机：视场、长宽比、近面、远面
  camera = new three.perspectivecamera(60, window.innerwidth / window.innerheight, 0.1, 1000);
  camera.position.set(0, 4, 16);
  camera.lookat(new three.vector3(0, 0, 0));
  // 半球光源：创建室外效果更加自然的光源
  light = new three.hemispherelight(0xefefef);
  light.position.set(0, 20, 0);
  scene.add(light);
  // 平行光
  light = new three.directionallight(0x2d2d2d);
  light.position.set(0, 20, 10);
  light.castshadow = true;
  scene.add(light);
  // 环境光
  var ambientlight = new three.ambientlight(0xffffff, .5);
  scene.add(ambientlight);
  // 网格
  var grid = new three.gridhelper(100, 100, 0xffffff, 0xffffff);
  grid.position.set(0, -10, 0);
  grid.material.opacity = 0.3;
  grid.material.transparent = true;
  scene.add(grid);
  renderer = new three.webglrenderer({ antialias: true, alpha: true });
  renderer.setpixelratio(window.devicepixelratio);
  renderer.outputencoding = three.srgbencoding;
  renderer.setsize(window.innerwidth, window.innerheight);
  // 背景色设置为透明
  renderer.setclearalpha(0);
  // 开启阴影
  renderer.shadowmap.enabled = true;
  container.appendchild(renderer.domelement);
  // 添加镜头控制器
  controls = new three.orbitcontrols(camera, renderer.domelement);
  controls.target.set(0, 0, 0);
  controls.update();
  window.addeventlistener('resize', onwindowresize, false);
  // 初始化性能插件
  stats = new stats();
  container.appendchild(stats.dom);
}
// 屏幕缩放
function onwindowresize() {
  camera.aspect = window.innerwidth / window.innerheight;
  camera.updateprojectionmatrix();
  renderer.setsize(window.innerwidth, window.innerheight);
}

???? 想了解场景初始化的详细流程，可阅读我的另一篇文章《使用three.js实现炫酷的酸性风格3d页面》。

加载logo模型

使用 fbxloader 加载模型，并设置模型的位置和大小。

var loader = new three.fbxloader();
loader.load('assets/models/meta.fbx', function (mesh) {
  mesh.traverse(function (child) {
    if (child.ismesh) {
      child.castshadow = true;
      child.receiveshadow = true;
    }
  });
  mesh.rotation.y = math.pi / 2;
  mesh.position.set(0, 1, 0);
  mesh.scale.set(0.05, 0.05, 0.05);
  scene.add(mesh);
});

添加材质

本文 logo 使用的是 meshphysicalmaterial材质，它是一种 pbr 物理材质，可以更好的模拟光照计算，相比较高光网格材质 meshphongmaterial 渲染效果更逼真。使用 three.textureloader 为材质添加 map 属性来加载模型贴图。下图是金属质感的纹理贴图。

Three.js实现脸书元宇宙3D动态Logo效果

var texloader = new three.textureloader();
loader.load('assets/models/meta.fbx', function (mesh) {
  mesh.traverse(function (child) {
    if (child.ismesh) {
      if (child.name === '贝塞尔圆') {
        child.material = new three.meshphysicalmaterial({
          map: texloader.load("./assets/images/metal.png"),
          metalness: .2,
          roughness: 0.1,
          exposure: 0.4
        });
      }
    }
  });
})

添加动画

animationmixer 对象是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个 animationmixer。
animationmixer 对象的 clipaction 方法生成可以控制执行动画的实例。

loader.load('assets/models/meta.fbx', function (mesh) {
  mesh.animations.map(item => {
    mesh.traverse(child => {
      // 因为模型中有多个物体，并且各自有不同动画，示例中只为贝塞尔圆这个网格添加动画
      if (child.name === '贝塞尔圆') {
        let mixer = new three.animationmixer(child);
        mixerarr.push(mixer);
        let animationclip = item;
        animationclip.duration = 8;
        let clipaction = mixer.clipaction(animationclip).play();
        animationclip = clipaction.getclip();
      }
    })
  })
});

添加动画之后，不要忘了要在 requestanimationframe 中更新动画。

function animate() {
  renderer.render(scene, camera);
  // 获得前后两次执行该方法的时间间隔
  let time = clock.getdelta();
  // 更新logo动画
  mixerarr.map(mixer => {
    mixer && mixer.update(time);
  });
  // 更新人物动画
  manmixer && manmixer.update(time);
  stats.update();
  requestanimationframe(animate);
}

展示加载进度

fbxloader 同时返回两个回调函数，可以像下面这样使用，用来展示模型加载进程展示以及加载失败的逻辑实现。

<div class="loading" id="loading">
  <p class="text">加载进度<span id="progress">0%</span></p>
<div>

var loader = new three.fbxloader();
loader.load('assets/models/meta.fbx', mesh => {
}, res => {
  // 加载进程
  let progress = (res.loaded / res.total * 100).tofixed(0);
  document.getelementbyid('progress').innertext = progress;
  if (progress === 100) {
    document.getelementbyid('loading').style.display = 'none';
  }
}, err => {
  // 加载失败
  console.log(err)
});

实现效果

Three.js实现脸书元宇宙3D动态Logo效果

点击更换材质

监听页面的点击事件，通过 hree.raycaster 拿到当前点击对象，为了展示例子，我为点击对象更换了一种材质 three.meshstandardmaterial，并赋予它随机的 color 颜色、metalness 金属质感以及 roughness 粗糙程度。

//声明raycaster和mouse变量
var raycaster = new three.raycaster();
var mouse = new three.vector2();
function onmouseclick(event) {
  // 通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
  mouse.x = (event.clientx / window.innerwidth) * 2 - 1;
  mouse.y = - (event.clienty / window.innerheight) * 2 + 1;
  // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
  raycaster.setfromcamera(mouse, camera);
  // 获取raycaster直线和所有模型相交的数组集合
  let intersects = raycaster.intersectobjects(clickableobjects);
  if (intersects.length > 0) {
    console.log(intersects[0].object)
    let selectedobj = intersects[0].object;
    selectedobj.material = new three.meshstandardmaterial({
      color: `#${math.random().tostring(16).slice(-6)}`,
      metalness: math.random(),
      roughness: math.random()
    })
  }
}
window.addeventlistener('click', onmouseclick, false);

Three.js实现脸书元宇宙3D动态Logo效果

???? 更多关于网格材质的知识，可参考文章末尾的链接。

加载人物模型

人物模型的加载流程和 logo 模型加载流程是一样的。我添加了一个正在施展龟派气功的人物，没想到与 logo 模型的旋转动画非常契合 ???? 。

loader.load('assets/models/man.fbx', function (mesh) {
  mesh.traverse(function (child) {
    if (child.ismesh) {
      child.castshadow = true;
      child.receiveshadow = true;
    }
  });
  mesh.rotation.y = math.pi / 2;
  mesh.position.set(-14, -8.4, -3);
  mesh.scale.set(0.085, 0.085, 0.085);
  scene.add(mesh);
  manmixer = new three.animationmixer(mesh);
  let animationclip = mesh.animations[0];
  let clipaction = manmixer.clipaction(animationclip).play();
  animationclip = clipaction.getclip();
}, res => {
  let progress = (res.loaded / res.total * 100).tofixed(0);
  document.getelementbyid('progress').innertext = progress + '%';
  if (number(progress) === 100) {
    document.getelementbyid('loading').style.display = 'none';
  }
}, err => {
  console.log(err)
});

本文示例人物模型来源于mixamo.com，该网站有有上百种人物和上千种动作可*组合，免费 下载。大家可以挑选自己喜欢的人物和动画动作来练习 three.js。

Three.js实现脸书元宇宙3D动态Logo效果