《Three.js 开发指南》源码示例说明以及在线demo（原书第二版）附第三版的代码下载

最新推荐文章于 2025-06-14 14:31:25 发布

原创

最新推荐文章于 2025-06-14 14:31:25 发布 · 置顶 · 4.4k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#three.js #示例说明

本文档详细介绍了Three.js的源码示例，涵盖从创建首个三维场景到复杂的几何体、材质、光源、纹理、动画和物理效果。包括基本组件的使用、各种光源类型、自定义几何体、纹理应用、后期处理和物理引擎的应用。通过实例演示，读者可以学习如何使用Three.js创建逼真的3D场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《Three.js 开发指南》基于原书第二版
源码来自华章出版社官网随书源码，修改替换了其中不能跑的示例，保证每个demo都可以运行。
源码以及示例说明下载： git下载地址
huazhang目录下是第二版的修改源码。 huazhang3目录下面是第三版的源码。
第二版和第三版大同小异，第二版的three.js版本是69，第三版的版本是95。

Three.js 官网文档

1. 用Three.js创建你的第一个三维场景

1.1 具有所有基本元素的hello world示例

2. 使用构建Three.js场景的基本组件

2.1 添加、删除、枚举、通过名字获取场景中的对象

2.2 雾化效果

2.3 材质效果覆盖

场景对象最重要的函数和属性的总结

在这里插入图片描述


          if (camera instanceof THREE.PerspectiveCamera) {
   
   
              camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;
              camera.lookAt(scene.position);

              trackballControls = initTrackballControls(camera, renderer);
              this.perspective = "Orthographic";
          } else {
   
   
              camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;

              camera.lookAt(scene.position);
              trackballControls = initTrackballControls(camera, renderer);
              this.perspective = "Perspective";
          }