1. 创建场景

      import * as THREE from 'three';
      //  场景
      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.BoxGe
      ometry();
      const subeMaterial = new THREE.MeshBasicMaterial({color:0xff0000})
      // 根据几何体和材质创建物体
      const code = new THREE.Mesh(cubeGeometry,subeMaterial)
      // 几何体几何体和材质放在场景中
      scene.add(code)
    
      // 初始化渲染器
      const renderer = new THREE.WebGLRenderer();
      // 渲染的尺寸大小
      renderer.setSize(window.innerWidth,window.innerHeight);
      // 将webGl渲染的canvas内容渲染到body
      document.body.appendChild(renderer.domElement)
​
      // 使用渲染器将场景渲染
      renderer.render(scene,camera)

2. 创建轨道器

import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"
/*
* 第一个参数 为相机的实例
* 第二个参数 渲染器元素
*/
const controls = new OrbitControls(camera,renderer.domElement)
renderer.render(scene,camera)
// 下一帧的时候调用render函数
requestAnimationFrame(this.render) // 优化的API,用户跳出该页面时不进行渲染
// 控制视角范围
controls.maxPolarAngle = Math.PI / 2;
controls.minPolarAngle = 0;

3. 添加坐标辅助器

const axesHelper = new THREE.AxesHelper(5);
scene.add( axesHelper );

4.物体的移动&旋转&缩放

// 物体移动
code.rotation.set(Math.PI/4,0,0)
code.position.x += 0.01;
// 物体缩放
scale
// 旋转
rotation

5. 渲染器优化

enderer = new THREE.WebGLRenderer({ antialias: true });
renderer.logarithmicDepthBuffer = true; // 开启深度优化
renderer.physicallyCorrectLights = true; // 开启物理光照(性能优化)