当我还在尝试实现我的 3D 表达梦想（WebGL）时——玩转 Three.js 和 Blender | 主题

当年我尝试实现我的 3D 表达梦想（WebGL）时——一段关于使用 Three.js 和 Blender 的摸索经历

column

2025年11月25日

过去，当我浏览各种网站时，我总是被第一眼看到的动态物体和具有深度感的动画所吸引，不禁发出“哇！”的惊叹。那时我就想，“我也想做出这样的东西！”Three.js或者Blender我曾经尝试过。

我当初怀着无比的敬佩之情加入Liberlogic，但最终……最近我主要从事一些更扎实的实施工作，比如构建业务应用程序和Headless CMS（笑）。我并不是想贬低他们什么的！

现在我们已经进入第四年了，我回想起当时我对“动态网络”的渴望。WebGL我想简要介绍一下周边地区的基本情况。

什么是WebGL？

什么是WebGL？用于在网站上显示 3D 图形的技术它适用于所有主流浏览器，包括 Chrome、Firefox 和 Safari。

很久以前，像 Flash Player 这样的插件很常见，但它们存在难以在智能手机上运行的问题。

在这方面，WebGL 得到了原生支持，所以接下来开创移动时代3D表达技术先河的技术也可以说……

我真的试过了

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

Three.js使用 JavaScript一个无商标限制的库，让您可以轻松创建 3D 内容。

首先，就 WebGL 概念而言，你需要渲染器、场景和摄像机。

Renderer 是 Three.js 中的主要对象。Scene的Camera相机视锥体Renderer3D 内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.add(box);

//光源

const light = new THREE.DirectionalLight(0xffffff, 1);

light.position.set(1, 1, 1);

//添加到场景

scene.add(light);

最后，添加动画效果。

这次我将省略周围粒子的实现！

function animate() {
  requestAnimationFrame(animate);

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

animate()

当您使用设定好的摄像机、几何体、材质和灯光渲染场景时，它将在浏览器中绘制出来。