3D创建一个3d项目首先你要有这些依赖配置文件首先介绍下 Parcel Parcel：是一个功能强大且易于使用的

创建一个3d项目

首先你要有这些依赖配置文件

{
  "name": "three",
  "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-bundler": "^1.12.5"
  },
  "dependencies": {
    "dat.gui": "^0.7.9",
    "gsap": "^3.9.1",
    "three": "^0.137.5"
  }
}

首先介绍下 Parcel Parcel：是一个功能强大且易于使用的 Web 打包工具，特别适合希望快速开始开发且不需要复杂配置的开发者

特点：

1. 模块打包

功能：Parcel 可以将项目中的各种模块（如 JavaScript 模块、CSS 文件、图片等）打包成一个或多个最终的输出文件。它支持 ES6 模块语法（import 和 export），能够自动解析依赖关系，将所有依赖的模块打包到一起。
用途：通过模块打包，可以将项目中的代码组织得更加清晰，同时避免浏览器多次加载多个小文件，从而提高页面加载速度。

2. 代码转换

功能：Parcel 内置了对多种文件类型的处理能力。例如，它可以使用 Babel 将 ES6+ 代码转换为兼容浏览器的 ES5 代码；使用 PostCSS 对 CSS 进行预处理，支持 CSS 预处理器（如 Sass、Less）；还可以处理图片、字体等静态资源。
用途：开发者可以使用最新的 JavaScript 和 CSS 特性，而不用担心浏览器兼容性问题。同时，它简化了开发流程，无需手动配置复杂的构建工具（如 Webpack）。

3. 热模块替换（HMR）

功能：在开发过程中，Parcel 支持热模块替换（Hot Module Replacement）。当代码发生变化时，它会自动更新浏览器中的代码，而无需重新加载整个页面。
用途：这大大提高了开发效率，尤其是在开发大型项目时，可以快速看到代码修改的效果，减少等待时间。

4. 代码压缩和优化

功能：在生产模式下，Parcel 会对代码进行压缩和优化。例如，它会压缩 JavaScript 和 CSS 文件，移除未使用的代码，优化图片文件等。
用途：通过这些优化，可以减小最终打包文件的体积，从而加快页面加载速度，提升用户体验。

5. 零配置

功能：Parcel 的核心优势之一是“零配置”。它能够自动识别项目中使用的文件类型和工具，并自动配置相应的加载器和插件。
用途：对于小型项目或快速开发场景，开发者无需花费大量时间配置构建工具，可以快速开始开发工作。

6. 多线程和缓存

功能：Parcel 使用多线程进行构建，并且会缓存中间结果。这意味着在多次构建时，它只需要处理发生变化的部分，大大提高了构建速度。
用途：在开发过程中，快速的构建速度可以显著提升开发效率，尤其是在频繁修改代码的情况下。

7. 支持多种文件类型

功能：Parcel 支持多种文件类型，包括但不限于 HTML、CSS、JavaScript、图片、字体等。它还支持一些高级功能，如代码分割、懒加载等。
用途：开发者可以使用多种资源类型，而无需担心构建工具是否支持，这使得开发更加灵活。

8. 插件生态系统

功能：虽然 Parcel 是零配置的，但它也支持插件扩展。开发者可以根据项目需求安装插件，以实现更多功能。
用途：这使得 Parcel 在保持简洁的同时，也具备了强大的可扩展性。

基于上述能力我们采用Parcel来构建今天的应用

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>
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <script src="./main/main.js" type="module"></script>
  </body>
</html>

然后我们需要引入script中的main.js文件

main.js

 import * as THREE from "three";//引入该3d库
// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  30
);

// 设置相机位置
camera.position.set(0, 0, 10);//设置相机的位置 
scene.add(camera); //将相机添加到创建的场景中
// 创建球几何体
const sphereGeometry = new THREE.SphereBufferGeometry(3, 30, 30);
// 设置点材质
const pointsMaterial = new THREE.PointsMaterial();
pointsMaterial.size = 0.1;
pointsMaterial.color.set(0xfff000);
// 相机深度而衰减
pointsMaterial.sizeAttenuation = true;

// 载入纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./textures/particles/2.png");
// 设置点材质纹理
pointsMaterial.map = texture;
pointsMaterial.alphaMap = texture;
pointsMaterial.transparent = true;
pointsMaterial.depthWrite = false;
pointsMaterial.blending = THREE.AdditiveBlending;

const points = new THREE.Points(sphereGeometry, pointsMaterial);

scene.add(points);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启场景中的阴影贴图
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;

// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);



// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  let time = clock.getElapsedTime();
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
 
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

`THREE.Points` 的作用

THREE.Points 是 Three.js 中的一个类，用于将几何体（Geometry）中的每个顶点渲染为一个单独的点（或粒子）。它通常用于以下场景：

点云可视化：将大量顶点以点的形式渲染出来，用于展示复杂的数据分布、点云模型等。
粒子系统：通过设置每个点的颜色、大小等属性，实现动态的粒子效果，如雨滴、烟花、烟雾等。

2. 参数解释

THREE.Points 的构造函数接受两个参数：

geometry：几何体对象，定义了点的位置。在这个例子中，sphereGeometry 是一个球体几何体（THREE.SphereGeometry）。球体几何体的每个顶点都会被 THREE.Points 渲染为一个点。
material：材质对象，定义了点的外观。在这个例子中，pointsMaterial 是一个点材质（THREE.PointsMaterial），它决定了每个点的颜色、大小、透明度等属性。

应用场景

点云可视化：将复杂的点云数据（如扫描的三维模型）以点的形式渲染出来，便于观察和分析。
粒子效果：通过动态调整点的位置、颜色和大小，实现各种粒子效果，如烟花、雨滴、烟雾等。
特殊视觉效果：例如，将一个球体的表面用点渲染出来，可以创建一种“点阵化”的视觉效果。

通过 THREE.Points，你可以轻松地将几何体的顶点以点的形式渲染出来，并通过材质控制点的外观，从而实现丰富的视觉效果。

3D