Three.js realizes Facebook Metaverse 3D dynamic logo effect

This article mainly describes how to use the Three.js + Blender technology stack to realize Meta's cool 3D dynamic logo, including basic model rings, torus knots, pipelines and model generation, model loading, adding animations, adding click events, changing materials, etc.

background

Facebook recently changed the name of its parent company to Meta and announced that it has officially begun to enter元宇宙🪐 field. This article mainly describes how to use the Three.js + Blender technology stack to realize Meta 's cool 3D dynamic Logo , including basic model rings, torus knots, pipelines and model generation, model loading, adding animations, adding click events, changing materials, etc.

What is the Metaverse?

The term Metaverse comes from Neal Stephenson's 《雪崩》 in 1992 , which describes a virtual world called Metaverse parallel to the real world, where all people in real life have a network avatar Avatar .維基百科describes the metaverse as: 3D virtual space based on the future Internet with link perception and sharing features that is a virtual augmented physical reality that exhibits convergence and physical persistence.

The connotation of the metaverse has absorbed the achievements of the information revolution 5G/6G , the Internet revolution web3.0 , the artificial intelligence revolution, as well as VR , AR , MR , and especially the virtual reality technology revolution including game engines, showing humans the possibility of building a holographic digital world parallel to the traditional physical world; it has triggered the interaction of information science, quantum science, mathematics and life sciences, and changed the scientific paradigm; it has promoted breakthroughs in traditional philosophy, sociology and even humanities systems; and it encompasses all digital technologies. Just like the scene in the movie 《頭號玩家》 , one day in the future, people will be able to switch identities anytime and anywhere, freely travel between the physical world and the digital world, and live and study in the metaverse composed of virtual space and time nodes.

Achieve results

Let's get to the point and take a look at the implementation effect of the example in this article.

🔗 preview: https://dragonir.github.io/3d-meta-logo (Due to the large size of the model, the loading progress may be slow, please be patient)

Development and Implementation

📌 : The above example animation shows Trial 4. If you don’t want to see the trial and error process (Trial 1, Trial 2, Trial 3), you can jump directly to Trial 4 to view the detailed implementation process. The difficulties are listed in the failed process. If you know the solution, please feel free to share it in the comment section.

Before development, let’s take a look at Meta Logo . We can see that it is a circle that is folded and twisted. Therefore, when implementing it, we can start by implementing the circle.

Trial 1: THREE.TorusGeometry

The basic geometry provided by Three.js is THREE.TorusGeometry , which is a simple graphic that looks like a donut 🍩 . Main parameters:

• radius : optional. Defines the radius size of the ring. The default value is 1 .
• tube : Optional. Defines the radius of the tube of the torus. The default value is 0.4 .
• radialSegments : Optional. Defines the number of segments along the length of the ring. The default value is 8 .
• tubularSegments : Optional. Defines the number of segments along the width of the ring. The default value is 6 .
• arc : Optional. Defines the length of the circle drawn. The value range is 0 to 2 * π . The default value is 2 * π (a full circle).

Syntax example:

THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);

😭 失敗: Didn't find a way to twist the ring.

Trial 2: THREE.TorusKnotGeometry

THREE.TorusKnotGeometry can be used to create a three-dimensional torus knot, which is a special knot that looks like a tube twisted around itself several times. Main parameters:

• radius : optional. Sets the radius of the complete circle. The default value is 1 .
• tube : Optional. Set the radius of the pipe, the default value is 0.4 .
• radialSegments : Optional. Specify the number of segments of the pipe cross section. The more segments there are, the smoother the pipe cross section will be. The default value is 8 . tubularSegments : Optional. Specify the number of segments of the pipeline. The more segments there are, the smoother the pipeline will be. The default value is 64 .
• p : Optional. Determines how many times the geometry will be rotated around its axis of rotational symmetry. The default value is 2 .
• q : Optional. Determines how many times the geometry will rotate around its inner ring. The default value is 3 .

