曾经挑战憧憬的3D表现（WebGL）的那些日子 ― 用Three.js和Blender尝试制作

很久以前，我常常浏览各种网站，被首屏中转动的对象和具有纵深感的动画深深吸引，不禁惊叹“好厉害！”。那时我心想“我也想做出这样的东西！”，于是便开始尝试使用Three.js和Blender。

怀着这样的憧憬进入Liberogic公司，但说实话……最近的工作大多是业务系统应用和无头CMS搭建等更为踏实的开发（笑）。别误会，我可没有贬低的意思哦~！

如今已经步入第4个年头，我想一边回想当年对“会动的Web”的憧憬，一边轻松地回顾一下WebGL的基础知识。

什么是WebGL

WebGL是一种在网站上显示3D图形的技术，Chrome、Firefox、Safari等所有主流浏览器均可运行。

早期主流是Flash Player等插件，但在智能手机上难以运行，这是一个问题。

与此相比，WebGL原生支持，因此可以说它是随后到来的开辟移动时代3D表现的技术。

实际操作一下

用 Three.js 在浏览器中显示 3D 内容

Three.js 是一个可以使用 JavaScript轻松创建 3D 内容的库，并且可以商用。

首先，作为 WebGL 的基本概念，需要 Renderer、Scene 和 Camera。

Renderer 是 Three.js 的主要对象。将 Scene 传入 Camera 后，位于摄像机视锥体内的 3D Scene 部分会以 2D 图像的形式被 Renderer 渲染（绘制）到画布上。

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  1000, // 視野角
  window.innerWidth / window.innerHeight, // 側面
  75, // 近く
  1000 // 遠い
);
camera.position.set(0, 0, 400);

//マウスで制御
const controls = new OrbitControls(camera, document.body);

//html側の<canvas id="myCanvas"></canvas>を取得
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
  antialias: true,
});

//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")

//htmlの<canvas id="myCanvas"></canvas>へ流し込み
document.body.appendChild(renderer.domElement);

另外，3D 立方体部分使用称为网格（Mesh）的显示对象来创建。要创建网格，需要准备几何体（形状）和材质（素材）。

//ジオメトリ（立方体）
const geometry = new THREE.BoxGeometry(100, 100, 100)

//マテリアル（色）
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);
//Sceneに追加
scene.add(box);

//ライト
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Sceneに追加
scene.add(light);

最后添加动画。

本次将省略周围粒子效果的实现！

function animate() {
  requestAnimationFrame(animate);

  box.rotation.x += 0.005;
  box.rotation.y += 0.005;
  renderer.render(scene, camera);
}

animate()

将设置好的 camera，以及包含 geometry、material 和 light 的 scene 进行渲染后，即可在浏览器中显示。