<!--[if gt IE 9]><!-->
<html prefix="og: http://ogp.me/ns#"><!--<![endif]-->
<head>
- <title><!-- $titre --></title>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <!-- $csp -->
- <!--<meta name="apple-mobile-web-app-capable" content="yes">-->
- <meta name="viewport" content="initial-scale=1,minimum-scale=1,user-scalable=no">
- <meta name="google" content="notranslate">
- <!-- $description -->
- <!-- $opengraph -->
- <!-- $twittercard -->
- <!-- $style -->
- <!-- $script -->
- <!-- $ga -->
- <!-- $favicon -->
+ <title><!-- $titre --></title>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+ <!-- $csp -->
+ <!--<meta name="apple-mobile-web-app-capable" content="yes">-->
+ <meta name="viewport" content="initial-scale=1,minimum-scale=1,user-scalable=no">
+ <meta name="google" content="notranslate">
+ <!-- $description -->
+ <!-- $opengraph -->
+ <!-- $twittercard -->
+ <!-- $style -->
+ <!-- $script -->
+ <!-- $ga -->
+ <!-- $favicon -->
</head>
<body style="background-color:#<!-- $bgcolor -->;" data-branch="menus">
<!--googleoff: all-->
<div id="message"><!-- $message --></div>
<!--googleon: all-->
<div id="main">
-
<div id="center-shadow">
-
<div class="shadow bottom left"></div>
-
<div class="shadow bottom right"></div>
-
<div class="shadow side left"></div>
-
<div class="shadow side right"></div>
- </div>
- </div>
- </div>
- <header>
- <nav id="horizontalNav"></nav>
- <nav id="menu"></nav>
-
<div id="search"></div>
-
<a id="logo" href="#"></a>
- </header>
-
<div id="interface"></div>
-
<div id="helpView"></div>
-
<div id="helpViewOverlay"></div>
+ <div id="background">
+ <div id="center-shadow">
+ <div id="shadow">
+ <div class="shadow bottom left"></div>
+ <div class="shadow bottom right"></div>
+ <div class="shadow side left"></div>
+ <div class="shadow side right"></div>
+ </div>
+ </div>
+ </div>
+ <header>
+ <nav id="horizontalNav"></nav>
+ <nav id="menu"></nav>
+ <div id="search"></div>
+ <a id="logo" href="#"></a>
+ </header>
+ <div id="interface"></div>
+ <div id="helpView"></div>
+ <div id="helpViewOverlay"></div>
- <div id="z" class="nozoom">
- <div id="center-fluidbook">
- <div id="fluidbook">
- <div id="edges">
- <div class="edge left">
- <div class="top"></div>
- <div class="middle"></div>
- <div class="bottom"></div>
- </div>
- <div class="edge right">
- <div class="top"></div>
- <div class="middle"></div>
- <div class="bottom"></div>
- </div>
- </div>
- <div id="pagesnumbers" class="hidden">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- <div id="pages" class="double">
- <div id="flip3dcontainer"></div>
- <div id="currentDoublePage" class="doublePage"></div>
- <div id="searchHighlights"></div>
- <div id="links"></div>
- </div>
- </div>
- </div>
- </div>
- <a id="down" href="#"></a>
- <footer><!-- $credits --></footer>
+ <div id="z" class="nozoom">
+ <div id="center-fluidbook">
+ <div id="fluidbook">
+ <div id="edges">
+ <div class="edge left">
+ <div class="top"></div>
+ <div class="middle"></div>
+ <div class="bottom"></div>
+ </div>
+ <div class="edge right">
+ <div class="top"></div>
+ <div class="middle"></div>
+ <div class="bottom"></div>
+ </div>
+ </div>
+ <div id="pagesnumbers" class="hidden">
+ <div class="left"></div>
+ <div class="right"></div>
+ </div>
+ <div id="pages" class="double">
+ <div id="currentDoublePage" class="doublePage"></div>
+ <div id="searchHighlights"></div>
+ <div id="links"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <a id="down" href="#"></a>
+ <footer><!-- $credits --></footer>
</div>
<div id="searchHints"></div>
<div id="viewOverlay"></div>
<div id="op"></div>
<div id="ol"></div>
+<div id="flip3dcontainer"></div>
+<canvas id="pscanvas" width="4096" height="4096"></canvas>
+
<div id="loader"></div>
<div id="hiddencontents"><!-- $hiddenContents --></div>
<div id="splash" style="background-color:#<!-- $bgcolor -->;"><!-- $splash --></div>
this.loader = null;
this.animation = null;
this.animationMixer = null;
+ this._progressAnimation = 0;
+ this.ready = false;
this.jcontainer = $("#flip3dcontainer");
var $this = this;
this.init();
-
- setTimeout(function () {
- $this.animate();
- }, 5000);
}
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 () {
},
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
projects / fluidbook-html5.git / commitdiff