threejs入门使用

场景（Scene）

import * as THREE from "three";

const scene = new THREE.Scene();

相机（Camera）

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);

// 3、设计相机的位置
camera.position.set(0, 0, 10);

物体（Mesh）

材质

const material = new THREE.MeshBasicMaterial({ color: "#ff0000" });

形状

const geometry = new THREE.BoxGeometry();

加入到物体中

// 5、创建几何体
const cube = new THREE.Mesh(geometry, material);

// 6、将几何体添加到场景中
scene.add(cube);

渲染器（Renderer）

// 7、初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 8、设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);

控制面板（Gui）

// A1、初始化gui
const gui = new dat.GUI();
// A2、设置控制台的是否显示属性
gui.add(cube, "visible").name("是否显示");

轨道控制器（Controls）

// A9、创建轨道控制器，像卫星围绕地球旋转
const controls = new OrbitControls(camera, renderer.domElement);
// A10、设置控制器阻尼，让控制器更具有真实效果，必须在动画循环调用.update()
controls.enableDamping = true;

动画（Mixer）

// 1、在加载3D模型的方法中，使用AnimationMixer存入到变量mixer中
loader.load( 'models/gltf/LittlestTokyo.glb', function ( gltf ) {
    mixer = new THREE.AnimationMixer( gltf.scene );
	mixer.clipAction( gltf.animations[ 0 ] ).play();
});

// 2、在animate中使用update函数
function animate() {
    // 间隔几秒更新
    mixer.update(1);
    requestAnimationFrame(animate);
}

在vue3的显示代码

<template>
  <div ref="boxRef"></div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 目标：应用图形用户界面更改变量
import * as dat from "dat.gui";
// 导入动画库
import gsap from "gsap";

let boxRef = ref(null);

// 1、创建场景
const scene = new THREE.Scene();
// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);

// 3、设计相机的位置
camera.position.set(0, 0, 10);
// 4、设置形状和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: "#ff0000" });
// 5、创建几何体
const cube = new THREE.Mesh(geometry, material);

// 6、将几何体添加到场景中
scene.add(cube);
// 7、初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 8、设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);

// A1、初始化gui
const gui = new dat.GUI();
// A2、设置控制台的是否显示属性
gui.add(cube, "visible").name("是否显示");

// A3、设置参数
const params = {
  //   A4、设置颜色
  color: "#ff0000",
  //   A5、设置立方体的位置移动
  fn: () => {
    gsap.to(cube.position, { x: 5, duration: 2, yoyo: true, repeat: -1 });
  }
}

// A6、增加控制台的目录
const folder = gui.addFolder("设置立方体");
// A7、设置材质为线条
folder.add(cube.material, "wireframe").name("设置外形");
// A8、目录加入立方体运动的一项
folder.add(params, "fn").name("开始运动");

// A9、创建轨道控制器，像卫星围绕地球旋转
const controls = new OrbitControls(camera, renderer.domElement);
// A10、设置控制器阻尼，让控制器更具有真实效果，必须在动画循环调用.update()
controls.enableDamping = true;
// A11、添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
// A12、加入到场景中
scene.add(axesHelper);

// 9、加入渲染函数
function render () {
  //  10、渲染器渲染场景和相机
  renderer.render(scene, camera);
  //  11、渲染下一帧继续使用render函数
  requestAnimationFrame(render);
}

// 12、挂载阶段
onMounted(() => {
  //  13、将目标dom元素加入渲染器
  boxRef.value.appendChild(renderer.domElement);
  //  14、调用渲染函数
  render();
})

</script>

<style scoped></style>