three.js学习1（vue3）

1.引入threejs

1	`npm install --save three`

在组件内

1	`import` `* as THREE from` `'three'`

2.创建容器

创建canvas标签，为3D渲染建立容器

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

3.创建场景

Three.js依赖一些要素，第一是scene，第二是render，第三是carmea

// 创建场景
const initThree = () => {
    // 场景
    const scene = new THREE.Scene()
    scene.background = new THREE.Color('#eee')
    // 容器
    const canvas = document.querySelector('#three')
    // 渲染
    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
    // 相机
    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.z = 100
    function animate() {
        renderer.render(scene, camera)
        requestAnimationFrame(animate)
    }
    animate()
}
onMounted(() => {
    initThree()
})

场景的准备好了，现在是一片灰色，没有物体

4.加载物体，这里我们画线就好

// 画线
   const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
   const points: any = [];
   points.push(new THREE.Vector3(- 10, 0, 0))
   points.push(new THREE.Vector3(0, 10, 0))
   points.push(new THREE.Vector3(10, 0, 0))
   const geometry = new THREE.BufferGeometry().setFromPoints(points)
   const line = new THREE.Line(geometry, material)
   scene.add(line)