vue结合threejs学习第一篇创建实体

<template>
    <div>
        <canvas id="c"></canvas>
    </div>
</template>

<script setup>
import * as THREE from 'three';
import {onMounted} from "vue";

onMounted(()=>{
    main()
})
const main = () => {
  let canvas = document.querySelector('#c')
    // Three.js需要使用这个canvas标签来绘制，所以我们要先获取它然后传给three.js。
    let renderer = new THREE.WebGLRenderer({antialias:true,canvas})
    let fov = 75
    let aspect = 2
    let near = 0.1
    let far = 5
    // 视锥体得范围为near0.1和far0.5
    let camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
    // z = 2。它朝向Z轴负方向
    camera.position.z = 2;
    // 然后我们创建一个场景(Scene)。场景(Scene)是three.js的基本的组成部分。需要three.js绘制的东西都需要加入到scene中
    let scene = new THREE.Scene()
    // 然后创建一个包含盒子信息的立方几何体(BoxGeometry)。几乎所有希望在three.js中显示的物体都需要一个包含了组成三维物体的顶点信息的几何体。
    let boxWidth = 1
    let boxHeight = 1
    let boxDepth = 1
    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
    // 然后创建一个基本的材质并设置它的颜色. 颜色的值可以用css方式和十六进制来表示。
    let material = new THREE.MeshBasicMaterial({color: 0x44aa88})
    // 再创建一个网格(Mesh)对象，它包含了：

    // 几何体(Geometry)(物体的形状)
    // 材质(Material)(如何绘制物体，光滑还是平整，什么颜色，什么贴图等等)
    // 对象在场景中相对于他父对象的位置、朝向、和缩放。下面的代码中父对象即为场景对象。
    const cube = new THREE.Mesh(geometry, material);
    // 最后我们将网格添加到场景中。
    scene.add(cube)
    // 之后将场景和摄像机传递给渲染器来渲染出整个场景。
    renderer.render(scene, camera);
}


</script>

<style lang="scss" scoped>

</style>