Three.js第1篇，Three.js新手教学，如何在项目中使用Three.js（three.js使用流程详细，three.js的使用方式，three.js创建3d物体）

方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
使用
const scene = new THREE.Scene();
方式 2: 仅导入你所需要的部分
import { Scene } from 'three';
使用
const scene = new Scene();

引入threejs
import * as three from "three";
引入控制器 控制元素
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
创建场景
const scene = new three.Scene();
创建相机
const camera = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
设置相机位置
camera.position.set(0, 0, 10);
场景绑定相机
scene.add(camera);
创建几何体和材质
const cubeGeometry = new three.BoxGeometry(1, 1, 1);
const subeMaterial = new three.MeshBasicMaterial({ color: 0xffff00 });
根据几何体和材质创建物体
const cube = new three.Mesh(cubeGeometry, subeMaterial);
把物体添加到场景中
scene.add(cube);
初始化渲染器
const renderer = new three.WebGLRenderer();
设置渲染器尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
将渲染内容添加到body
document.body.appendChild(renderer.domElement);
//使用渲染器将相机里的场景渲染出来
//renderer.render(scene,camera);
创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
创建添加坐标轴线体
const axesHelper = new three.AxesHelper(5);
scene.add(axesHelper);
定义函数，实时渲染
function render() {
  物体添加动画
  cube.position.x += 0.05;
  if (cube.position.x > 5) {
    cube.position.x = 0
  }
  在函数中调用渲染器
  renderer.render(scene, camera);
  实时渲染函数
  requestAnimationFrame(render);
}
render();