vue3.0中使用three.js OrbitControls

环境

"vite": "^2.1.5",
"vue": "^3.0.5",
"three": "^0.128.0",

安装three

npm i three -S

在需要的页面中引入
用的例子是three中文官网的例子，目前我还只看到1.3节

在setup中使用

<template>
  <div>
    <div ref="container2" id="container2"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import * as THREE from "three"; //引入Threejs
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default defineComponent({
  setup() {
    // 场景
    let scene: object = new THREE.Scene();
    // 模型
    let mesh: object = {};
    // 相机
    let camera: object = {};
    // 相机设置
    let renderer: object = {};
    // 初始化
    function init() {
      initMesh();
      initPoint();
      initCamera();
      // 挂载到dom中
      (document as any)
        .getElementById("container2")
        .appendChild(renderer.domElement);
      // 渲染一次
      renderer.render(scene, camera);
      //创建控件对象
      var controls = new OrbitControls(camera, renderer.domElement);
      controls.addEventListener("change", () => {
        renderer.render(scene, camera);
      }); //监听鼠标、键盘事件
    }
    // 初始化模型
    function initMesh() {
      //  (1). 创建一个立方体几何对象Geometry
      var geometry = new THREE.BoxGeometry(100, 100, 100);
      //  (2). 创建材质，就是立方体的表面那一层，这里设置成蓝色
      var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff,
      });
      //  (3). 使用刚刚定义的玩意儿创建网格模型对象（一个有蓝色的立方体）
      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    }
    // 初始化光源
    function initPoint() {
      // 白色的光源
      var point = new THREE.PointLight(0xffffff);
      // 点光源位置
      point.position.set(400, 200, 300);
      // 点光源添加到场景中
      scene.add(point);
      //  环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);
    }
    // 初始化相机
    function initCamera() {
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      //设置相机位置
      camera.position.set(200, 300, 200);
      //设置相机方向(指向的场景对象)
      camera.lookAt(scene.position);
      // 相机设置
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    }
    onMounted(() => {
      init();
    });
  },
});
</script>

我尝试了一下在vue3中用vue2的语法去写，会遇到点问题，因为vue2的响应式是基于响应式的Object.defineProperty，而vue3通过Proxy(代理)实现的，所以想在vue3中用vue2的方式写，就不要再data中声明变量,这意味着放弃了响应式。

<template>
  <div>
    <div ref="container" id="container"></div>
  </div>
</template>
<script>
import * as THREE from "three"; //引入Threejs
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default {
  data() {
    return {
      // 在这里声明变量会报错。。。。。。，不声明就没问题了。。。，就是说，不能是响应式的。。。
      // 原因：https://stackoverflow.com/questions/65693108/threejs-component-working-in-vuejs-2-but-not-3/65732553
    };
  },
  methods: {
    init() {
      /* 一、应用场景*/
      // 1. 创建场景
      this.scene = new THREE.Scene();
      // 创建模型,要显示的东西
      //  (1). 创建一个立方体几何对象Geometry
      var geometry = new THREE.BoxGeometry(100, 100, 100);
      //  (2). 创建材质，就是立方体的表面那一层，这里设置成蓝色
      var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff,
      });
      //  (3). 使用刚刚定义的玩意儿创建网格模型对象（一个有蓝色的立方体）
      var mesh = new THREE.Mesh(geometry, material);
      // 2. 将网格模型（立方体）添加到场景中
      this.scene.add(mesh);

      /* 二、添加光源 */
      // 白色的光源
      var point = new THREE.PointLight(0xffffff);
      // 点光源位置
      point.position.set(400, 200, 300);
      // 点光源添加到场景中
      this.scene.add(point);
      //  环境光
      var ambient = new THREE.AmbientLight(0x444444);
      this.scene.add(ambient);
      /* 三、相机设置 */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

      this.camera.position.set(200, 300, 200); //设置相机位置
      this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
      /* 四、相机设置 */
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(width, height); //设置渲染区域尺寸
      this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document
        .getElementById("container")
        .appendChild(this.renderer.domElement); //body元素中插入canvas对象
      this.renderer.render(this.scene, this.camera); //执行渲染操作

      var controls = new OrbitControls(this.camera, this.renderer.domElement); //创建控件对象
      controls.addEventListener("change", () => {
        this.resetRender();
      }); //监听鼠标、键盘事件
    },
    resetRender() {
      this.renderer.render(this.scene, this.camera);
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style scoped>
#container {
}
</style>

效果
可以任意旋转，滚轮缩放的立方体