From: Vincent Vanwaelscappel Date: Fri, 22 Jun 2018 18:30:28 +0000 (+0200) Subject: wip #809 @6 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b64db6648bb892c29ea26aaebd4c2ad949f9107f;p=fluidbook-html5.git wip #809 @6 --- diff --git a/js/libs/fluidbook/fluidbook.3dflip.js b/js/libs/fluidbook/fluidbook.3dflip.js index dbdac37d..0d5565e4 100644 --- a/js/libs/fluidbook/fluidbook.3dflip.js +++ b/js/libs/fluidbook/fluidbook.3dflip.js @@ -17,6 +17,7 @@ function Fluidbook3DFlip(fluidbook) { this.animationMixer = null; this._progressAnimation = 0; this.ready = false; + this.animationTime = 1.2; this.jcontainer = $("#flip3dcontainer"); @@ -36,24 +37,69 @@ Fluidbook3DFlip.prototype = { $this.resize(); }); + this.geometryScale = 3; + this.stats = new Stats(); 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.scene.add(new THREE.AmbientLight(0xffffff, 1.5)); + + var far = 24000; + var near = 1000; + this.enableShadow = true; - this.camera = new THREE.PerspectiveCamera(50, 1, 0.1, 50000); + this.camera = new THREE.PerspectiveCamera(20, 1, near, far); this.camera.zoom = 1; - this.camera.position.z = 10000; + this.camera.position.z = 8873 * 2; this.camera.updateProjectionMatrix(); - var directionalLight = new THREE.DirectionalLight(0xffeedd); - directionalLight.position.set(0, 0, 10000).normalize(); - this.scene.add(directionalLight); + var lightIntensity = .30; + // + var light = new THREE.SpotLight(0xffffff, lightIntensity, 0, 1); + light.position.set(2000, 0, 1.72503 * 10000); + if (this.enableShadow) { + light.castShadow = true; + light.shadow.mapSize.width = 2048; // default + light.shadow.mapSize.height = 2048; // default + light.shadow.camera.near = near; + light.shadow.camera.far = far; + light.shadow.bias = -0.0075; + light.shadow.radius = 3; + } + + this.scene.add(light); + + // light = new THREE.SpotLight(0xffffff, lightIntensity, 0, 1); + // light.position.set(-1.7382 * 10000, -0.081 * 10000, 1.725 * 10000); + // if (this.enableShadow) { + // light.castShadow = true; + // light.shadow.mapSize.width = 512; // default + // light.shadow.mapSize.height = 512; // default + // light.shadow.camera.near = near; + // light.shadow.camera.far = far; + // light.shadow.bias = -0.005; + // } + // + // this.scene.add(light); + + if (this.enableShadow) { + var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale * 2, this.fluidbook.datas.height * this.geometryScale, 10, 10, true); + var shadowTexture = new THREE.ShadowMaterial({ + color: 0x000000, + side: THREE.FrontSide, + overdraw: 0.5, + opacity: .1 + }); + this.shadowPlane = new THREE.Mesh(geometry, [shadowTexture]); + this.shadowPlane.receiveShadow = true; + this.shadowPlane.translateZ(-1); + this.scene.add(this.shadowPlane); + } - this.prepareTexture(1, function (t1) { + this.prepareTexture(3, function (t1) { $this.prepareTexture(2, function (t2) { $this.texturesLoaded(t1, t2); }); @@ -62,31 +108,40 @@ Fluidbook3DFlip.prototype = { 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 geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale, this.fluidbook.datas.height * this.geometryScale, 50, 10, true); var geometry2 = geometry.clone(); geometry.merge(geometry2, new THREE.Matrix4().makeRotationY(Math.PI), 1); + var roughness = 0.8; + 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}), + new THREE.MeshStandardMaterial({map: t1, side: THREE.FrontSide, overdraw: 0.5, roughness: roughness}), + new THREE.MeshStandardMaterial({map: t2, side: THREE.FrontSide, overdraw: 0.5, roughness: roughness}), ]; - geometry.translate(this.fluidbook.datas.width * geometryScale * 0.5, 0, 0); + geometry.translate(this.fluidbook.datas.width * this.geometryScale * 0.5, 0, 0); this.plane = new THREE.Mesh(geometry, textures); + this.plane.castShadow = this.enableShadow; + this.plane.receiveShadow = false; + this.scene.add(this.plane); this.modifier = new ModifierStack(this.plane); - this.bend = new Bend(0, 0.5, 80); - this.bend.constraint = ModConstant.LEFT; + this.bend = new Bend(0, 0.65, 250 * 0.0174533); + this.bend.constraint = -1; this.modifier.reset(); this.modifier.addModifier(this.bend); this.renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}); + if (this.enableShadow) { + this.renderer.shadowMap.enabled = true; + this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; + } this.renderer.setClearColor(0x000000, 0); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(this.pw, this.ph); @@ -119,17 +174,34 @@ Fluidbook3DFlip.prototype = { play: function () { this.guessCameraZoom(); - TweenMax.fromTo(this, 5, + + this.playAnimation(); + + }, + + playAnimation: function () { + var $this = this; + this.tl = new TimelineMax(); + this.tl.add(TweenMax.to(this.bend, 5, {force: -0.65, offset: 0.65, ease: Power0.easeIn})); + this.tl.add(TweenMax.to(this.bend, 5, {force: 0, offset: 0.65, ease: Power0.easeOut})); + this.tl.add(TweenMax.to(this.plane.rotation, 10, {y: Math.PI * -1, ease: Power1.easeIn}), 0); + + TweenMax.fromTo(this, this.animationTime, { progressAnimation: 0 }, { progressAnimation: 1, - ease: Cubic.easeInOut, - yoyo: true, - repeat: 999 + ease: Power0.easeIn, + onComplete: function () { + setTimeout(function () { + $this.progressAnimation(0); + setTimeout(function () { + $this.playAnimation(); + }, 1000); + }, 1000); + } } ); - }, animate: function () { @@ -165,7 +237,6 @@ Fluidbook3DFlip.prototype = { 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); @@ -189,9 +260,13 @@ Fluidbook3DFlip.prototype = { this.plane.scale.x *= s; this.plane.scale.y *= s; this.plane.rotateX(0); + if (this.enableShadow) { + this.shadowPlane.scale.x = this.plane.scale.x; + this.shadowPlane.scale.y = this.plane.scale.y; + } - for (i = 0; i < 20; i++) { + for (i = 0; i < 40; i++) { bbox = new THREE.Box3().setFromObject(this.plane); min = this.to2D(bbox.min); max = this.to2D(bbox.max); @@ -204,6 +279,10 @@ Fluidbook3DFlip.prototype = { this.plane.translateY(rect.y - bookBox.y); } + if (this.enableShadow) { + this.shadowPlane.position.y = this.plane.position.y; + this.shadowPlane.rotateX(0); + } }, to2D: function (point) { @@ -226,11 +305,13 @@ Fluidbook3DFlip.prototype = { 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); - + if (val == 0 || val == 1) { + $("#flip3dcontainer").hide(); + } else { + $("#flip3dcontainer").show(); + } + this.tl.pause(); + this.tl.progress(val); this._progressAnimation = val; - }, }; \ No newline at end of file diff --git a/style/fluidbook.less b/style/fluidbook.less index a4f87547..16608076 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -2166,7 +2166,7 @@ ul.chapters { top: 0; left: 0; z-index: 12; - background-color: rgba(255, 0, 0, 0.5); + //background-color: rgba(255, 0, 0, 0.5); } /* 3D */