three.js3维坐标系+绘制立方体(带边框)

three.js3维坐标系+绘制立方体(带边框)

vue项目实现3维坐标系中绘制带边框立方体
<1>安装three.js依赖：npm install three
<2>完整项目地址：https://download.csdn.net/download/weixin_43838488/82731574

一、效果

二、初始化

// 初始化
init() {
   
	Promise.all([
		this.createScene(), // 创建场景
		this.createMesh(), // 创建网格模型
		this.createLight(), // 创建光源
		this.createCamera(), // 创建相机
		this.createRender(), // 创建渲染器
		this.createControls(), // 创建控件对象
		this.addFog(), // 添加雾化效果
		this.render() // 渲染
	]).then(() => {
   
		this.boxData = [
			{
   x: 0, y: 0, z: 0, length: 6, width: 6, height: 6, color: '#007B83'},
			{
   x: 0, y: 0, z: 6, length: 4, width: 4, height: 2, color: '#F55500'},
			{
   x: 6, y: 0, z: 0, length: 4, width: 4, height: 3, color: 'orange'},
			{
   x: 0, y: 6, z: 0, length: 4, width: 4, height: 3, color: 'lightgreen'},
			{
   x: 0, y: 6, z: 3, length: 2, width: 2, height: 2, color: '#DC4E41'},
			{
   x: 6, y: 4, z: 0