前端实用工具（一）：使用Parcel搭建three.js案例

原创于 2024-09-03 11:02:59 发布 · 533 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

前端专栏收录该内容

11 篇文章

订阅专栏

前端项目工程中，有许多开构建工具可以选择，比如vite和webpack。尽管他们都有各自的优缺点，但是开发者想要快速构建简单demo时，vite和webpack就过于的繁重。我推荐使用一个极简构建工具Parcel。

Parcel是开箱即用，以html为入口文件的快速、零配置的web打包工具。

初始化和配置

初始化项目生成package.json文件

npm init -y

安装Parcel

npm install --save-dev parcel

新建index.html和index.js

在html中引入js

  <script src="./index.js" type="module"></script>

修改package.json文件

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

搭建three.js案例

安装three.js

npm run three

实现一个three.js的demo

import * as THREE from 'three'

const scene = new THREE.Scene()

// (角度,宽高比，看多近，看多远)
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1100)

// 相机的初始位置
camera.position.set(0,0,20)

const geometry = new THREE.SphereGeometry(5,50,50)

const material = new THREE.MeshBasicMaterial({
    // color:'#ccc',
    wireframe:true
})

const cube = new THREE.Mesh(geometry,material)

scene.add(cube)

const renderer = new THREE.WebGLRenderer()

renderer.setSize(window.innerWidth,window.innerHeight)

document.getElementById('container').replaceChildren(renderer.domElement)

renderer.render(scene,camera)

这时就能使用npm run dev启动项目

参考：Parcel Documentation