Three.js中文网 Three.js中文网
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (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语法总结
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

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

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

    • 7.PBR材质与纹理贴图

    • 8.持续更新中

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

    2. 学习环境-编辑器和静态服务器

    # 学习环境—代码编辑器和本地静态服务器

    工欲善其事,必先利其器,写threejs代码之前,需要先准备一个用于threejs学习的开发环境。

    1. vscode代码编辑器
    2. 本地静态服务器——预览文档、课程案例源码

    # 工欲善其事,必先利其器

    学习Web3D可视化,就像你想耕地,拖拉机就是比二哈更专业的开发学习工具。

    二哈耕地 拖拉机耕地

    # vscode代码编辑器

    Web3D开发的代码编辑器和平时web前端开发一样,你可以根据自己的喜好选择,本课程选择的代码编辑器是vscode (opens new window)。

    如果不了解vscode,想安装和使用vscode,可以参考我以前发布的前端公开课HTML入门教程 (opens new window),具体你可以参考视频 (opens new window)。

    如果你用的是其他代码编辑器,建议转到vscode,当然不想转也行,毕竟都差不多。

    # 本地静态服务器

    平时学习Three.js,如果你想预览代码3D效果,咱们需要提供一个本地静态服务器的开发环境,如果你有一定的web前端基础,提到本地静态服务器肯定不陌生。

    作为前端工程师,大家都知道,正式的web项目开发,往往会用webpack或vite或其它方式配置一个开发环境。

    如果只是学习threejs的话,没必要这么麻烦,我最建议的方式就是,通过代码编辑器快速创建本地静态服务器,比如vsocde,安装live-server插件即可。

    # vscode配置live-server插件

    不同代码编辑器创建本地静态服务器方式不同,课程就以vscocde为了大家演示。

    • 安装

    vscode软件界面左侧,点击扩展,输入live-server关键词查询安装。

    • 使用

    如果你想预览代码3D效果,打开对应.html文件,右键点击Open with Live Server即可。

    # 预览3D案例和文档

    • 预览课程案例源码

    打开课件案例,注意把Three.js视频教程源码文件作为根目录,使用vscode创建本地静态服务就可以预览。

    • 预览官方examples中案例
    • 本地预览文档

    把threejs整个官方文件包作为根目录,用本地静服务打开任何一个.html文件即可预览

    three.js-文件包
    ...
    └───docs——Three.js API文档文件
        │───index.html——打开该文件,本地离线方式预览threejs文档
    └───examples——大量的3D案例,是你平时开发参考学习的最佳资源
        │───.html——各种3D案例
    ...    
    

    # 扩展:nodejs配置本地静态服务器

    如果不用代码编辑器创建本地静服务器,也可以用nodejs配置。

    首先确保你电脑已经安装nodejs,然后npm安装live-server插件,安装后,进入课件或threejs官方文件根目录,输入live-server命令即可预览3D案例。

    // 安装live-server
    npm install live-server -g
    

    不过平时为了开发方便,可以不用nodejs创建一个本地静态服务器,可以借助你的代码编辑器更方便,比如下面要说到的vscode。

    1. threejs文件包下载和目录简介
    3. 开发和学习环境,引入threejs

    ← 1. threejs文件包下载和目录简介 3. 开发和学习环境,引入threejs→

    Theme by Vdoing | Copyright © 2016-2023 郭隆邦 | 引用请注明网站链接
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式