You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
5 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="ThreeJSCity">
|
||
|
|
<!-- <model-obj class="ThreeDShow" src="../../static/5.obj" mtl="../../static/5.mtl" ></model-obj> -->
|
||
|
|
<!-- :background-alpha="alpha" :lights="lights"-->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import { ModelStl,ModelObj } from 'vue-3d-model'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
alpha: 0,
|
||
|
|
lights: [{
|
||
|
|
type: 'HemisphereLight',
|
||
|
|
position: {x: 0, y: 1, z: 0},
|
||
|
|
skyColor: 0xffffff,
|
||
|
|
// groundColor: 0xFF0000, // 此代码为灯光后颜色
|
||
|
|
intensity: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'DirectionalLight',
|
||
|
|
position: {x: 1, y: 1, z: 1},
|
||
|
|
color: 0xffffff,
|
||
|
|
intensity: .7,
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: { ModelStl ,ModelObj},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.ThreeJSCity {
|
||
|
|
width: 750upx;
|
||
|
|
height: 100vh;
|
||
|
|
// border:1px solid red;
|
||
|
|
background: url('../../../../static/bg-3d.png') no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
// z-index:0;
|
||
|
|
// background: #fff;
|
||
|
|
.ThreeDShow {
|
||
|
|
width: 750upx;
|
||
|
|
height: 750upx;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|