场景（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;

<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>