Parcel搭建three.js环境

Parcel搭建three.js环境
1.创建一个空项目文件夹
2.在根目录下npm init
3.npm install parcel --save-dev
4.npm install three --save-dev
5.找到package.json,修改代码块地方
package.json:
{
“name”: “01-three_basic”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,

 "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },

“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“parcel”: “^2.4.1”
},
“dependencies”: {
“dat.gui”: “^0.7.9”,
“gsap”: “^3.10.3”,
“three”: “^0.139.2”
}}
在项目下创建src目录和index.html文件,且在src目录下创建main文件夹,在main文件夹下创建main.js
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三维</title>
	</head>
	<body>
		  <link rel="stylesheet" href="css/main.css"/>
		  <script src="main/main.js" type="module"></script>
	</body
</html>

main.js
import * as THREE from “three”;
console.log(THREE.REVISION);

测试环境时是否搭建成功

要在Node.js中安装和配置Three.js环境,您可以按照以下步骤进行操作: 1. 在终端中使用npm命令安装Three.js模块。在您的项目目录下运行以下命令: ``` npm install three --save ``` 这将安装Three.js模块并将其添加到您的项目的依赖中。 2. 确保您已经安装了Node.js和npm,并且已在项目目录中初始化了一个包含package.json文件的npm项目。 3. 在您的JavaScript文件中引入Three.js模块。您可以使用以下代码在您的文件中引入Three.js模块: ```javascript const THREE = require('three'); ``` 现在,您可以在您的项目中使用Three.js库了。 4. 如果您想在浏览器中使用Three.js,您可以将Three.js相关文件直接引入到您的HTML文件中。您可以从官方网站下载Three.js文件,并使用以下代码将其引入到您的HTML文件中: ```html <script src="path/to/three.js"></script> ``` 5. 如果您使用Parcel等构建工具,您可以通过使用npm命令来搭建Three.js开发环境。在您的项目目录下运行以下命令: ``` npm run dev ``` 这将启动开发服务器,并在您的浏览器中开启项目。 综上所述,您可以通过使用npm命令在Node.js中安装Three.js模块,并在您的项目中引入它来配置Three.js环境。如果您希望在浏览器中使用Three.js,您可以直接将相关文件引入到您的HTML文件中,或者使用构建工具如Parcel搭建开发环境。[4<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山毛毛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值