在vue3中封装一个初始化threejs的场景的方法

在Vue3中封装一个初始化three.js的场景的方法可以按照以下步骤进行：

安装three.js库

在命令行中输入以下命令安装three.js库：

npm install three

在Vue组件中引入three.js库

在Vue组件的script标签中引入three.js库：

import * as THREE from 'three';

创建初始化场景的方法

在Vue组件的methods属性中创建一个初始化场景的方法，如下所示：

methods: {
  initScene() {
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建光源
    const light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(0, 0, 0);
    scene.add(light);

    // 返回场景、相机、渲染器和光源
    return { scene, camera, renderer, light };
  }
}

以上方法创建了一个包括场景、相机、渲染器和光源的对象，并返回该对象。

调用初始化场景的方法

在Vue组件的mounted钩子函数中调用初始化场景的方法，并将返回的对象赋值给组件的data属性：

mounted() {
  const { scene, camera, renderer, light } = this.initScene();
  this.scene = scene;
  this.camera = camera;
  this.renderer = renderer;
  this.light = light;

  // 添加物体到场景中
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 渲染场景
  this.renderer.render(this.scene, this.camera);
}

以上代码在mounted钩子函数中调用了初始化场景的方法，并将返回的对象赋值给组件的data属性。同时，它还添加了一个绿色的立方体到场景中，并渲染了场景。

完整代码

以下是完整的Vue组件代码：

<template>
  <div></div>
</template>

<script>
import * as THREE from 'three';

export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      light: null
    };
  },
  mounted() {
    const { scene, camera, renderer, light } = this.initScene();
    this.scene = scene;
    this.camera = camera;
    this.renderer = renderer;
    this.light = light;

    // 添加物体到场景中
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 渲染场景
    this.renderer.render(this.scene, this.camera);
  },
  methods: {
    initScene() {
      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 创建光源
      const light = new THREE.PointLight(0xffffff, 1, 100);
      light.position.set(0, 0, 0);
      scene.add(light);

      // 返回场景、相机、渲染器和光源
      return { scene, camera, renderer, light };
    }
  }
};
</script>