推荐开源项目：TresJS - 壮大的Vue + ThreeJS 搭建3D场景库

TresJS 是一个利用 Vue.js 和 Three.js 创建 3D 场景的库。以下是一个简单的例子，展示如何使用 TresJS 创建一个简单的 3D 场景。

首先，确保你已经安装了 Vue CLI，然后创建一个新的 Vue 项目：

vue create my-3d-app
cd my-3d-app

然后，安装 TresJS：

npm install tresjs

接下来，你可以在 Vue 组件中使用 TresJS 创建一个 3D 场景。以下是一个简单的组件示例：

<template>
  <div id="scene-container"></div>
</template>
 
<script>
import { Scene, WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshBasicMaterial, Mesh } from 'three';
import { TweenLite } from 'gsap';
import { TresCAMPRES } from 'tresjs';
 
export default {
  name: 'ThreeJsComponent',
  mounted() {
    const scene = new Scene();
    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('scene-container').appendChild(renderer.domElement);
 
    const geometry = new BoxGeometry();
    const material = new MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new Mesh(geometry, material);
    scene.add(cube);
 
    camera.position.z = 5;
 
    const animate = () => {
      requestAnimationFrame(animate);
 
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
 
      renderer.render(scene, camera);
    };
 
    animate();
  }
};
</script>
 
<style>
#scene-container {
  height: 100vh;
  width: 100vw;
}
</style>

在这个例子中，我们创建了一个包含一个立方体的简单 3D 场景，并通过 TweenLite 实现了简单的动画效果。这个组件可以被嵌入到任何 Vue 应用中，为应用提供 3D 支持。