（二）搭建threeJS基础环境-PARCEL打包工具应用

已于 2022-11-16 02:43:13 修改
阅读量782 收藏 2
点赞数 1
分类专栏： webGL 文章标签： webpack 前端 javascript
于 2022-11-16 02:41:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/donglaoxie/article/details/127877036
版权
本文介绍了如何使用Parcel作为零配置的Web打包工具来快速创建和初始化项目。Parcel相比Webpack更加易于上手，通过npm init创建项目后，安装parcel-bundler作为开发依赖。接着在项目中配置 parcel，创建src目录下的index.html、style.css和main.js文件。进一步，引入three库，并启动项目进行打包。这个过程展示了Parcel的便捷性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

1、为什么使用PARCEL

1）：极简零配置WEB打包工具
2）：相比与webpack更易于使用

2、创建并初始化项目

在这里插入图片描述

1）：创建项目并初始化项目：npm init (项目配置全部默认)
2）：项目初始化成功后，生成package.json

3、parcel在项目中的配置

1）：parcel中文网站：https://www.parceljs.cn/getting_started.html

在这里插入图片描述

2）：在项目中配置parcel ：npm install parcel-bundler --save-dev(npm 5.0.0 之前，有 --save 参数才会把模块写入到 packages.json，-dev以开发模式管理依赖)

在这里插入图片描述

3）：创建src/index.html文件（html:5），并修改package.json文件中的任务脚本
在这里插入图片描述

4：创建style.css和入口main.js
在这里插入图片描述

在这里插入图片描述

4）：安装three,并在index.html引入style.css和main.js

在这里插入图片描述

5）：启动项目并打包
在这里插入图片描述
在这里插入图片描述

<Three.js>（第一节）环境搭建
晨曦的博客
07-14 1802
Three.js顾名思义3D的js库。是运行在浏览器的基于webgl的3D引擎。该引擎是github上的一个开源项目，下载地址：https://github.com/mrdoob/three.js/ 1、搭建一个本地服务器。（本人用的是另外一台mac电脑的自带本地服务器） 2、下载three.js库。https://github.com/mrdoob/three.js/ 准备好前面的操作后...
threejs零基础搭建3D可视化汽车展厅
weixin_68658847的博客
07-22 716
threejs零基础搭建3D可视化汽车展厅
React集成Cesium+ThreeJs源码打包
02-09
React集成Cesium+ThreeJs源码打包
web端的项目，three.js项目打包APK，安卓环境安装
weixin_50768411的博客
11-27 2798
这篇博客主要介绍是安卓打包APK的方法，网上有很多这样的文章，但是我装安卓环境就装了好几天，这是我装好的安卓环境方法保证没有问题，放心使用。
从零开始：用 three.js和vue3封装一个高效的点云渲染器
weixin_55341181的博客
02-27 722
封装一个three.js 渲染点云文件组件
2、threejs官网本地化部署启动和Parcel热加载：Web应用打包工具介绍及使用
yaya_jn的博客
01-20 2775
Threejs官网本地化部署及Parcel热加载部署，Threejs框架搭建
JsTree3.3搭建开发环境
viper2046的博客
02-07 966
【JsTree3.3学习笔记01】搭建开发环境，介绍jstree的简单使用
parcel-threejs
05-06
标题 "parcel-threejs" 指的是一个使用Parcel捆绑器构建的THREE.js项目模板。Parcel是一个现代的、零配置的JavaScript打包工具，它能够自动处理各种资源文件，包括JavaScript、CSS、图像等，使开发过程更为便捷。...
Parcel与THREE.js结合：快速搭建3D项目样板
资源摘要信息:"parcel-threejs是一个利用Parcel捆绑器的快速样板项目，适用于基于THREE.js的WebGL项目开发。THREE.js是一个轻量级的3D库，提供了许多在网页上构建和显示3D图形的方法。Parcel是一个零配置的Web应用...
threejs基础-从零创建一个运动的立方体
weixin_64965152的博客
06-29 936
这篇博客介绍了使用Three.js创建一个立方体的过程。通过学习本文，读者可以初步掌握 Three.js 的基础知识，为构建更复杂的3D模型打下基础。
three.js环境搭建
最新发布
03-17
#### 使用 Parcel 搭建 Three.js 开发环境 Parcel 是一种零配置的打包工具，能够快速启动前端项目并支持多种现代 JavaScript 特性。以下是关于如何使用 Parcel 来搭建 Three.js 的开发环境的相关说明。 为了开始...
threejs文件包，uniapp 里使用 echarts、threejs、地图插件等
03-17
threejs文件包，uniapp 里使用 echarts、threejs、地图插件等
threejs-modern-app:全屏Three.js应用程序的样板和工具
05-13
threejs-modern-app 全屏Three.js应用程序的样板和工具 资产归功于和 它的灵感来自于的 ，但是使用ES6语法而不是node进行了重写和简化，使其更易于阅读和注释，因此可以轻松地对其进行自定义以满足您的需求。 特征 所有three.js样板代码都存储在一个文件中，导出的WebGLApp可以从外部轻松配置，例如，您可以启用，轨道控件， ， ， controls-gui并使用保存屏幕截图功能。 它还具有对cannon-es的内置支持。 [阅读更多] 可伸缩的three.js组件结构，其中每个组件都是扩展THREE.Group的类，因此您可以向其添加任何对象。 该类还具有更新，调整大小和指针挂钩。 [阅读更多] 资产管理器可以处理.gltf模型，图像，音频，视频的预加载，并且可以轻松扩展以支持其他文件。 它还会自动将纹理上载到GPU，加载立方体环境贴图或解析等矩
configurable-threejs-app:可通过JavaScript对象配置Three.js应用
05-10
可配置-threejs-app 该项目是使用Three.js构建的可配置的基于3D Web的应用程序。 该网页由内部Node.js服务器提供。 如何开始 安装 要使用此项目，您需要从npm下载所有必需的模块，然后从项目的根文件夹运行此命令 cd server npm install cd WebGLScene npm install 或者，如果您使用的是Windows，则只需双击install.bat文件。 启动服务器 要启动服务器，请从项目的根文件夹运行此命令 cd server cd src node main portNumber 或者，如果您使用的是Windows，只需双击startServer.bat文件，服务器将自动在端口8999上启动。 该网页将在http://localhost:8080/ 现场 如前所述，该场景是使用Three.js（WebGL）构建的，并可以在您的
ThreeJS入门
weixin_42116704的博客
11-17 492
ThreeJS入门
Parcel打包探讨
u012125579的专栏
01-26 2637
Parcel探讨 卖点： 1.极速打包时间 Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。 2.打包所有的资源 Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持，而且不需要插件。 3.自动转换 在需要时，代码使用 Babel，
parcel打包工具threejs相关
小菜鸟的博客
02-26 319
three入门必学
ThreeJs 环境配置及遇到问题的解决方法
繁华落尽的博客
04-28 2006
本文使用的是vscode + ThreeJs + NodeJs + vue
Three.js入门（涉及本地搭建threejs官方网站、使用parcel搭建three.js开发环境等）
m0_46339022的博客
06-27 4269
我跟的课程：https://www.bilibili.com/video/BV1Gg411X7FY?p=3&spm_id_from=pageDriver&vd_source=d45e199a358edbf199494ee895775ab3本文是我自己整理的课程笔记，因为最近的项目要使用three.js，我就开始学习啦，需要的话大家也可以跟着这位老师的课程看我的笔记。在github.com/mrdoob/three.js/中，点击SSH，Download ZIP，得到压缩包后，拖入Vscode，在集中终端中打
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值