diff --git a/src/App.vue b/src/App.vue index 64f03b2..735dc16 100644 --- a/src/App.vue +++ b/src/App.vue @@ -139,22 +139,22 @@ export default { // SEA // lights - var ambient = new THREE.AmbientLight(0xfcfcf9, 0.5) + var ambient = new THREE.AmbientLight(0xfcfcf9, 1) scene.add(ambient) - var sun = new THREE.PointLight(0xfcfcf9, 2) - // var sun = new THREE.DirectionalLight(0xfcfcf9, 2) - sun.position.set(-150, 150, 110) - // sun.castShadow = true - // sun.shadow.bias = -0.0001 - // sun.shadow.mapSize.width = 1024 * 4 - // sun.shadow.mapSize.height = 1024 * 4 - // sun.target.position.set(0, 0, 0) - scene.add(sun) - // scene.add(sun.target) + // var sun = new THREE.PointLight(0xfcfcf9, 1) + // // var sun = new THREE.DirectionalLight(0xfcfcf9, 2) + // sun.position.set(-150, 200, 110) + // // sun.castShadow = true + // // sun.shadow.bias = -0.0001 + // // sun.shadow.mapSize.width = 1024 * 4 + // // sun.shadow.mapSize.height = 1024 * 4 + // // sun.target.position.set(0, 0, 0) + // scene.add(sun) + // // scene.add(sun.target) - // var sun2 = new THREE.PointLight(0xfcfcf9, 0.6) - // sun2.position.set(150, 150, 110) + // var sun2 = new THREE.PointLight(0xfcfcf9, 1) + // sun2.position.set(150, -200, -110) // // sun2.castShadow = true // // sun2.target.position.set(0, 0, 0) // scene.add(sun2) @@ -313,14 +313,14 @@ export default { var intersects = this.raycaster.intersectObjects(this.interactive_objects) // console.log('intersects', intersects) - let object, vnode, toPos - let cam = this.camera - let camPos = { ...this.camera.position } if (intersects.length) { - // console.log('onDocMouseUp intersects', intersects) + let cam = this.camera + let camPos = { ...this.camera.position } + console.log('onDocMouseUp intersects', intersects) // for (var i = 0; i < intersects.length; i++) { - object = intersects[0].object - vnode = object.userData.vnode + let object = intersects[0].object + console.log('object[0].name', object.name) + let vnode = object.userData.vnode if (object.name === 'Content' && vnode.isOpened) { this.content_data = vnode.data } @@ -335,7 +335,7 @@ export default { // recorde vnode as precedent vnode this.opened_vnode = vnode - toPos = { ...object.position } + let toPos = { ...object.position } if (object.name === 'Content') { switch (vnode.face) { case 'left': diff --git a/src/components/mixins.js b/src/components/mixins.js index 746e447..eb9c040 100644 --- a/src/components/mixins.js +++ b/src/components/mixins.js @@ -60,6 +60,53 @@ export default { reject(src) } }) + }, + createGradientCanvas (c1, c2) { + var ctx = document.createElement('canvas').getContext('2d') + ctx.canvas.width = 1024 + ctx.canvas.height = 1024 + var lingrad = ctx.createLinearGradient(0, 0, 0, 1024) + lingrad.addColorStop(0, c1) + lingrad.addColorStop(1, c2) + ctx.fillStyle = lingrad + ctx.fillRect(0, 0, 1024, 1024) + return ctx.canvas } + // , + // /** + // * Converts an HSL color value to RGB. Conversion formula + // * adapted from http://en.wikipedia.org/wiki/HSL_color_space. + // * Assumes h, s, and l are contained in the set [0, 1] and + // * returns r, g, and b in the set [0, 255]. + // * + // * @param {number} h The hue + // * @param {number} s The saturation + // * @param {number} l The lightness + // * @return {Array} The RGB representation + // */ + // hslToRgb (h, s, l) { + // var r, g, b + // + // if (s === 0) { + // r = g = b = l // achromatic + // } else { + // var hue2rgb = function hue2rgb (p, q, t) { + // if (t < 0) t += 1 + // if (t > 1) t -= 1 + // if (t < 1 / 6) return p + (q - p) * 6 * t + // if (t < 1 / 2) return q + // if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6 + // return p + // } + // + // var q = l < 0.5 ? l * (1 + s) : l + s - l * s + // var p = 2 * l - q + // r = hue2rgb(p, q, h + 1 / 3) + // g = hue2rgb(p, q, h) + // b = hue2rgb(p, q, h - 1 / 3) + // } + // + // return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)] + // } } } diff --git a/src/components/objects/ContentBlock.vue b/src/components/objects/ContentBlock.vue index 5e7233f..4dc1576 100644 --- a/src/components/objects/ContentBlock.vue +++ b/src/components/objects/ContentBlock.vue @@ -1,10 +1,11 @@ @@ -48,7 +50,7 @@ export default { props: { prtPosition: Object, prtSize: Object, type: String, data: Object }, data: () => ({ // block3d: null, - size: { x: 2, y: 3, z: 0.1 }, + size: { x: 4, y: 8 }, position: { x: 0, y: 0, z: 0 }, rotation: { x: 0, y: 0, z: 0 }, // opts: { @@ -58,14 +60,14 @@ export default { // // opacity: 0.6 // }, isOpened: false, - label3d: null, - label_opts: { - side: THREE.DoubleSide, - // wireframe: false, - transparent: true - // opacity: 0.6 - // renderOrder: 0 - }, + // label3d: null, + // label_opts: { + // side: THREE.DoubleSide, + // // wireframe: false, + // transparent: true + // // opacity: 0.6 + // // renderOrder: 0 + // }, img_opts: { // side: THREE.DoubleSide, // wireframe: false, @@ -74,10 +76,10 @@ export default { // renderOrder: 0 }, // label_position: { x: 5, y: 5, z: 6 }, - label_canvas: null, - label_size: null, + // label_canvas: null, + // label_size: null, img_canvas: null, - img_size: { x: 2, y: 3, z: 0.1 }, + img_size: { x: 0, y: 0 }, img_position: { x: 0, y: 0, z: 0 }, face: null }), @@ -99,14 +101,14 @@ export default { } return color }, - label_texture_opts () { - return { - canvas: this.label_canvas, - minFilter: THREE.LinearFilter, - wrapS: THREE.ClampToEdgeWrapping, - wrapT: THREE.ClampToEdgeWrapping - } - }, + // label_texture_opts () { + // return { + // canvas: this.label_canvas, + // minFilter: THREE.LinearFilter, + // wrapS: THREE.ClampToEdgeWrapping, + // wrapT: THREE.ClampToEdgeWrapping + // } + // }, img_texture_opts () { return { canvas: this.img_canvas, @@ -118,7 +120,7 @@ export default { }, created () { // console.log('ContentBlock created', this.data) - let txtcolor = '#000000' + // let txtcolor = '#000000' // switch (this.type) { // case 'visible': // txtcolor = '#0000ff' @@ -132,10 +134,10 @@ export default { // default: // } - this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor) - - this.size.x = this.label_size.x + 0.2 - this.size.y = this.label_size.y + 0.2 + // this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor) + // + // this.size.x = this.label_size.x + 0.2 + // this.size.y = this.label_size.y + 0.2 let y = 0 let top = this.prtPosition.y + this.prtSize.y / 2 @@ -200,13 +202,15 @@ export default { // console.log() if (this.data.Media && this.data.Media.length) { - console.log(this.data.Media[0].url) + // console.log(this.data.Media[0].url) + // create image object with a promise (async img loading) this.createImgCanvas(`https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`) .then(({ img, canvas }) => { // console.log('THEN img loaded ok', this, img, canvas) - let f = 3 / canvas.width + let f = this.size.x / canvas.width this.img_size.x = canvas.width * f - this.img_size.y = canvas.height * f + this.img_size.y = this.size.y = canvas.height * f + console.log(`size.x :${this.size.x}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`) this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2 switch (this.face) { case 'left': @@ -227,6 +231,12 @@ export default { break } this.img_canvas = canvas + this.curObj.needsUpdate() + // this.imgObj = this.$refs.img3d.curObj + // // record self references + // this.imgObj.userData = { + // vnode: this + // } }) .catch(function () { console.warn('CATCH img load ERROR') @@ -240,11 +250,14 @@ export default { // this.block3d = this.$refs.block3d.curObj // this.block3d.castShadow = true // this.block3d.receiveShadow = true - - this.label3d = this.$refs.label3d.curObj - // record self references - this.label3d.userData = { - vnode: this + }, + updated () { + if (!this.curObj && this.$refs.img3d) { + this.curObj = this.$refs.img3d.curObj + // record self references + this.curObj.userData = { + vnode: this + } } } } diff --git a/src/components/objects/Ground.vue b/src/components/objects/Ground.vue index c4ebe8d..2f7dde9 100644 --- a/src/components/objects/Ground.vue +++ b/src/components/objects/Ground.vue @@ -37,7 +37,7 @@ export default { side: THREE.DoubleSide, wireframe: false, transparent: true, - opacity: 0.4 + opacity: 0.6 } }) } diff --git a/src/components/objects/Project.vue b/src/components/objects/Project.vue index d810167..94c66f0 100644 --- a/src/components/objects/Project.vue +++ b/src/components/objects/Project.vue @@ -1,6 +1,9 @@