diff --git a/index.html b/index.html
index 7aa9c26..8e73eea 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
-
+
Muntadas
diff --git a/package-lock.json b/package-lock.json
index 726b1ba..4b3e251 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2943,6 +2943,11 @@
"@types/yargs": "^13.0.0"
}
},
+ "@tweenjs/tween.js": {
+ "version": "18.6.0",
+ "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.0.tgz",
+ "integrity": "sha512-z45HU0G0e/SenbvGdAlTpUR5Hur5zwZXQcqfI+f7EnVHdeb2oMI2rQghEePu7uXuvBC0nuKWG5YtZ1nWbuvqzQ=="
+ },
"@types/babel__core": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.3.tgz",
diff --git a/package.json b/package.json
index bdb7b35..0d24e1b 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"author": "Daniel Cook",
"license": "MIT",
"dependencies": {
+ "@tweenjs/tween.js": "^18.6.0",
"axios": "^0.18.1",
"dat.gui": "^0.7.7",
"oimo": "^1.0.9",
diff --git a/src/App.vue b/src/App.vue
index d1ac1a8..bebd98d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,21 +13,25 @@
-
+
+
-
+ -->
+
+
-
-
-
-
+
+
+
+
+
+
+
-
+
@@ -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)
},
- onDocumentClick (e) {
- console.log('onDocumentClick', e)
+ 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
+ },
+ 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()
}
}
}
diff --git a/src/components/objects/ContentBlock.vue b/src/components/objects/ContentBlock.vue
new file mode 100644
index 0000000..7c22688
--- /dev/null
+++ b/src/components/objects/ContentBlock.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/objects/Plan.vue b/src/components/objects/Plan.vue
index 163450c..e6356b5 100644
--- a/src/components/objects/Plan.vue
+++ b/src/components/objects/Plan.vue
@@ -7,9 +7,10 @@
y:deg2rad(rotation.y),
z:deg2rad(rotation.z)
}"
+ :options="mesh_opts"
>
-
+
@@ -28,12 +29,15 @@ export default {
rotation: Object
},
data: () => ({
+ mesh_opts: {
+ receiveShadow: true,
+ castShadow: true
+ },
opts: {
side: THREE.DoubleSide,
wireframe: false,
transparent: true,
- opacity: 0.5,
- renderOrder: 0
+ opacity: 0.4
}
})
}
diff --git a/src/components/objects/Project.vue b/src/components/objects/Project.vue
index 45df07d..efb2164 100644
--- a/src/components/objects/Project.vue
+++ b/src/components/objects/Project.vue
@@ -1,40 +1,58 @@
-
+
-
+
+
+
-
+
-
+
+
+
+