画线
一、新建项目
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)