- 首先我们可以先打开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）
- 材质也分为多种，需要我们下面的学习
网友评论