123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <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="0xffffff" :intensity="5" :position="{x:-100,y:150,z:50}" />
- <light :hex="0xffffff" :intensity="2" :position="{x:100,y:-150,z:-50}" />
- <!-- <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(0x1a1a1a)
- scene.fog = new THREE.Fog(scene.background, 50, 400)
- console.log('myScene', scene)
- return {
- debug: false,
- 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>
|