ThreeJS的基本使用（创建一个基本场景）

q 通过 npm  install three 来安装threejs

在vue项目页面中导入threeJs

 import * as THREE from "three";

创建场景>创建相机>设置相机位置>{创建几何体，创建材质，将几何体和材质添加到创建的网格中}>将创建的盒子cube添加到场景(scene)中>创建和初始化渲染器>将相机渲染到场景中。

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,//近平面
  1000//远平面
);

// 设置相机位置
camera.position.set(0, 0, 5);
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体添加到场景中
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);