parcel工具搭建three.js开发环境

最新推荐文章于 2023-06-19 16:15:01 发布

范天缘

最新推荐文章于 2023-06-19 16:15:01 发布

阅读量392

点赞数

分类专栏：前端 three.js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_42821697/article/details/128937695

版权

前端同时被 2 个专栏收录

104 篇文章 5 订阅

订阅专栏

three.js

18 篇文章 0 订阅

订阅专栏

1.初始化项目

(生成package.json文件)

npm init

2.安装parcel打包工具

parcel打包工具网站

npm install -g parcel-bundler

可能会遇到下载失败的问题原来是cmd或者vscode控制台权限不够,以管理员身份运行就好了

3.创建index.html和main.js文件

在根目录创建src/index.html和main.js文件
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./main.js" type="module"></script>
</body>
</html>

main.js

import * as THREE from 'three';
console.log(THREE);

4.修改package.json 添加运行脚本

"scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },