什么是 Three.js #

<div ref="threeDom"></div>

<script setup>
    import { defineComponent, onMounted, ref } from "vue";
    import * as THREE from "three";
    import gsap from "gsap";
    import { OrbitControls } from 'three-orbitcontrols-ts';
    //获取canvas
    const threeDom = ref(null);
    //初始化方法
    function init(instance) {
    //获取对象的高度与宽度
    var height = instance.clientHeight + 400;
    var width = instance.clientWidth - 25;
    //创建场景
    const scene = new THREE.Scene();
    //创建一个摄像机
    const camera = new THREE.PerspectiveCamera(
        75,
        width / height,
        0.1,
        1000
    );
    camera.position.set(0, 0, 10);
    scene.add(camera);
    //创建一个物体
    const geometry = new THREE.BoxGeometry(1, 2, 3);
    const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    //渲染器
    const reander = new THREE.WebGLRenderer();
    reander.setSize(width, height);
    //渲染器在canvas里面渲染
    instance.append(reander.domElement);
    //创建一个轨道
    const controls = new OrbitControls(camera, reander.domElement);
    controls.enableDamping = true;
    //创建坐标
    const axesHelper = new THREE.AxesHelper(5);
    scene.add(axesHelper);
    //gsap动画库
    gsap.to(cube.position, {
        x: 5,
        duration: 5,
        ease: "power1.inOut",
        repeat: 2,
        yoyo: true,
    });
    //渲染函数
    function render() {
        controls.update();
        reander.render(scene, camera);
        //js原生方法
        requestAnimationFrame(render);
    }
    render();
    }

    onMounted(() => {
        init(threeDom.value);
    });
</script>
<style scoped>
  #threeDom {
    height: 600px;
  }
</style>