tree基于WebGL的库绘制展示3D图形

使用场景包括:

• 网页游：创建交互式的3D游戏，提供沉浸式的游戏体验。
• 数据可视：将复杂的数据以3D形式展示，便于用户理解和分析。
• 产品展：在电商网站上展示产品的3D模型，提供更直观的购物体验。
• 建筑与室内设：展示建筑模型和室内设计方案，便于客户预览和决策。
• 艺术与娱：创作交互式的艺术作品和娱乐内容，提供独特的视觉体验。
• 教育与培：创建虚拟实验室和培训环境，提供安全且高效的学习体

官方中文文档

官方文档

npm install --save three

Vue2

vue2设置在main.js里面挂载tree.js

import Vue from 'vue'
 
import * as Three from "three";
 
Vue.prototype.$three = Three;

Vue3

设置在main.ts里面挂载

import * as THREE from "three";  //导入threeJs
const app = createApp(App);
app.config.globalProperties.$three = THREE;  //挂载到原型
app.mount("#app")

效果图

页面使用

<template>
  <div class="box" ref="box"></div>
</template>
<script>
// 引入three.js
import * as THREE from "three";
// console.log(THREE, "THREE"); // 从控制台查看three.js是否导入成功；
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  name: "ThreeJs",
  methods: {
    getThreeJs() {
      // 创建场景(必须)
      const scene = new THREE.Scene();
 
      // 创建相机(必须)
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        100
      );
      camera.position.set(10, 10, 10); // 设置相机位置
      camera.lookAt(0, 0, 0); // 设置相机看向原点
 
      // 创建渲染器(必须)
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      const box = this.$refs.box; // 获取元素
      box.appendChild(renderer.domElement); // 将渲染结果添加到目标元素
 
      // 添加辅助坐标
      const axesHelper = new THREE.AxesHelper(20);
      scene.add(axesHelper);
 
      // 添加轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement);
      // 设置带阻尼的惯性
      controls.enableDamping = true;
      // 设置阻尼的系数
      controls.dampingFactor = 0.05;
      // 设置自动旋转
      controls.autoRotate = true;
 
      // 创建几何体
      const geometry = new THREE.BoxGeometry(5, 5, 5);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);
 
      // 声明渲染函数(必须)
      function animate() {
        controls.update()       // 更新控制器
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }
      animate();
 
      // 监听窗口变化
      window.addEventListener("resize", () => {
        // 重置渲染器宽高比
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 重置相机宽高比
        camera.aspect = window.innerWidth / window.innerHeight;
        // 更新相机的投影矩阵
        camera.updateProjectionMatrix();
      });
    },
  },
  mounted() {
    this.getThreeJs(); // 执行three的相关代码
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>