前端小白第一次使用Three.js画出”我的名片“

当青训营遇上码上掘金

作为一名计算机小白，在上一年疫情期间我第一次接触到了小程序开发，也通过小程序了解到了前端开发这个方向。在学习了三大件和一些基础框架之后，我了解到字节跳动在每年寒暑假都会举办青训营活动。抱着尝试深入学习的心态，我报名参加了这一次的青训营，选择了前端方向进入学习。在字节的这次青训营中，通过阅读打卡、笔记打卡等方式让我有动力且督促着我广泛而又深入地了解到了很多有关前端的知识，特别是阅读打卡这个活动里面有推荐五十个值得阅读的文章，我也是在这里接触到了WebGL这一图形化API，也因此接触到了Three.js库。所以这一次的活动，我第一次使用了Three.js在码上掘金：code.juejin.cn/ 写了自己的名字，下面我就来介绍是如何进行创作的。

导入Three.js

在最开始，我尝试在码上掘金平台中设置的Script中去添加依赖资源，后来发现只需要在JavaScript中使用ES6的import方法便可以直接导入Three.js这一个库，看样子平台是直接将库集成了在里面，还是很方便的。

import * as THREE from 'three';

设置场景

在这里新建了一个场景，我使用了生活中拼搭积木的想法去写了自己的英文名字。我设置了50x50x50的立方体，并使用了兰伯特光散射的材质，通过对应位置去设置每个方块的位置。

const scene = new THREE.Scene()
const geometry = new THREE.BoxGeometry(50, 50, 50)
const material = new THREE.MeshLambertMaterial({
  color:0x0000ff,
})

设置相机

在这里我使用了透视投影相机。

设置渲染器

最后就是设置渲染器。我还通过渲染器将场景的背景色设置成了粉色，毕竟哪个猛男不喜欢粉色呢？

renderer.setClearColor("hotpink")

加入轨道控制器

通过引入轨道控制器，在页面上就可以通过鼠标去缩放转动模型啦！

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
});