打开预览Three.js案例(跨域问题)

打开预览Three.js案例(跨域问题)

本文是Three.js电子书的学前内容

不需要加载外部贴图和模型文件的three.js案例，可以直接使用浏览器打开.html案例文件，通常一个threejs项目案例往往都会加载一些外部模型，因此打开threejs案例要搭建一个本地的静态服务器，否则的话，threejs案例无法正常打开，浏览器控制台会提示跨域问题。

如果你知道怎么搭建本地静态服务器，自己用任何方式搭建都可以。如果不了解的话，建议使用nodejs去快速搭建一个本地静态服务器，对于一个WebGL工程师或前端工程师来说，肯定是要学习Nodejs的。

Nodejs本地静态服务器

使用Nodejs搭建本地静态服务器很简单，首先是你要先百度Nodejs安装的相关文章，先在你的电脑上安装配置好Nodejs，熟悉下NPM的使用，然后使用npm执行npm install -g live-server安装live-server模块，如果你想通过安装好的live-server模块开启一个静态服务器，打开命令行，进入threejs案例所在的文件目录，然后执行live-server命令就可以。

通过浏览器访问http://localhost:8080或http://127.0.0.1:8080地址，找到threejs案例的.html文件直接打开就可以看到三维场景渲染效果。

开发调试-热更新

在学习threejs的过程中，往往需要频繁的代码测试，查看threejs代码的渲染效果。这时候你肯定希望代码修改之后，threejs渲染效果立即热更新。

如果通过live-server模块搭建的本地静态服务器，你可以实现代码的热加载。也就是说你修改一段代码，然后保存.html代码文件，.html对应的threejs案例就会重新渲染。