|
@@ -11,16 +11,32 @@
|
|
|
</header> -->
|
|
|
<section role="main-content">
|
|
|
<div class="wrapper">
|
|
|
- <renderer :size="size">
|
|
|
- <scene>
|
|
|
- <orbit-controls :position="{x:0,y:50,z:0}" :rotation="{ x: 2, y: 0, z: 3 }">
|
|
|
+ <renderer :obj="myRenderer" :size="size">
|
|
|
+ <scene :obj="myScene" @update:obj="handleScene">
|
|
|
+ <orbit-controls :position="{x:0,y:150,z:0}" :rotation="{ x: -90, y: 0, z: 0 }">
|
|
|
<camera />
|
|
|
</orbit-controls>
|
|
|
+ <!-- <camera :position="{x:0, y:300, z:0}" :rotation="{x:deg2rad(-90), y:0, z:0}"/> -->
|
|
|
<!-- <camera :position="{x:0,y:50,z:0}" :lookat="{x:0,y:0,z:0}" /> -->
|
|
|
<!-- <light :hex="0xff0000" :intensity="10" :position="{x:-100}" /> -->
|
|
|
<!-- <mesh :obj="mesh" :position="{ y: -200 }" /> -->
|
|
|
<!-- <animation :fn="animate" :speed="3" /> -->
|
|
|
- <cube :size="10" :position="{x:0,y:0,z:0}" :color="0xFFFF00" />
|
|
|
+ <plan :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0xffffff" :rotation="{x:90,y:0,z:0}" />
|
|
|
+ <template v-if="debug">
|
|
|
+ <cube :size="{x:30,y:1,z:1}" :position="{x:15,y:0,z:0}" :color="0x992222" />
|
|
|
+ <cube :size="{x:1,y:30,z:1}" :position="{x:0,y:15,z:0}" :color="0x00BBFF" />
|
|
|
+ <cube :size="{x:1,y:1,z:30}" :position="{x:0,y:0,z:15}" :color="0x17d100" />
|
|
|
+ </template>
|
|
|
+ <template v-if="projects.length">
|
|
|
+ <project
|
|
|
+ v-for="(project, index) in projects"
|
|
|
+ :key="project.id"
|
|
|
+ :data="project"
|
|
|
+ :len="projects.length"
|
|
|
+ :index="index"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <line />
|
|
|
</scene>
|
|
|
</renderer>
|
|
|
</div>
|
|
@@ -30,8 +46,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// import { mapState } from 'vuex'
|
|
|
+import { mapState, mapActions } from 'vuex'
|
|
|
+import mixins from 'components/mixins'
|
|
|
+import * as THREE from 'three'
|
|
|
+
|
|
|
+import Plan from './components/objects/Plan'
|
|
|
import Cube from './components/objects/Cube'
|
|
|
+import Project from './components/objects/Project'
|
|
|
|
|
|
export default {
|
|
|
metaInfo: {
|
|
@@ -41,22 +62,49 @@ export default {
|
|
|
titleTemplate: '%s | Muntadas'
|
|
|
},
|
|
|
components: {
|
|
|
- Cube
|
|
|
- // History,
|
|
|
- // Results,
|
|
|
- // Search,
|
|
|
- // FooterTabs
|
|
|
+ Cube,
|
|
|
+ Project,
|
|
|
+ Plan
|
|
|
+ },
|
|
|
+ mixins: [mixins],
|
|
|
+ data () {
|
|
|
+ let renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true })
|
|
|
+ renderer.setClearColor(0x000000, 0)
|
|
|
+
|
|
|
+ // scene obj is well overwrited but background color not visible
|
|
|
+ let scene = new THREE.Scene()
|
|
|
+ scene.background = new THREE.Color(0x000000)
|
|
|
+ scene.fog = new THREE.Fog(scene.background, 1, 5000)
|
|
|
+ console.log('myScene', scene)
|
|
|
+ return {
|
|
|
+ debug: true,
|
|
|
+ myRenderer: renderer,
|
|
|
+ myScene: scene
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
+ ...mapState({
|
|
|
+ projects: state => state.Projects.projects
|
|
|
+ }),
|
|
|
size () {
|
|
|
return {
|
|
|
w: window.innerWidth,
|
|
|
h: window.innerHeight
|
|
|
}
|
|
|
}
|
|
|
- // ...mapState({
|
|
|
- // resultsOpened: state => state.Search.opened
|
|
|
- // })
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ if (!this.projects.length) {
|
|
|
+ this.getProjects()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions({
|
|
|
+ getProjects: 'Projects/getProjects'
|
|
|
+ }),
|
|
|
+ handleScene (scene) {
|
|
|
+ console.log('handlescene', scene)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|