初识 Three.js:开启你的 Web 3D 世界 ✨

3D 技术已经不再是游戏引擎的专属,随着浏览器技术的发展,我们完全可以在网页上实现令人惊艳的 3D 效果。而 Three.js,作为 WebGL 的封装库,让 Web 3D 的大门向更多开发者敞开了。

这是我开启这个 Three.js 专栏的第一篇文章,我们将简单认识一下 Three.js,并为后续的项目开发打下基础。


🔍 什么是 Three.js?

Three.js 是一个 JavaScript 3D 库,它封装了 WebGL,使开发者可以用更简单的方式在浏览器中创建和展示 3D 内容。

通过 Three.js,你可以轻松实现以下效果:

  • 🧱 创建 3D 模型和场景
  • 🖼️ 加载纹理和材质
  • 💡 添加光照、阴影、动画等
  • 🎮 控制摄像机视角、交互行为

适合以下人群:

  • 想让网页更酷的前端开发者
  • 想快速构建可视化场景的可视化工程师
  • 想把 3D 应用到展示中的设计师

✨ 你可以做什么?

以下是 Three.js 常见的使用场景:

  • 🛍️ 产品展示(3D 鞋子、家具、模型旋转等)
  • 📊 数据可视化(地球、地图、图表)
  • 🧑‍💻 个人主页(酷炫背景、交互动画)
  • 🎮 小型 3D 游戏开发

🧰 常用资源推荐

名称 简介 链接
官网 Three.js 官方网站 https://threejs.org
文档 官方 API 文档 https://threejs.org/docs/
示例 各种 Three.js 示例 https://threejs.org/examples/
GitHub 项目源码仓库 https://github.com/mrdoob/three.js
React Three Fiber React 开发者专用封装 https://docs.pmnd.rs/react-three-fiber
模型/纹理下载 免费素材库 https://sketchfab.com, https://poly.pizza, https://readyplayer.me/
Three.js中文网 其他博主网站 http://www.webgl3d.cn/pages/4a14ce/

🚀 Hello Three.js!

先放一个最简单的示例:创建一个旋转的立方体 👇,你可以在菜鸟教程运行下面示例:在线运行html

html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Three.js!</title>
    <style>body { margin: 0; }</style>
  </head>
  <body>
    <script src="https://unpkg.com/three@0.160.1/build/three.min.js"></script>
    <script>
      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 创建几何体和材质
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 动画循环
      function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>

🔮 下一篇预告

接下来我们将手把手写一个更完整的场景,讲解:

  • 如何添加多个物体

  • 如何设置光源与阴影

  • 如何实现用户交互(如鼠标旋转控制)

后续我们还会结合 React 使用 react-three-fiber 构建一个炫酷的个人主页项目 🖥️✨

相关推荐
转转技术团队12 分钟前
从“v我50”到“疯狂星期四”:HTTPS如何用47天寿命的证书挡住中间人
前端
zeqinjie18 分钟前
Flutter 使用 AI Cursor 快速完成一个图表封装【提效】
前端·flutter
真上帝的左手24 分钟前
24. 前端-js框架-Vue
前端·javascript·vue.js
3Katrina34 分钟前
《Stitch的使用指南以及AI新开发模式杂谈》
前端
无羡仙36 分钟前
按下回车后,网页是怎么“跳”出来的?
前端·node.js
喝拿铁写前端37 分钟前
Vue 实战:构建灵活可维护的菜单系统
前端·vue.js·设计模式
ZzMemory39 分钟前
一套通关CSS选择器,玩转元素定位
前端·css·面试
圆心角42 分钟前
小米面挂了
前端·面试
我的小月月44 分钟前
Vue移动端"回到顶部"组件深度解析:拖拽、动画与性能优化实践
前端
拳打南山敬老院44 分钟前
从零构建一个插件系统(六)低代码场景的插件构建思考
javascript·架构