three.js应用基础

原生js

使用vite创建应用npm init vite@latest

目录

基本使用

// 导入threejs
import * as THREE from "three";
// 创建场景
const scene = new THREE.Scene();
// 创建透视相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  1000 // 远平面
);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 渲染的尺寸大小
document.body.appendChild(renderer.domElement); // 把画布添加到body上

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格, 并把几何体和材质放到网格里
const cube = new THREE.Mesh(geometry, material);

// 将网格添加到场景中
scene.add(cube);

// 设置相机位置
camera.position.z = 5;
camera.lookAt(0, 0, 0);

// 添加世界坐标辅助器
// 5 代表线段长度
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper);

// 动画帧
function animate() {
  requestAnimationFrame(animate);
  // 旋转
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  // 渲染
  renderer.render(scene, camera);
  
}
animate();

添加轨道控制器

轨道控制器可以通过鼠标或触摸屏来旋转相机，改变场景的视角，调整场景的大小，移动场景中的物体

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼 
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05
// 动画帧
function animate() {
  // 更新
  controls.update()
  requestAnimationFrame(animate);
  // 旋转
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  // 渲染
  renderer.render(scene, camera);
}

物体位移与父子元素

.position表示对象局部位置。

// 创建网格, 并把几何体和材质放到网格里
const cube = new THREE.Mesh(geometry, material);

cube.position.x = 2

也可以使用.position.set(x,y,z)设置

cube.position.set(2, 0, 0)

父子元素

const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// 创建网格, 并把几何体和材质放到网格里
// 创建一个父元素
const parentCube = new THREE.Mesh(geometry, parentMaterial);
const cube = new THREE.Mesh(geometry, material);

// 把子元素放到父元素里面
parentCube.add(cube)
// cube.position.x = 2
parentCube.position.set(-2, 0, 0)
cube.position.set(2, 0, 0)

// 将网格添加到场景中
scene.add(parentCube);

缩放

.scale(x, y, z) 物体的局部缩放

// 设置立方体的放大
cube.scale.set(2, 2, 2)

旋转

.rotation 物体的局部旋转，以弧度 来表示

画布自适应窗口变化

window.addEventListener("resize", ()=>{
  // 重置渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 重置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新相机投影矩阵
  camera.updateProjectionMatrix()
})

全屏

// 全屏
function fullScreen() {
  renderer.domElement.requestFullscreen();
}

lil-gui

属性参数管理工具，通过一个ui界面，快速调试和开发

let eventObj = {
  Fullscreen: function () {
    document.body.requestFullscreen();
  },
  ExitFullscreen: function () {
    document.exitFullscreen();
  },
};

// 创建GUI
const gui = new GUI();
// 添加按钮
gui.add(eventObj, "Fullscreen").name("全屏");
// 控制立方体的位置
// 创建一个文件夹
let folder = gui.addFolder("立方体的位置");
folder
  .add(cube.position, "x")
  .min(-10)
  .max(10)
  .step(1)
  .name("立方体x轴位置")
  .onChange((v) => {
    console.log(v); 
  });
folder.add(cube.position, "y").min(-10).max(10).step(1).name("立方体y轴位置");
folder.add(cube.position, "y").min(-10).max(10).step(1).name("立方体z轴位置");
// 切换线框模式
gui.add(parentMaterial, "wireframe").name("父元素线框模式")

// 切换立方体颜色
let colorParams = {
  cubeColor: "#00ff00"
}
gui.addColor(colorParams, "cubeColor").name("立方体颜色").onChange((val)=>{
  cube.material.color.set(val)
})