From: Vincent Vanwaelscappel Date: Thu, 21 Jun 2018 20:56:50 +0000 (+0200) Subject: wip #809 @8 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7dab86b2b4c4d8fac63da07a7d5fa622622d6875;p=fluidbook-html5.git wip #809 @8 --- diff --git a/_index.html b/_index.html index ce20770a..c5531b5f 100644 --- a/_index.html +++ b/_index.html @@ -4,20 +4,20 @@ -  - - - - - - - - - - - - - +  + + + + + + + + + + + + + @@ -26,56 +26,55 @@

- - -

- -

+ + +

+ +

- -

- - +

+ +

@@ -86,6 +85,9 @@

diff --git a/js/libs/fluidbook/fluidbook.3dflip.js b/js/libs/fluidbook/fluidbook.3dflip.js index ca3733a4..dbdac37d 100644 --- a/js/libs/fluidbook/fluidbook.3dflip.js +++ b/js/libs/fluidbook/fluidbook.3dflip.js @@ -15,6 +15,8 @@ function Fluidbook3DFlip(fluidbook) { this.loader = null; this.animation = null; this.animationMixer = null; + this._progressAnimation = 0; + this.ready = false; this.jcontainer = $("#flip3dcontainer"); @@ -24,10 +26,6 @@ function Fluidbook3DFlip(fluidbook) { var $this = this; this.init(); - - setTimeout(function () { - $this.animate(); - }, 5000); } Fluidbook3DFlip.prototype = { @@ -39,56 +37,99 @@ Fluidbook3DFlip.prototype = { }); this.stats = new Stats(); - this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom + this.stats.showPanel(0); document.body.appendChild(this.stats.dom); this.container = $(this.jcontainer).get(0); this.scene = new THREE.Scene(); this.scene.add(new THREE.AmbientLight(0x666666, 1)); - this.camera = new THREE.PerspectiveCamera(45, this.fluidbook.datas.width / this.fluidbook.datas.height, 0.1, 50000); + this.camera = new THREE.PerspectiveCamera(50, 1, 0.1, 50000); this.camera.zoom = 1; this.camera.position.z = 10000; this.camera.updateProjectionMatrix(); var directionalLight = new THREE.DirectionalLight(0xffeedd); - directionalLight.position.set(0, 0, 1).normalize(); + directionalLight.position.set(0, 0, 10000).normalize(); this.scene.add(directionalLight); - var texture1 = new THREE.TextureLoader().load("data/background/150/t1.jpg"); - var texture2 = new THREE.TextureLoader().load("data/background/150/t2.jpg"); - this.plane = new THREE.Mesh( - new THREE.PlaneGeometry(this.fluidbook.datas.width*3, this.fluidbook.datas.height*3, 20, 20, true), - new THREE.MeshBasicMaterial({map: texture1, side: THREE.DoubleSide}) - ); + this.prepareTexture(1, function (t1) { + $this.prepareTexture(2, function (t2) { + $this.texturesLoaded(t1, t2); + }); + }) + }, + + texturesLoaded: function (t1, t2) { + var $this = this; + var geometryScale = 3; + + var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * geometryScale, this.fluidbook.datas.height * geometryScale, 50, 10, true); + var geometry2 = geometry.clone(); + geometry.merge(geometry2, new THREE.Matrix4().makeRotationY(Math.PI), 1); + + var textures = [ + //new THREE.MeshPhongMaterial({color: 0xff00ff, side: THREE.FrontSide, overdraw: 0.5}), + //new THREE.MeshPhongMaterial({color: 0x00ff00, side: THREE.FrontSide, overdraw: 0.5}), + new THREE.MeshBasicMaterial({map: t1, side: THREE.FrontSide, overdraw: 0.5}), + new THREE.MeshBasicMaterial({map: t2, side: THREE.FrontSide, overdraw: 0.5}), + ]; + geometry.translate(this.fluidbook.datas.width * geometryScale * 0.5, 0, 0); + + this.plane = new THREE.Mesh(geometry, textures); + this.scene.add(this.plane); this.modifier = new ModifierStack(this.plane); - this.bend = new Bend(0,0,180); + this.bend = new Bend(0, 0.5, 80); this.bend.constraint = ModConstant.LEFT; this.modifier.reset(); this.modifier.addModifier(this.bend); - TweenMax.fromTo(this.bend, 2, - { - force: -1 - }, { - force: 1, - ease: Cubic.easeInOut, - yoyo: true, - repeat: 999 - } - ); - - this.renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}); this.renderer.setClearColor(0x000000, 0); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(this.pw, this.ph); this.container.appendChild(this.renderer.domElement); + + this.ready = true; + this.resize(); + this.animate(); + $this.play(); + }, + + prepareTexture: function (page, callback) { + var d = 4096; + var c = document.getElementById("pscanvas"); + var ctx = c.getContext("2d"); + ctx.clearRect(0, 0, d, d); + var img = new Image(); + img.src = "data/background/300/t" + page + ".jpg"; + img.onload = function () { + ctx.drawImage(img, 0, 0, d, d); + var i = new Image(); + var texture = new THREE.Texture(i); + i.onload = function () { + texture.needsUpdate = true; + callback(texture); + } + i.src = c.toDataURL("image/png"); + }; }, play: function () { + this.guessCameraZoom(); + TweenMax.fromTo(this, 5, + { + progressAnimation: 0 + }, { + progressAnimation: 1, + ease: Cubic.easeInOut, + yoyo: true, + repeat: 999 + } + ); + }, animate: function () { @@ -114,9 +155,82 @@ Fluidbook3DFlip.prototype = { }, resize: function () { + if (!this.ready) { + return; + } + this.pw = this.fluidbook.resize.ww; this.ph = this.fluidbook.resize.hh; + this.camera.aspect = this.pw / this.ph; + this.camera.updateProjectionMatrix(); + + + $("#flip3dcontainer").css({width: this.pw, height: this.ph}); + this.renderer.setSize(this.pw, this.ph); }, + + guessCameraZoom: function () { + + var bbox = new THREE.Box3().setFromObject(this.plane); + var min = this.to2D(bbox.min); + var max = this.to2D(bbox.max); + + var rect = { + x: Math.min(min.x, max.x), + y: Math.min(min.y, max.y), + width: Math.abs(min.x - max.x), + height: Math.abs(min.y - max.y) + }; + + var bookBox = $("#currentDoublePage").get(0).getBoundingClientRect(); + var s = (bookBox.width / 2) / rect.width; + this.plane.scale.x *= s; + this.plane.scale.y *= s; + this.plane.rotateX(0); + + + for (i = 0; i < 20; i++) { + bbox = new THREE.Box3().setFromObject(this.plane); + min = this.to2D(bbox.min); + max = this.to2D(bbox.max); + rect = { + x: Math.min(min.x, max.x), + y: Math.min(min.y, max.y), + width: Math.abs(min.x - max.x), + height: Math.abs(min.y - max.y) + }; + + this.plane.translateY(rect.y - bookBox.y); + } + }, + + to2D: function (point) { + var widthHalf = 0.5 * this.pw; + var heightHalf = 0.5 * this.ph; + + var vector = new THREE.Vector3(point.x, point.y, point.z); + vector.project(this.camera); + + vector.x = (vector.x * widthHalf) + widthHalf; + vector.y = -(vector.y * heightHalf) + heightHalf; + + return { + x: vector.x, + y: vector.y + }; + }, + + progressAnimation: function (val) { + if (arguments.length === 0) { + return this._progressAnimation; + } + this.bend.force = val * -0.5; + this.plane.rotation.y = Math.PI * val * -1; + // this.plane.rotateX(0); + + this._progressAnimation = val; + + }, }; \ No newline at end of file diff --git a/style/fluidbook.less b/style/fluidbook.less index ca403c15..a4f87547 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -2159,16 +2159,14 @@ ul.chapters { } /* 3D Flip */ -#flip3dcontainer{ +#flip3dcontainer { width: 100%; height: 100%; - position: relative; - z-index: 100; - background-color: rgba(255,0,0,0.5); - canvas{ - width: 100% !important; - height: 100% !important; - } + position: absolute; + top: 0; + left: 0; + z-index: 12; + background-color: rgba(255, 0, 0, 0.5); } /* 3D */ @@ -2683,3 +2681,7 @@ body > input { } @import "additional.less"; + +#pscanvas { + visibility: hidden; +} \ No newline at end of file