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

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 4
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
目录(共14章) 前言 本书内容 阅读之前的准备 读者对象 致谢 第1章 用Three.js创建你的第一个三维场景 1.1 使用Three.js的前提条件 1.2 获取源代码 1.3 创建HTML页面框架 1.4 渲染并展示三维对象 1.5 添加材质、灯光和阴影 1.6 用动画扩展你的首个场景 1.7 使用dat.GUI库简化试验 1.8 使用ASCII效果 1.9 总结 第2章 使用构建Three.js场景的基本组件 2.1 创建场景 2.2 使用几何和网格对象 2.3 选择合适的相机 2.4 总结 第3章 使用Three.js里的各种光源 3.1 探索Three.js库提供的光源 3.2 学习基础光源 3.3 总结 第4章 使用Three.js的材质 4.1 理解共有属性 4.2 从简单的网格材质(基础、深度和面)开始 4.3 学习高级材质 4.4 线段几何体的材质 4.5 总结 第5章 学习使用几何体 5.1 Three.js提供的基础几何体 5.2 总结 第6章 使用高级几何体和二元操作 6.1 ConvexGeometry 6.2 LatheGeometry 6.3 通过拉伸创建几何体 6.4 创建三维文本 6.5 使用二元操作组合网格 6.6 总结 第7章 粒子和粒子系统 7.1 理解粒子 7.2 粒子、粒子系统和BasicParticleMaterial 7.3 使用HTML5画布格式化粒子 7.4 使用纹理格式化粒子 7.5 从高级几何体中创建粒子系统 7.6 总结 第8章 创建、加载高级网格和几何体 8.1 几何体组合和合并 8.2 从外部资源中加载几何体 8.3 以Three.js的JSON格式保存和加载 8.4 使用Blender 8.5 导入三维格式文件 8.6 总结 第9章 创建动画和移动相机 9.1 基础动画 9.2 使用相机 9.3 变形动画和骨骼动画 9.4 使用外部模型创建动画 9.5 总结 第10章 加载和使用纹理 10.1 在材质中使用纹理 10.2 纹理的高级用途 10.3 总结 第11章 定制着色器和渲染后期处理 11.1 设置后期处理 11.2 后期处理通道 11.3 创建自定义的后期处理着色器 11.4 总结 第12章 用Physijs在场景中添加物理效果 12.1 创建可用Physijs的基本Three.js场景 12.2 材质属性 12.3 基础图形 12.4 使用约束限制对象移动 12.5 总结

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值