基于three.js的组件库 实现了组件化创建三维模型

安装

npm install three.js-3d

main.js 中引入

import Vue from 'vue'
import App from './App.vue'
import Three3d from 'three.js-3d'
import 'three.js-3d/three.js-3d.css'

Vue.use(Three3d)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

初始化实例

<template>
    <th-base></th-base>
</template>

实例参数

<template>
    <th-base ref="base" :config="{
        hasAxesHelper: true, // 是否显示坐标轴辅助器 默认不显示
        axesHelperNum: 5 // 坐标轴辅助器大小 默认5
    }">
    </th-base>
</template>

获取实例

<script>
import * as THREE from 'three'
export default {
    mounted() {
        this.$refs.base.getBase().then(base => {
            // 可通过base实例创建三维模型
            console.log(base)
            // 创建立方体
            // 渲染的模型建议放在comObj对象中 便于对整个模型进行操作 也可以在scene场景中添加模型
            const geometry = new THREE.BoxGeometry(1, 1, 1)
            const material = new THREE.MeshBasicMaterial({color: 0x00ff00})
            const cube = new THREE.Mesh(geometry, material)
            // 可对模型添加点击事件
            cube._cickEvent = (data) => {
                // data为点击的模型对象
                console.log(data, 'click')
            }
            this.base.comObj.add(cube) // 或者 this.base.scene.add(cube)
         })
    }
}
</script>

base中包含的属性

scene 场景
camera 相机
renderer 渲染器
element 渲染模型的dom元素
width 渲染模型的dom元素的宽度
height 渲染模型的dom元素的高度
comObj Object3D对象 渲染的模型都放在其中
projection 坐标转换器 经纬度转换为three.js坐标
controls 轨道控制器

base中包含的方法

getDomSize 渲染模型的dom元素的尺寸
update 更新模型
resize 更新窗口
addAmbientLight 添加光源 this.base.addAmbientLight(0.3, 0xffff00) 第一个参数光源强度默认1 第二个参数光源颜色默认0xffffff

地图模型组件 th-map-base

<template>
    <th-base>
        <th-map-base 
            :config="{
                province: 'china', // 渲染的地图省份
            }"
        />
    </th-base>
</template>

地图省份名称组件 th-map-province

<template>
    <th-base>
        <th-map-province 
            :config="{
                province: 'china', // 省份
            }"
        />
    </th-base>
</template>

BoxGeometry模型组件 th-map-box

<template>
    <th-base>
        <th-box :config="{
            name: 'centerBox', // 模型名称
            popupPosition: {
                x: 0,
                y: 5,
                z: 0
            }, // 若有弹窗 可设置弹窗显示的位置
        }" />
    </th-base>
</template>

弹窗组件 th-map-popup

<template>
    <th-base>
        <th-map-popup 
            :config="{
                name: 'boxPopup', // 模型名称
                eleName: 'centerBox', // 要添加弹窗的模型的名称
                content: 'xxxxxxxxxxx9999999999999' // 弹窗内容
            }"
        />
    </th-base>
</template>