|
|
@@ -13,21 +13,25 @@
|
|
|
<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 }">
|
|
|
+
|
|
|
+ <!-- <orbit-controls ref="cam_controls" :position="init_cam_pos" :rotation="{ x: 0, 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}" /> -->
|
|
|
+ </orbit-controls> -->
|
|
|
+ <camera ref="camera" :position="init_cam_pos" :rotation="{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}" />
|
|
|
+ <light :hex="0xffffff" :intensity="2" :position="{x:100,y:-150,z:-50}" :options="light_opts" />
|
|
|
+
|
|
|
+ <animation :fn="animate" :speed="3" />
|
|
|
+
|
|
|
<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>
|
|
|
+
|
|
|
+ <plan :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0x1a1a1a" :rotation="{x:90,y:0,z:0}" />
|
|
|
+
|
|
|
<template v-if="projects.length">
|
|
|
<project
|
|
|
v-for="(project, index) in projects"
|
|
|
@@ -37,7 +41,7 @@
|
|
|
:index="index"
|
|
|
/>
|
|
|
</template>
|
|
|
- <line />
|
|
|
+
|
|
|
</scene>
|
|
|
</renderer>
|
|
|
</div>
|
|
|
@@ -50,11 +54,15 @@
|
|
|
import { mapState, mapActions } from 'vuex'
|
|
|
import mixins from 'components/mixins'
|
|
|
import * as THREE from 'three'
|
|
|
+import TWEEN from '@tweenjs/tween.js'
|
|
|
|
|
|
import Plan from './components/objects/Plan'
|
|
|
import Cube from './components/objects/Cube'
|
|
|
import Project from './components/objects/Project'
|
|
|
|
|
|
+// const TWEEN = require('@tweenjs/tween.js')
|
|
|
+const _debug = true
|
|
|
+
|
|
|
export default {
|
|
|
metaInfo: {
|
|
|
// if no subcomponents specify a metaInfo.title, this title will be used
|
|
|
@@ -72,20 +80,44 @@ export default {
|
|
|
// const envcolor = 0xffffff
|
|
|
let renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true })
|
|
|
renderer.setClearColor(0x000000, 0)
|
|
|
+ renderer.shadowMap.enabled = true
|
|
|
|
|
|
// 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)
|
|
|
+ // console.log('myScene', scene)
|
|
|
+
|
|
|
+ // let cameraHelper = new THREE.CameraHelper()
|
|
|
+ // scene.add(cameraHelper)
|
|
|
+
|
|
|
return {
|
|
|
- debug: false,
|
|
|
+ debug: _debug,
|
|
|
myRenderer: renderer,
|
|
|
myScene: scene,
|
|
|
- mouse: new THREE.Vector2(),
|
|
|
+ // mouse_start: new THREE.Vector2(),
|
|
|
+ // mouse: new THREE.Vector2(),
|
|
|
camera: null,
|
|
|
+ mouse: new THREE.Vector2(),
|
|
|
+ controls: {
|
|
|
+ user_interact: false,
|
|
|
+ mouse: new THREE.Vector2(),
|
|
|
+ mouse_start: new THREE.Vector2(),
|
|
|
+ lon: 0,
|
|
|
+ lat: 0,
|
|
|
+ lon_start: 0,
|
|
|
+ lat_start: 0,
|
|
|
+ phi: 0,
|
|
|
+ theta: 0,
|
|
|
+ cam_target: new THREE.Vector3(0, 0, 0)
|
|
|
+ },
|
|
|
+ // cam_controls: null,
|
|
|
+ init_cam_pos: { x: 0, y: 10, z: 150 },
|
|
|
raycaster: new THREE.Raycaster(),
|
|
|
- interactive_objects: []
|
|
|
+ interactive_objects: [],
|
|
|
+ light_opts: {
|
|
|
+ castShadow: true
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -106,10 +138,17 @@ export default {
|
|
|
},
|
|
|
mounted () {
|
|
|
console.log('mounted', this)
|
|
|
- this.camera = this.$children[0].global.camera
|
|
|
+ this.camera = this.$refs.camera.curObj
|
|
|
+ // this.cam_controls = this.$refs.cam_controls.controls
|
|
|
+ // console.log('cam_controls', this.cam_controls)
|
|
|
+
|
|
|
+ // this.cam_controls = new THREE.PointerLockControls(this.camera)
|
|
|
+ // console.log('this.cam_controls', this.cam_controls)
|
|
|
+
|
|
|
this.updatedInteractiveObjects()
|
|
|
- document.addEventListener('mousemove', this.onMouseMove, false)
|
|
|
- document.addEventListener('click', this.onDocumentClick, false)
|
|
|
+ document.addEventListener('mousedown', this.onDocMouseDown, false)
|
|
|
+ document.addEventListener('mousemove', this.onDocMouseMove, false)
|
|
|
+ document.addEventListener('mouseup', this.onDocMouseup, false)
|
|
|
},
|
|
|
updated () {
|
|
|
this.updatedInteractiveObjects()
|
|
|
@@ -121,11 +160,6 @@ export default {
|
|
|
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++) {
|
|
|
@@ -133,19 +167,103 @@ export default {
|
|
|
this.interactive_objects.push(this.myScene.children[i])
|
|
|
}
|
|
|
}
|
|
|
- console.log('this.interactive_objects', this.interactive_objects)
|
|
|
+ // console.log('this.interactive_objects', this.interactive_objects)
|
|
|
+ },
|
|
|
+ onDocMouseDown (e) {
|
|
|
+ // controls
|
|
|
+ this.controls.mouse_start.x = e.clientX
|
|
|
+ this.controls.mouse_start.y = e.clientY
|
|
|
+ this.controls.lon_start = this.controls.lon
|
|
|
+ this.controls.lat_start = this.controls.lat
|
|
|
+ this.controls.user_interact = true
|
|
|
},
|
|
|
- onDocumentClick (e) {
|
|
|
- console.log('onDocumentClick', e)
|
|
|
+ onDocMouseMove (e) {
|
|
|
+ // RAY CASTING : update the mouse variable
|
|
|
+ this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1
|
|
|
+ this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
|
|
|
|
|
|
+ // CONTROLS
|
|
|
+ if (this.controls.user_interact) {
|
|
|
+ // lon = ( onMouseDownMouseX - clientX ) * 0.1 + onMouseDownLon;
|
|
|
+ this.controls.lon = (this.controls.mouse_start.x - e.clientX) * 0.1 + this.controls.lon_start
|
|
|
+ // lat = ( clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
|
|
|
+ this.controls.lat = (e.clientY - this.controls.mouse_start.y) * 0.1 + this.controls.lat_start
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onDocMouseup (e) {
|
|
|
+ // console.log('onDocumentMouseup', e)
|
|
|
+ // CONTROLS
|
|
|
+ this.controls.user_interact = false
|
|
|
+
|
|
|
+ // INTERACT
|
|
|
+ // TODO: check if draging
|
|
|
// 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)
|
|
|
+ // console.log('intersects', intersects)
|
|
|
+ // console.log('camera', this.camera)
|
|
|
+ // console.log('TWEEN', TWEEN)
|
|
|
+ let object, vnode, topos
|
|
|
+ let cam = this.camera
|
|
|
+ // let camControls = this.cam_controls
|
|
|
+ let camPos = { ...this.camera.position }
|
|
|
+ // console.log('camPos', camPos)
|
|
|
+ if (intersects.length) {
|
|
|
+ for (var i = 0; i < intersects.length; i++) {
|
|
|
+ // intersects[i].object.material.color.set(0xff0000)
|
|
|
+ object = intersects[i].object
|
|
|
+ vnode = object.userData.vnode
|
|
|
+ vnode.isOpened = true
|
|
|
+ // this.cam_controls.target = object.position
|
|
|
+
|
|
|
+ new TWEEN.Tween(this.controls.cam_target)
|
|
|
+ .to(object.position, 400)
|
|
|
+ .start()
|
|
|
+
|
|
|
+ // cam.position.set({ x: camPos.x, y: camPos.y, z: camPos.z })
|
|
|
+ // camControls.update()
|
|
|
+ topos = { ...object.position }
|
|
|
+ topos.z += 20
|
|
|
+ topos.y = 5
|
|
|
+ new TWEEN.Tween(camPos)
|
|
|
+ .easing(TWEEN.Easing.Quadratic.InOut)
|
|
|
+ .to(topos, 3000)
|
|
|
+ .onUpdate(function () {
|
|
|
+ // console.log('tween update', this._object)
|
|
|
+ cam.position.set(this._object.x, this._object.y, this._object.z)
|
|
|
+ // camControls.update()
|
|
|
+ })
|
|
|
+ .start()
|
|
|
+
|
|
|
+ // console.log('tween', tween)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // new TWEEN.Tween(this.camera.position)
|
|
|
+ // .to(this.init_cam_pos, 1000)
|
|
|
+ // .start()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ animate (tt) {
|
|
|
+ this.controls.lat = Math.max(-85, Math.min(85, this.controls.lat))
|
|
|
+ this.controls.phi = this.deg2rad(90 - this.controls.lat)
|
|
|
+ this.controls.theta = this.deg2rad(this.controls.lon)
|
|
|
+
|
|
|
+ // if (this.controls.user_interact === false) {
|
|
|
+ // this.controls.lon += 0.1
|
|
|
+ // }
|
|
|
+
|
|
|
+ this.controls.cam_target.x = 500 * Math.sin(this.controls.phi) * Math.cos(this.controls.theta)
|
|
|
+ this.controls.cam_target.y = 500 * Math.cos(this.controls.phi)
|
|
|
+ this.controls.cam_target.z = 500 * Math.sin(this.controls.phi) * Math.sin(this.controls.theta)
|
|
|
+
|
|
|
+ if (this.camera && this.controls.user_interact) {
|
|
|
+ this.camera.lookAt(this.controls.cam_target)
|
|
|
}
|
|
|
+
|
|
|
+ TWEEN.update()
|
|
|
}
|
|
|
}
|
|
|
}
|
