three.js学习1（vue3）

1.引入threejs

npm install --save three

在组件内

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)

5.结果

代码地址：https://gitee.com/yuexiayunsheng/vue3learn/blob/master/src/views/ThreeCase.vue

 参考：https://zhuanlan.zhihu.com/p/333615381