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

2023年5月28日上午10:41 • JavaScript

下面就是详细讲解“Three.js实现脸书元宇宙3D动态Logo效果”的完整攻略。

1. 了解 Three.js

Three.js 是一款使用 WebGL 技术实现的 JavaScript 3D 库，是基于WebGL的抽象封装实现库。它可以很方便的创建、加载、修改3D 场景，包含了诸如相机、灯光、材质、物体、场景等等的封装。

2. 准备工作

先建立一个场景，初始化一个渲染器，加载 Three.js 库及必要的插件（例如 orbit-control），详见代码示例1：

<!DOCTYPE html>
<html>
   <head>
      <title>Three.js实现脸书元宇宙3D动态Logo效果的攻略</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
      <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/controls/OrbitControls.min.js"></script>
   </head>
   <body>
       <div id="container"></div>
       <script>
        let container;
        let camera, scene, renderer;
        let controls;
        function init() {
            container = document.getElementById( 'container' );
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 1000 );
            camera.position.z = 35;
            renderer = new THREE.WebGLRenderer({ alpha: true });
            renderer.setSize(container.offsetWidth, container.offsetHeight);
            container.appendChild(renderer.domElement);

            //controls
            controls = new OrbitControls( camera, renderer.domElement );
            controls.enableDamping = true;
            controls.dampingFactor = 0.25;
            controls.enableZoom = true;
        }
        init();
       </script>
   </body>
</html>

## 3. 加载FB Logo，转化为3D模型
要想将2D的FB Logo加载到3D的场景中，首先需要将其3D化。这里用到了SVGLoader，将SVG格式的logo文件转化为了3D的Mesh，并加入到了场景中。同时我们将logo模型的位置翻转，使其面向摄像机。

详见代码示例2：

var loader = new THREE.SVGLoader();
loader.load( 'facebook.svg', function ( data ) {
    var paths = data.paths;
    var group = new THREE.Group();
    group.scale.multiplyScalar( 0.1 );
    group.position.x = - 70;
    group.position.y = 70;
    group.scale.y *= - 1;
    for ( var i = 0; i < paths.length; i ++ ) {
        var path = paths[ i ];
        var fillColor = path.userData.style.fill;
        if ( fillColor !== undefined && fillColor !== 'none' ) {
            var material = new THREE.MeshBasicMaterial( {
                color: new THREE.Color().setStyle( fillColor ),
                opacity: path.userData.style.fillOpacity,
                transparent: path.userData.style.fillOpacity < 1,
                side: THREE.DoubleSide,
                depthWrite: false,
                wireframe: false
            } );
            var shapes = path.toShapes( true );
            for ( var j = 0; j < shapes.length; j ++ ) {
                var shape = shapes[ j ];
                var geometry = new THREE.ShapeBufferGeometry( shape );
                var mesh = new THREE.Mesh( geometry, material );
                group.add( mesh );
            }
        }
        var strokeColor = path.userData.style.stroke;
        if ( strokeColor !== undefined && strokeColor !== 'none' ) {
            var material = new THREE.MeshBasicMaterial( {
                color: new THREE.Color().setStyle( strokeColor ),
                opacity: path.userData.style.strokeOpacity,
                transparent: path.userData.style.strokeOpacity < 1,
                side: THREE.DoubleSide,
                depthWrite: false,
                wireframe: false
            } );
            for ( var j = 0, jl = path.subPaths.length; j < jl; j ++ ) {
                var subPath = path.subPaths[ j ];
                var geometry = THREE.SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
                if ( geometry ) {
                    var mesh = new THREE.Mesh( geometry, material );
                    group.add( mesh );
                }
            }
        }
    }
    group.scale.z /= 4;
    group.position.x /= 4;
    scene.add( group );
} );

4. 添加光源和材质

要想让3D Logo产生立体感，还需要加入光源和材质的设置。我们这里采用的光源为SpotLight，配合着处理细节的材料MeshBasicMaterial，使Logo呈现出轮廓更加明显的效果。

详见代码示例3：

var light = new THREE.SpotLight(0xffffff, 1.2);
light.position.set(0, 5, 20);
scene.add(light);
var material = new THREE.MeshBasicMaterial({
    color: 0x000,
    wireframe: true,
    side: THREE.DoubleSide
});
var blackMaterial = new THREE.MeshBasicMaterial({
    color: 0x000,
    side: THREE.DoubleSide
});

5. 调用 render 函数，让场景与相机动起来

在画面中加入一些动画效果，让 Logo和相机动起来。

详见代码示例4：

var step = 0;
function render() {
    requestAnimationFrame( render );
    controls.update();
    step += 0.01;
    scene.children[0].rotation.z += 0.01;
    scene.children[0].rotation.x = Math.sin(step) / 10;
    renderer.render( scene, camera );
}
render();