bachir/muntadas-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

looking arround is quite working

Browse Source
This commit is contained in:
bachir
2020-08-27 15:40:17 +02:00
parent 02f379a872
commit e8e679a442
7 changed files with 242 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+144 -26
View File
@@ -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)
},
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()
}
}
}