Syntax example:

THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q);

😭 失敗: Didn't find a way to control the degree of manual distortion.

Trial 3: THREE.TubeGeometry

THREE.TubeGeometry extrude a tube along a three-dimensional spline. You can specify some points to define the path, and then use THREE.TubeGeometry to create the tube. Main parameters:

• path : This property uses a THREE.SplineCurve3 object to specify the path that the pipeline should follow.
• segments : This property specifies the number of segments used to construct this tube. The default value is 64 The longer the path, the more segments should be specified.
• radius : This property specifies the radius of the tube. The default value is 1 .
• radiusSegments : This property specifies the number of segments of the pipe circumference. The default value is 8 The more segments there are, the rounder the pipe will look.
• closed : If this property is set to true , the head and tail of the pipe will be connected. The default value is false .

Code Sample

// ...
var controls = new function () {
  //Point coordinates 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);
}
// ...

😊 勉強成功: But the circle formed by the pipes is not round enough. Precise coordinates are needed to achieve a perfect arc, and I haven’t found a way to calculate the coordinates yet.

Trial 4: Blender + Three.js

Although this can be achieved using THREE.TubeGeometry , the effect is not good. To achieve a smooth ring, it is necessary to add a precise twisted ring curve path function to the pipe. Due to my limited mathematical ability 🤕️ , I haven’t found a way to calculate the twisted arc path yet. Therefore, we decided to solve it from the modeling level.

成功😄 : But I spent a lot of time using Blender to model it 💔

Modeling Tutorial

When I was browsing B站I found this treasure video posted by this big guy, which just solved my own problem.

🎦 : [Dynamic Design Tutorial] How to play with AE+blender? Facebook Metaverse dynamic logo has been fully analyzed and 100% learned

Modeling with Blender

Use Blender for modeling and export it in fbx format that can carry animation. Don't forget to check the烘焙動畫option when exporting.

Loading Dependencies

<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>

Scene initialization

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 scene = new THREE.Scene();
  scene.transparent = true;
  scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);
  // Perspective camera: field of view, aspect ratio, near plane, far plane 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));
  // Hemisphere light source: Create a more natural light source for outdoor effects light = new THREE.HemisphereLight(0xefefef);
  light.position.set(0, 20, 0);
  scene.add(light);
  // Directional light light = new THREE.DirectionalLight(0x2d2d2d);
  light.position.set(0, 20, 10);
  light.castShadow = true;
  scene.add(light);
  // Ambient light var ambientLight = new THREE.AmbientLight(0xffffff, .5);
  scene.add(ambientLight);
  // Grid 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);
  //Set the background color to transparentrenderer.setClearAlpha(0);
  // Enable shadowrenderer.shadowMap.enabled = true;
  container.appendChild(renderer.domElement);
  // Add lens controller controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.target.set(0, 0, 0);
  controls.update();
  window.addEventListener('resize', onWindowResize, false);
  // Initialize performance plugin stats = new Stats();
  container.appendChild(stats.dom);
}
// Screen zoom function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

📌 you want to know the detailed process of scene initialization, you can read my other article "Using three.js to realize cool acid-style 3D pages".

Loading Logo Model

Use FBXLoader to load the model and set the position and size of the model.

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);
});

Adding Materials

Logo of this article uses MeshPhysicalMaterial , which is a PBR physical material that can better simulate lighting calculations. Compared with the high-light mesh material MeshPhongMaterial the rendering effect is more realistic. Use THREE.TextureLoader to add a map attribute to the material to load the model texture. The image below is a texture map of a metallic texture.

var texLoader = new THREE.TextureLoader();
loader.load('assets/models/meta.fbx', function (mesh) {
  mesh.traverse(function (child) {
    if (child.isMesh) {
      if (child.name === 'Bezier circle') {
        child.material = new THREE.MeshPhysicalMaterial({
          map: texLoader.load("./assets/images/metal.png"),
          metalness: .2,
          roughness: 0.1,
          exposure: 0.4
        });
      }
    }
  });
})

