征服three.js本地图片访问受限：开启本地服务器，解锁创作无忧

2023-09-16 11:18:57

three.js本地图片访问受阻：拨开迷雾见晴空

当您在three.js中加载本地图片时，可能会遭遇无法访问的难题。这是因为浏览器出于安全考虑，限制了网页对本地文件的直接访问，这就是臭名昭著的同源策略。同源策略要求网页只能与来自相同来源的资源进行交互，而本地文件显然不在此列。

启动本地服务器：开启创作新篇章

为了突破同源策略的限制，您可以启动一个本地服务器，将three.js项目托管在该服务器上。这样，浏览器便可以将您的项目视为来自网络，从而允许您访问本地图片。

**启动本地服务器的具体步骤：

安装Node.js：
- Node.js是一个JavaScript运行时环境，可让您在本地运行JavaScript代码。
安装Express.js：
- Express.js是一个轻量级的Node.js框架，可帮助您快速搭建本地服务器。
创建项目文件夹：
- 在您要托管three.js项目的目录中，创建一个新的文件夹。
初始化项目：
- 打开终端或命令提示符，导航到刚创建的文件夹，运行以下命令：
  - npm init -y
  - 这将创建一个package.json文件，用于管理项目依赖。
安装Express.js：
- 在终端中，运行以下命令：
  - npm install express
  - 这将安装Express.js及其依赖项。
创建服务器脚本：
- 在项目文件夹中，创建一个名为server.js的文件，并输入以下代码：

     const express = require('express');
     const app = express();
     app.use(express.static('public'));
     const port = 3000;
     app.listen(port, () => {
       console.log(`Server listening on port ${port}`);
     });

 - 这段代码创建了一个Express服务器，并将其配置为将public文件夹作为静态文件目录。

创建public文件夹：
- 在项目文件夹中，创建一个名为public的文件夹。
- 将您的three.js项目文件复制到public文件夹中。
启动服务器：
- 在终端中，导航到项目文件夹，运行以下命令：
  - node server.js
  - 这将启动本地服务器。

访问本地图片的具体步骤：

在浏览器中打开项目：
- 在浏览器的地址栏中，输入http://localhost:3000。
- 这将打开您在本地服务器上托管的three.js项目。
加载本地图片：
- 在three.js代码中，使用以下代码加载本地图片：
  - const texture = new THREE.TextureLoader().load('image.png');
  - 将image.png替换为要加载的本地图片的文件名。
  - 这将加载位于public文件夹中的image.png图片。