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;
  

• 在vue3的显示代码