03-threejs画线

一、新建项目

1、命令窗口输入以下代码，我的项目名字是drawline,大家可自行填写名称

vue create drawline

2、下载three.js
在项目的命令窗口中输入

npm install three --force

二、项目中使用

1、挂载点

新建Base.js文件，用来编写three.js文件，抛出一个类，这个类是用来挂载dom节点的

export class Line{
  dom = null;
  constructor(dom){
    this.dom = dom
  }
}

2、使用

在组件中引入这个类，并挂载DOM节点

<template>
  <div class="hello">
    <div id="line" ref="line"></div>
  </div>
</template>

<script>
import { Line } from './js/Base';
export default {
  name: 'HelloWorld',
  data() {
    return {
      Line: null,
    };
  },
  mounted() {
    this.Line = new Line(this.$refs.line);
  },
};
</script>

<style scoped>
#line {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid red;
}
</style>

3、构建渲染器，相机和场景

1、引入

在Base.js中引入场景、相机和渲染器，

import { Scene,PerspectiveCamera,WebGL1Renderer} from 'three'

2、实例化

1、渲染器

// 创建渲染器
 let render = new WebGL1Renderer({antialias:true})
 // 设置渲染器大小
 render.setSize(dom.offsetWidth,dom.offsetHeight,true)

2、场景

   let scene = new Scene()
   this.scene = scene

3、相机

 // 实例化相机
    let camera = new PerspectiveCamera(45,dom.offsetWidth/dom.offsetHeight,1,1000)
    // 设置相机位置
    camera.position.set(50,50,50)
    // 设置相机看向位置
    camera.lookAt(new Vector3(0,0,0))
    // 设置相机自身方向
    camera.up = new Vector3(0,1,0)

4、 渲染器渲染相机和场景

 render.render(scene,camera)
 let animate = ()=>{
    render.render(scene,camera)
    requestAnimationFrame(animate)
  }
  animate()

5、在Base.js中写一个方法，用来添加线条

  addModal(...moadl) {
    moadl.forEach(elem => {
      this.scene.add(elem)  // 场景添加模型
    })
  }

4、新建一个modal.js，用来放模型

1、引入三维向量Vector3，材质LineBasicMaterial，BufferGeometry

import { Vector3,LineBasicMaterial,BufferGeometry } from "three";

2、抛出一个线条数组，并将创建一个线条数组

export const lines = []
const poinst = []

3、先添加点到lines数组

poinst.push(new Vector3(-10,0,0));
poinst.push(new Vector3(0,10,0));
poinst.push(new Vector3(10,0,0));

4、创建几何体并设置点

const geometry = new BufferGeometry().setFromPoints(poinst);

5、设置材质-为蓝色的线条

const material = new LineBasicMaterial({color:0x0000ff})

6、创建线条对象，并将几何体和材质传递到构造函数中

export const line = new Line(geometry,material)

7、将线条添加到线条数组中去

lines.push(line)

5、组件中引入和使用

1、引入

import { lines } from './js/modal';

2、传入线条数组

  this.Line.addModal(...lines);

3、这个时候可以看到项目中有条蓝色的线条，但是背景颜色是黑色的，我们可以在Base.js中设置一下颜色

 render.setClearColor('rgb(65, 184, 131)')  // 设置渲染器的颜色

三、效果

四、总体代码

1、组件代码（HelloWorld.vue）

<template>
  <div class="hello">
    <div id="line" ref="line"></div>
  </div>
</template>

<script>
import { Line } from './js/Base';
import { lines } from './js/modal';
export default {
  name: 'HelloWorld',
  data() {
    return {
      Line: null,
    };
  },
  mounted() {
    this.Line = new Line(this.$refs.line);
    this.Line.addModal(...lines);
  },
};
</script>

<style scoped>
#line {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid red;
}
</style>

2、Base.js代码

import { Scene,PerspectiveCamera,WebGL1Renderer,Vector3} from 'three'
export class Line{
  dom = null;
  constructor(dom){

    // 创建渲染器
    let render = new WebGL1Renderer({antialias:true})
    // 设置渲染器大小
    render.setSize(dom.offsetWidth,dom.offsetHeight,true)
    dom.appendChild(render.domElement)  // 将渲染器挂载到dom
    // 实例化场景
    let scene = new Scene()

    // 实例化相机
    let camera = new PerspectiveCamera(45,dom.offsetWidth/dom.offsetHeight,1,1000)
    // 设置相机位置
    camera.position.set(50,50,50)
    // 设置相机看向位置
    camera.lookAt(new Vector3(0,0,0))
    // 设置相机自身方向
    camera.up = new Vector3(0,1,0)

    //   渲染器渲染相机和场景
    render.render(scene,camera)
    render.setClearColor('rgb(65, 184, 131)')  // 设置渲染器的颜色

  //  挂载场景到实例上
  this.scene = scene





    this.dom = dom
    // 渲染器渲染场景和相机
  let animate = ()=>{
    render.render(scene,camera)
    requestAnimationFrame(animate);
  }
  animate()
  }
   /**
   * 向场景中添加模型
   * @param  {...any} moadl 模型列表
   */
  addModal(...moadl) {
    moadl.forEach(elem => {
      this.scene.add(elem)  // 场景添加模型
    })
  }
}

3、modal.js代码

import { Vector3,LineBasicMaterial,BufferGeometry,Line } from "three";
//
export const lines = []
const poinst = []

// 先添加点到poinst数组
poinst.push(new Vector3(-10,0,0));
poinst.push(new Vector3(0,10,0));
poinst.push(new Vector3(10,0,0));
// 创建几何体并设置点
const geometry = new BufferGeometry().setFromPoints(poinst);
// 设置材质
const material = new LineBasicMaterial({color:0x0000ff})
// 创建线条对象，并将几何体和材质传递到构造函数中
export const line = new Line(geometry,material)
// export const Line = new BufferGeometry().setFromPoints(poinst)


lines.push(line)