threeJS-Three+Vue

• 项目搭建后，安装three.js
• 将css替换到App.vue中的style中

  *{
    margin: 0;
    padding: 0;
  }
  
  canvas {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
  }
  
  #app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }

• 代码直接写在是<script setup>中即可

  // 引入three.js
  import * as THREE from 'three';
  
  // 创建场景
  const scene = new THREE.Scene(); 
  
  //创建相机 --- 遵循近大远小原则
  const camera = new THREE.PerspectiveCamera(
   75, // 视角 --- 在同距离情况下，视角越大（宽），看到的东西越多
   window.innerWidth / window.innerHeight, // 相机的宽高比
   0.1,  // 近平面 --- 相机最近能看到的
   1000  // 远平面 --- 相机最远能看到的
  ); 
  
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer(); 
  renderer.setSize( window.innerWidth, window.innerHeight ); 
  document.body.appendChild( renderer.domElement );
  
  // 创建几何体
  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); 
  
  // 渲染函数
  const animate = () => {
    requestAnimationFrame(animate)
    // 旋转
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    // 渲染
    renderer.render(scene, camera)
  }
  
  animate()