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

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。

相关推荐
陈随易8 分钟前
在Finch用了62亿词元,我认为这是新一代Agent工具之神
前端·人工智能·后端
水域安全老周28 分钟前
水趣钓鱼救生衣专利拆解:两级锁紧如何解决落水人衣分离
java·前端·网络
计算机魔术师1 小时前
Anthropic CEO突然喊踩刹车,OpenAI罕见力挺:AI这辆车不能只踩油门了
前端
wing981 小时前
从codex转战workbuddy使用一周的感受
前端·人工智能·后端
EatFan1 小时前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
大江东去浪淘尽千古风流人物2 小时前
【UniSim-SLAM】前馈SLAM的双流架构:Sim(3)统一位姿图、与经典SLAM及DPVO的三范式对比
深度学习·计算机视觉·3d·交互·人体姿态估计·eccv·3d重建
梦想平凡2 小时前
百游棋牌源代码开发搭建教程(五):房间创建、座位分配与请求幂等实现
前端·javascript·数据库·源代码管理
IT_陈寒2 小时前
Redis的Set操作居然能把我的服务整挂了?
前端·人工智能·后端
计算机魔术师3 小时前
Suno 发布 v6 音乐模型,推出 v6、v6-wild、v6-mini 三个版本
前端
whyweplay3 小时前
elpis : DSL动态组件学习
前端