安装three.js

npm install three --save

引入

import * as THREE from 'three';
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { DragControls } from 'three/examples/jsm/controls/DragControls';

创建

// 存储three对象，不能使用ref/reactive,否则在使用时会产生报错
// ‘get‘ on proxy: property ‘modelViewMatrix‘ is a read-only and non-configurable data property
let render = {
  renderer: null,
  group: null,
  scene: null,
  camera: null
}

function createRenderer(meshArr) {
  // 创建3D场景
  const scene = new THREE.Scene();

  // 场景背景色
  scene.background = new THREE.Color('#cccccc')

   // 辅助坐标系
   const axesHelper = new THREE.AxesHelper(100)
   scene.add(axesHelper)

  const group = new THREE.Group()

  const dragObjects = []
  // 循环加载网格模型对象Mesh
  for (let { geometry,  material, position, name } of meshArr) {
    // 两个参数分别为几何体geometry、材质material
    const mesh = new THREE.Mesh(geometry, material)

    //设置网格模型在三维空间中的位置坐标，默认是坐标原点
    mesh.position.set(...position)
    console.log('name', name)
    mesh.name = name

    group.add(mesh)

    dragObjects.push(mesh)
  }

  scene.add(group)

  // 光源
  var light = new THREE.DirectionalLight(0xffffff);
  light.position.set( 50, 50, 50 ).normalize();
  light.decay = 0.5

  scene.add(light)

  // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
  let dom = document.getElementById('webgl')
  const width = window.innerWidth; //宽度
  const height = window.innerHeight - dom.offsetTop; //高度

  // 45:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
  const camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000);
  
  // 正投影
  // const s = 600
  // const k = width / height
  // const camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 2000)

  // 下面两个设置，决定了模型的视角
  //相机在Three.js三维坐标系中的位置
  camera.position.set(-600, 1000, 600); 
  //相机观察目标指向Threejs 3D空间中某个位置
  camera.lookAt(0, 0, 0); //坐标原点

  // 创建渲染器对象
  const renderer = new THREE.WebGLRenderer()

  // 定义threejs输出画布的尺寸(单位:像素px)
  renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

  renderer.render(scene, camera); //执行渲染操作
  
  // 挂载到指定dom
  document.getElementById('webgl').appendChild(renderer.domElement)

  // 设置相机控件轨道控制器OrbitControls
  const controls = new OrbitControls(camera, renderer.domElement);
  // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
  controls.addEventListener('change', function () {
      renderer.render(scene, camera); //执行渲染操作
  });//监听鼠标、键盘事件

  // 创建可拖拽对象
  let dragControls = new DragControls(dragObjects, camera, renderer.domElement)

  dragControls.addEventListener('dragstart', function (event) {
    // 开始移动模型时，设置控制器不可用，此时场景不会被缩放和渲染，保证移动的稳定性
    controls.enabled = false
  })

  dragControls.addEventListener('dragend', function (event) {
    controls.enabled = true
  });

  // 把关键指标存储为全局变量，方便其他方法中调用
  render = {
    renderer,
    group,
    scene,
    camera
  }

  // 动画
  render1()
}

创建多个模型

async function createCanvas() {
  // 6张图片的尺寸需要一致，否则无效
  const textureCube = await new THREE.CubeTextureLoader()
    .setPath('/three/')
    .load(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'])

  textureCube.encoding = THREE.sRGBEncoding; //设置纹理贴图编码方式和WebGL渲染器一致

  // .load()方法加载图像，返回一个纹理对象Texture
  // 本地图片一定要存储到public下
  // texLoader.load 是异步的
  const texture = await new THREE.TextureLoader().load('three/logo.jpeg')

  createRenderer([
    {
      geometry: new THREE.BoxGeometry(100, 100, 100), // 创建一个长方体几何对象Geometry,三个参数分别代表x、y、z的长度
      material: new THREE.MeshStandardMaterial({
        color: 0xff0ff0, //设置材质颜色
        transparent: transparent.value, //开启透明
        opacity: opacity.value, //设置透明度
        side: THREE.DoubleSide, // 双面可见
        map: texture, // 贴图
      }), // 创建一个材质对象Material
      position: [0, 0, 0],
      name: 'mesh1',
    },
    {
      geometry: new THREE.SphereGeometry(50, 50, 50), // 创建一个球形几何对象Geometry
      material: new THREE.MeshBasicMaterial({
        color: 0xffffff,
        map: texture,
      }),
      position: [150, 0, 0],
      name: 'mesh2',
    },
    {
      geometry: new THREE.BoxGeometry(100, 100, 100), // 创建一个长方体几何对象Geometry,三个参数分别代表x、y、z的长度
      material: new THREE.MeshStandardMaterial({
        metalness: 1.0,
        roughness: 0.5,
        envMap: textureCube, //设置pbr材质环境贴图
      }), // 创建一个材质对象Material
      position: [0, 0, 150],
      name: 'mesh3',
    },
  ])
}

动画

// 动画渲染函数
function render1() {
    let { renderer, scene, camera, group } = render
    renderer.render(scene, camera); //执行渲染操作
    group.children[1].rotateY(0.01);//每次绕y轴旋转0.01弧度
    requestAnimationFrame(render1);//请求再次执行渲染函数render，渲染下一帧
}