Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

    • 1. threejs文件包下载和目录简介
      • 2. 学习环境-编辑器和静态服务器
      • 3. 开发和学习环境,引入threejs
      • 4. 第一个3D案例—创建3D场景
      • 5. 第一个3D案例—透视投影相机
      • 6. 第一个3D案例—渲染器
      • 7. 三维坐标系-加强三维空间认识
      • 8. 光源对物体表面影响
      • 9. 相机控件OrbitControls
      • 10. 平行光与环境光
      • 11. 动画渲染循环
      • 12. Canvas画布布局和全屏
      • 13. stats查看threejs渲染帧率
      • 14. 阵列立方体和相机适配体验
      • 15. Threejs常见几何体简介
      • 16. 高光网格材质Phong
      • 17. WebGL渲染器设置(锯齿模糊)
      • 18. gui.js库(可视化改变三维场景)
      • 19. gui调试界面2-颜色命名等
      • 20. gui调试3-下拉菜单、单选框
      • 21. gui.js库(分组)
      • 22. examples和文档(辅助开发)
      • 23. threejs语法总结
      • 【选修】Vue+Threejs开发环境
      • 【选修】React+Three.js开发环境
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

    • 5.顶点UV坐标、纹理贴图

    • 6.加载外部三维模型(gltf)

    • 7.PBR材质与纹理贴图

    • 8.渲染器和前端UI界面

    • 9.生成曲线、几何体

    • 10.相机基础

    • 11.光源和阴影

    • 12.精灵模型Sprite

    • 13.后处理EffectComposer

    • 14.射线拾取模型

    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

    • Three.js教程
    • 1.Three.js快速入门
    郭隆邦
    2023-01-20
    目录

    1. threejs文件包下载和目录简介

    # Threejs文件包下载和目录简介

    网易云付费系统课程 (opens new window)

    b站免费入门视频 (opens new window)

    在正式学习Three.js之前,先做一些必要的准备工作,具体说就是下载threejs官方文件包,threejs官方文件包提供了很多有用的学习资源。

    # Three.js版本问题

    Three.js处于飞速发展之中,过去几年和现在Three.js基本上每个月都会发布一个新的版本,主要是增加一些新的功能,也可能废弃或更名某些API。

    threejs官方文件包所有版本:https://github.com/mrdoob/three.js/releases

    如果你上面github打开慢,可以百度网盘下载threejs文件包: https://pan.baidu.com/s/1rNdrMnrIPjKLxQ6btp3exw?pwd=qck8 提取码: qck8

    # 版本问题如何对待

    three.js官网 (opens new window)可以下载three.js文件包,不过默认是最新版本的,three.js官网的文档一般也是当前最新版本。

    因为threejs每月更新的时候,API会有变化,我的建议是,实际开发的时候,three.js API的使用规则,一切以你项目threejs版本对应的文档为准,下节课会具体给大家说怎么在本地预览任何你想要的版本文档。

    Threejs官网中文文档链接:https://threejs.org/docs/index.html#manual/zh/

    # 特定版本three.js文件包下载

    github链接查看所有版本threejs:https://github.com/mrdoob/three.js/releases

    选择你需要的版本three.js文件包下载,然后解压,就可以预览里面的很多学习资源。

    如果你那边gihtub打不开或下载很慢,你可以去three.js中文网 (opens new window)提供网盘资源下载。

    网盘链接:https://pan.baidu.com/s/1_Ix8TiOScypNcQe3BIl5vA?pwd=rrks 提取码:rrks

    # threejs文件资源目录介绍

    下载three.js文件包解压后,你可以看到如下目录(不同版本会略有差异)。

    对于开发者而言,大家经常接触的是文档docs和案例examples两个文件夹,平时查看文档,可以打开文档docs里面html文件,案例examples里面提供了海量threejs功能案例。

    three.js-文件包
    └───build——three.js相关库,可以引入你的.html文件中。
        │
    └───docs——Three.js API文档文件
        │───index.html——打开该文件,本地离线方式预览threejs文档
    └───examples——大量的3D案例,是你平时开发参考学习的最佳资源
        │───jsm——threejs各种功能扩展库
    └───src——Three.js引擎的源码,有兴趣可以阅读。
        │
    └───editor——Three.js的可视化编辑器,可以编辑3D场景
        │───index.html——打开应用程序  
    
    学前基础、如何学习3D
    2. 学习环境-编辑器和静态服务器

    ← 学前基础、如何学习3D 2. 学习环境-编辑器和静态服务器→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式