携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

---

昨天分享了用vue写three.js例子-相机-鼠标拾取物品，是一个对新手小白来说可能需要花点时间看的例子，今天分享一个简单的物品拖动的例子，效果如下。

three.js的安装、引用就不说了。

依旧是先写一个容器

<template>
  <div class="item">
    <div id="THREE10"></div>
  </div>
</template>

这次需要引入一个three.js类

import { DragControls } from "three/examples/jsm/controls/DragControls.js";

然后一个mounted方法

objects： 所有物体存放数组

mounted() {
  this.initThreejs();
},
methods: {
  initThreejs() {
    let container;
    let camera, scene, renderer;
    let controls;

    const objects = [];

    init();
  }
}

下面是init()方法的的内容和说明：

透视相机

new THREE.PerspectiveCamera()：透视相机，PerspectiveCamera(摄像机视锥体垂直视野角度，摄像机视锥体长宽比，摄像机视锥体近端面，摄像机视锥体远端面)

• camera.position.z：相机的位置调整

container = document.getElementById("THREE10");

camera = new THREE.PerspectiveCamera(
  70,
  (window.innerWidth - 201) / window.innerHeight,
  1,
  5000
);
camera.position.z = 1000;

场景

new THREE.Scene()：场景

• scene.background：场景的背景

scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);

光源

new THREE.AmbientLight(颜色，光照强度[缺省为1])：环境光

scene.add(new THREE.AmbientLight(0x505050));

贴图模型、渲染器、拖放控制器

1. 贴图模型

TextureLoader()：加载贴图材质

BoxGeometry()：创建立方体

MeshBasicMaterial()：创建材质

Mesh()：创建网格模型

2. 渲染器

把WebGLRenderer()生成的元素添加到容器中

3. 拖放控制器

DragControls()：拖放控制器 DragControls(一组可被拖拽的3D Objects，渲染场景的摄像机，用于事件监听的HTML元素)

const texture = new THREE.TextureLoader().load(
  "textures/crate.gif", // onLoad回调
  function (texture) {
    const geometry = new THREE.BoxGeometry(120, 120, 120);
    const material = new THREE.MeshBasicMaterial({
      map: texture,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    objects.push(mesh);

    /**
     * 渲染器
     */
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth - 201, window.innerHeight);

    container.appendChild(renderer.domElement);

    /**
     * 拖放控制器
     */
    controls = new DragControls(
      [...objects],
      camera,
      renderer.domElement
    );
    controls.addEventListener("drag", render);

    render();
  },
  undefined,
  // onError回调
  function (err) {
    console.error("An error happened.");
  }
);

渲染函数

function render() {
  renderer.render(scene, camera);
}