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

本文档详细介绍了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 材质效果覆盖
场景对象最重要的函数和属性的总结

在这里插入图片描述
在这里插入图片描述

2.4 three.js内建的几何体
2.5 自定义几何体,复制几何体
2.6 网格对象的函数和属性 position, rotation, scale, translate, visible

在这里插入图片描述

2.7 正投影相机和透视相机

          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";
          }

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.8 让相机在指定点上聚焦
camera
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值