this.animationMixer = null;
this._progressAnimation = 0;
this.ready = false;
+ this.animationTime = 1.2;
this.jcontainer = $("#flip3dcontainer");
$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);
});
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);
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 () {
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);
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);
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) {
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
projects / fluidbook-html5.git / commitdiff