Add animation

• AnimationMixer object is an animation player for a specific object in the scene. When multiple objects in a scene are animated independently, you can use one AnimationMixer for each object.
• The clipAction method of AnimationMixer object generates an instance that can control the execution of the animation.

loader.load('assets/models/meta.fbx', function (mesh) {
  mesh.animations.map(item => {
    mesh.traverse(child => {
      // Because there are multiple objects in the model, and each has a different animation, this example only adds animation to the Bezier circle mesh if (child.name === 'Bezier circle') {
        let mixer = new THREE.AnimationMixer(child);
        mixerArr.push(mixer);
        let animationClip = item;
        animationClip.duration = 8;
        let clipAction = mixer.clipAction(animationClip).play();
        animationClip = clipAction.getClip();
      }
    })
  })
});

After adding the animation, don't forget to update the animation in requestAnimationFrame .

function animate() {
  renderer.render(scene, camera);
  // Get the time interval between two executions of this method let time = clock.getDelta();
  // Update logo animation mixerArr.map(mixer => {
    mixer && mixer.update(time);
  });
  // Update character animation manMixer && manMixer.update(time);
  stats.update();
  requestAnimationFrame(animate);
}

Display loading progress

FBXLoader also returns two callback functions, which can be used as follows to show the model loading progress display and the logic implementation of loading failure.

<div class="loading" id="loading">
  <p class="text">Loading progress<span id="progress">0%</span></p>
<div>

var loader = new THREE.FBXLoader();
loader.load('assets/models/meta.fbx', mesh => {
}, res => {
  // Loading progress let progress = (res.loaded / res.total * 100).toFixed(0);
  document.getElementById('progress').innerText = progress;
  if (progress === 100) {
    document.getElementById('loading').style.display = 'none';
  }
}, err => {
  // Load failed console.log(err)
});

Achieve results

Click to change the material

Listen to the click event of the page and get the current click object through HREE.Raycaster . To show the example, I changed the material of the click object THREE.MeshStandardMaterial and gave it random color , metalness and roughness .

//Declare raycaster and mouse variables var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseClick(event) {
  // Calculate the position of the point required by the raycaster based on the position of the mouse click, with the center of the screen as the origin, and the value range is -1 to 1.
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
  // Calculate the raycaster based on the position of the mouse point and the current camera matrix
  raycaster.setFromCamera(mouse, camera);
  // Get the array collection where the raycaster line intersects with all models 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);

📌 more information about mesh materials, please refer to the link at the end of the article.

Loading character model

The character model loading process is the same as the Logo model loading process. I added a character performing Kamehameha, and I didn't expect it to fit in perfectly with the rotation animation of the Logo model 😂 .

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)
});

The example character models in this article come from mixamo.com, which has hundreds of characters and thousands of actions that can be freely combined and downloaded免費. You can choose your favorite characters and animation actions to practice Three.js .

Summarize

The main knowledge points involved in this article include:

• THREE.TorusGeometry : A torus.
• THREE.TorusKnotGeometry : Torus knot.
• THREE.TubeGeometry : Tube.
• Blender : Modeling.
• FBXLoader : loads the model and displays the loading progress
• . TextureLoader : Loads textures.
• THREE.AnimationMixer : Loads animations.
• THREE.Raycaster : Captures clicks on the model.

🔗 code: https://github.com/dragonir/3d-meta-logo

References

[1]. Using three.js to create a cool acid-style 3D page

[2]. Understanding materials in ThreeJs

[3]. First impression of Three’s Animation

[4]. What is the Metaverse?

Author: dragonir Article URL: https://www.cnblogs.com/dragonir/p/15574412.html

This is the end of this article about how to implement Facebook Metaverse 3D dynamic logo with Three.js. For more related Three.js 3D dynamic logo content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!