threejs学习之一

• 首先我们可以先打开threejs官网进行下载three，并按照官网的方式去进行练习，这里我使用papceljs的方式跟webpack和vite相似，都是一种打包工具，这个会更简单一点，可参考papceljs官网
• 新建一个项目，在进行初始化

npm init -y

• 全局安装papceljs

npm install  parcel-bundler -D

• 下载thressjs

npm install three -S

• 之后在package.json文件中进行配置

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel index.html",//运行当前的文件
    "build": "parcle build index.html"
  },

*当前我的目录都是同级，你也可以按照vue脚手架中的方式进行创建也可

• 运行npm run dev后会进行打包有个dist文件不用管，直接打开链接就可以进行调试
• 首先在index.html中引入我们的根js文件main.js
• 然后在创建一个test.js在mainjs文件中进行引入
• 接下来我们开始学习了

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// !初始化场景
const scene = new THREE.Scene()

// ! 相机（人的眼睛去发现去看去观察）//透视相机参数(视场角度，canvas宽高比，近裁截面，远裁界面)
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)

// 设置相机位置
camera.position.set(0, 0, 5) //x,y,z坐标

// ! 创建物体
const geometry = new THREE.BoxGeometry(1, 1, 1) //长方体 球体SphereGeometry(50);等

// ! 给长方体或者几何体添加颜色等（添加网络材质）
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000, //0xff0000设置材质颜色为红色
})

// ! 根据创建的物体和材质（颜色等）进行创建物体
const mesh = new THREE.Mesh(geometry, material)
//设置网格模型在三维空间中的位置坐标，默认是坐标原点

//! 将创建的物体添加到场景当中
scene.add(mesh)

// ! 初始化渲染器进行渲染
const renderer = new THREE.WebGLRenderer()

// 渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight)

// ! 将渲染器的数据添加到页面上
document.body.appendChild(renderer.domElement)
//动画的函数
function animate() {
  mesh.rotateY(0.01) //每次绕y轴旋转0.01弧度
  requestAnimationFrame(animate) //请求再次执行渲染函数render，渲染下一帧(用的api是window中的动画方法)

  // ! 使用渲染器通过相机将场景渲染进页面
  renderer.render(scene, camera)
}

animate()

// 控制器可对页面旋转的物体进行操作
const controls = new OrbitControls(camera, renderer.domElement)

• 几何体就是我们需要创建的一些模型（长方体，圆柱体等都是不同的api）
• 材质也分为多种，需要我们下面的学习