muntadas-app/src/App.vue

<template>
  <div id="root">
    <!-- <header role="banner">
      <div class="wrapper">
        <h1
          class="site-title"
          tabindex="0"
        >
        </h1>
      </div>
    </header> -->
    <section role="main-content">
      <div class="wrapper">
        <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" /> -->
            <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>
    </section>
    <footer />
  </div>
</template>

<script>
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: {
    // if no subcomponents specify a metaInfo.title, this title will be used
    title: 'Home',
    // all titles will be injected into this template
    titleTemplate: '%s | Muntadas'
  },
  components: {
    Cube,
    Project,
    Plan
  },
  mixins: [mixins],
  data () {
    // const envcolor = 0xffffff
    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, 50, 200)
    console.log('myScene', scene)
    return {
      debug: true,
      myRenderer: renderer,
      myScene: scene,
      mouse: new THREE.Vector2(),
      camera: null,
      raycaster: new THREE.Raycaster(),
      interactive_objects: []
    }
  },
  computed: {
    ...mapState({
      projects: state => state.Projects.projects
    }),
    size () {
      return {
        w: window.innerWidth,
        h: window.innerHeight
      }
    }
  },
  created () {
    if (!this.projects.length) {
      this.getProjects()
    }
  },
  mounted () {
    console.log('mounted', this)
    this.camera = this.$children[0].global.camera
    this.updatedInteractiveObjects()
    document.addEventListener('mousemove', this.onMouseMove, false)
    document.addEventListener('click', this.onDocumentClick, false)
  },
  updated () {
    this.updatedInteractiveObjects()
  },
  methods: {
    ...mapActions({
      getProjects: 'Projects/getProjects'
    }),
    handleScene (scene) {
      console.log('handlescene', scene)
    },
    onMouseMove (e) {
      // update the mouse variable
      this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1
      this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
    },
    updatedInteractiveObjects () {
      this.interactive_objects = []
      for (var i = 0; i < this.myScene.children.length; i++) {
        if (this.myScene.children[i].name === 'Project') {
          this.interactive_objects.push(this.myScene.children[i])
        }
      }
      console.log('this.interactive_objects', this.interactive_objects)
    },
    onDocumentClick (e) {
      console.log('onDocumentClick', e)

      // update the picking ray with the camera and mouse position
      this.raycaster.setFromCamera(this.mouse, this.camera)
      // calculate objects intersecting the picking ray
      var intersects = this.raycaster.intersectObjects(this.interactive_objects)

      for (var i = 0; i < intersects.length; i++) {
        intersects[i].object.material.color.set(0xff0000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.container{
  // font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  max-width: 1200px;

}

</style>