利用threejs制作表情包（小白可以轻松实现）

1.前言

有些朋友可能喜欢，用技术来给生活增添乐趣，比如c语言printf画爱心啥的（可能是你梦开始的地方）。

这里我们用threejs，本地跑在浏览器，录屏文件转换成gif，来制作一个简单的表情包。

2.开始

新建一个空白的html文件，利用cdn引入threejs。创建一个main.js文件，在html中引入。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs表情包</title>
    <style>
        body { margin: 0; }
    </style>
    <script type="importmap">
        {
          "imports": {
            "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
            "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
          }
        }
    </script>

</head>
<body>
    <script type="module" src="./main.js"></script>
</body>
</html>

接下来，核心的main.js代码，这里我们创建一个绿色的正方体，让它转动起来。

js 复制代码

import * as THREE from 'three';

//场景
const scene = new THREE.Scene();
//相机
//perspective透视的，PerspectiveCamera透视摄像机
//75：场景范围，角度
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

//将renderer渲染器的dom元素（renderer.domElement）HTML中
//这就是渲染器用来显示场景给我们看的<canvas>元素
document.body.appendChild( renderer.domElement );

//立方体对象
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
//材质
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
//放入网格
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

function animate() {
	requestAnimationFrame( animate );
	//运动
	cube.rotation.x += 0.18;
	cube.rotation.y += 0.18;
	renderer.render( scene, camera );
}

animate();

3.制作表情包

接下来，实现了效果，就是把它变成表情包了。

这里我们来录制一下屏幕，怎么录制都可以，只要看一下视频格式就好。

这里用的是mac自带录屏，默认应该是mov格式。

然后就是把格式转为gif，这里用的是 cloudconvert.com/ （选择文件格式即可，比如mov转gif），大家可以用自己喜欢的方法，需要的就是实现把录屏文件转为gif。

转换为gif之后，在微信中发送文件，选择已经转化为gif的文件。

点击发送即可自动变为动态gif表情包。然后右键即可添加为表情。

ok，大家自己可以轻松制作好玩的表情包了:)