那些挑战3D表现（WebGL）的日子 ― 用 Three.js 和 Blender 尝试的故事 | 话题

曾经，我浏览过许多网站，被首屏上旋转的对象和具有纵深感的动画所吸引，心想"太棒了！"。那时我萌生了"我也想自己制作这样的效果！"的念头，有段时间尝试过Three.js和Blender。

带着这样的憧憬加入了Liberogic，但从结果来说……最近的日子里，基本上都是在做业务系统应用或headless CMS构建这样相对务实的实现工作呢（笑）不是在吐槽啦～！

如今已经进入第四年，我想在回忆当初对"动态网络"的憧憬之际，轻轻回顾一下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传递给 Renderer 后，摄像机视椎体内Renderer中的 3D Scene部分将被渲染（绘制）成 2D 图像显示在画布上。

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 立方体。创建网格需要准备几何体（形状）和材质（纹理）。

//ジオメトリ（立方体）
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 进行渲染，就会在浏览器中显示图像。