vue引入three.js

在Vue中引入Three.js，你可以按照以下步骤进行操作：

1. 首先，你需要在Vue项目中安装Three.js。你可以使用npm或yarn来安装它。打开终端并执行以下命令：

   npm install three

或

   yarn add three

2. 接下来，在Vue组件中引入Three.js库。你可以使用import语句将它导入到你的组件中。根据你提供的引用内容，你可以这样导入Three.js：

   import * as THREE from 'three'

3. 现在，你可以在Vue组件中使用Three.js库了。你可以创建场景、渲染器、相机以及其他Three.js对象，添加它们到Vue组件中，并在渲染循环中更新它们。

4. 最后，你需要在Vue组件的模板中添加一个容器来显示Three.js场景。你可以使用Vue的生命周期钩子函数（如mounted）来初始化Three.js，并在Vue组件销毁时清理Three.js对象。

这是一个简单的例子，展示了如何在Vue中使用Three.js：

<template>
  <div ref="container"></div>
</template>

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

export default {
  mounted() {
    // 创建场景
    const scene = new THREE.Scene();

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.container.appendChild(renderer.domElement);

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

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

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  },
};
</script>