three.js绘制正方形

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

<script setup>
import { ref, onMounted } from "vue"
import * as THREE from "three"

const home = ref(null)

// 1.创建渲染器
const renderer= new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(renderer.domElement)

//2.创建相机
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,500)
camera.position.set(0,0,100)
camera.lookAt(0,0,0)

//3.创建场景
const scene= new THREE.Scene()

//4.创建材质
const meterial=new THREE.LineBasicMaterial({color:0x0000ff})

//5.创建几何体
const  points =[]
points.push(new THREE.Vector3(-10,0,0))
points.push (new THREE.Vector3(0,0,0))
points.push (new THREE.Vector3(0,10,0))
points.push (new THREE.Vector3(-10,10,0)) 
points.push (new THREE.Vector3(-10,0,0)) 
const geometry= new THREE.BufferGeometry().setFromPoints(points)

// 6.把几何体和材质组合在一起
const line = new THREE.Line(geometry,meterial)

//7.把线添加到场景中
scene.add(line)
renderer.render(scene,camera)

</script>

<style >
* {
  padding: 0;
  margin: 0;
}
</style>