I am trying to create a circle, for example, appear using something like FadeIn but in TweenJS library.
This is the code I have written so far:
var stage = new createjs.Stage("demoCanvas");
var circle1 = new createjs.Shape();
var x =circle1.graphics;
x.setStrokeStyle(0.14, 'round', 'round');
x.beginStroke(('#000000'));
circle1.graphics.drawCircle(0, 0,10);
x.endStroke();
x.endFill();
circle1.x = 250;
circle1.y = 250;
stage.addChild(circle1);
circle1.addEventListener("tick", function(){
createjs.Tween.get(circle1).to({alpha: 1,visible:true},1000);
});
You can not put the tweenJs inside de event Tick, because they will fire every tick.
I made an example: https://jsfiddle.net/nywsy1pp/
var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);
var circle = new createjs.Shape(
new createjs.Graphics().f("#f00").dc(0,0,100)
).set({x:100,y:100});
circle.alpha = 0;
stage.addChild(circle);
createjs.Tween.get(circle).to({alpha: 1},5000);
function tick() {
stage.update();
}
Related
Probably threejs's rotation question no 9000 , i simply want to have 3 UI buttons to incrementally rotate an object 90 degrees in either x,y & z direction with every click on each, how hard could it be ?
Using regular rotation methods which uses euler will cause gimbal lock, and using quanternions the axes will flip randomly in which z-axis will be y-axis at one point or another.
please have a look at my working demo : http://grutex.com/webgl/demos/help/
Edit: here is the rotation functions part :
function z_rotate(){
var startAngle = 0;
var start = {angle: startAngle};
var end = {angle: startAngle + 90};
var lastAngle=0;
var tween = new TWEEN.Tween(start)
.to(end, 400)
.easing( TWEEN.Easing.Quadratic.Out )
.onUpdate(function(){
startAngle=this.angle;
my_object.rotateOnAxis(new THREE.Vector3(0,0,1),degreeToRadians(startAngle-lastAngle));
lastAngle=startAngle;
})
.start();
}
function x_rotate(){
var startAngle = 0;
var start = {angle: startAngle};
var end = {angle: startAngle + 90};
var lastAngle=0;
var tween = new TWEEN.Tween(start)
.to(end, 400)
.easing( TWEEN.Easing.Quadratic.Out )
.onUpdate(function(){
startAngle=this.angle;
my_object.rotateOnAxis(new THREE.Vector3(1,0,0),degreeToRadians(startAngle-lastAngle));
lastAngle=startAngle;
})
.start();
}
function y_rotate(){
var startAngle = 0;
var start = {angle: startAngle};
var end = {angle: startAngle + 90};
var lastAngle=0;
var tween = new TWEEN.Tween(start)
.to(end, 400)
.easing( TWEEN.Easing.Quadratic.Out )
.onUpdate(function(){
startAngle=this.angle;
my_object.rotateOnAxis(new THREE.Vector3(0,1,0),degreeToRadians(startAngle-lastAngle));
lastAngle=startAngle;
})
.start();
}
As #WestLangley pointed out, i should attach and detach the 3d object to a parent pivot point (THREE.Object3D), attaching the 3d object to the pivot point before the tween start and detaching the pivot point after tween completion and resetting its rotation to (0,0,0)
#WestLangley answer : Three.js: Adding and Removing Children of Rotated Objects
New modified rotation function :
var axis_x = new THREE.Vector3( 1, 0, 0 ).normalize();
function x_rotate(){
pivot_attach();
var startAngle = 0;
var start = {angle: degreeToRadians(startAngle)};
var end = {angle: degreeToRadians(startAngle + 90)};
var lastAngle=0;
var tween = new TWEEN.Tween(start)
.to(end, 400)
.easing( TWEEN.Easing.Quadratic.Out )
.onUpdate(function(){
startAngle=this.angle;
pivot.rotateOnAxis(axis_x,startAngle-lastAngle);
lastAngle=startAngle;
})
.start().onComplete(pivot_detach);
}
function pivot_attach() {
pivot.updateMatrixWorld();
THREE.SceneUtils.attach( my_object, scene, pivot );
}
function pivot_detach() {
pivot.updateMatrixWorld();
my_object.updateMatrixWorld(); // if not done by the renderer
THREE.SceneUtils.detach( my_object, pivot, scene );
pivot.rotation.set( 0, 0, 0 );
}
and don't forget to add the pivot to the scene "scene.add(pivot);"
I'm trying to add a background to a webgl scene(Three.js). The scene contains two animated spritesheets that I created using DAZ3D and Photoshop. I've tried just about everything but to no avail, the background is either white or black. I've tried many examples on the web then either my spritesheet animator won't work or the background won't appear. I read that I need to make two scenes with two camera's, but that doesn't seem to work as well.
I really don't understand why I would need to have two scenes anyway.
<script>
// standard global variables
var container,scene,camera,renderer,controls,stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var attack,defense;
init();
animate();
// FUNCTIONS
function init(){
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth,SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45,ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,NEAR = 0.1,FAR = 1000;
var light = new THREE.PointLight(0xEEEEEE);
var lightAmb = new THREE.AmbientLight(0x777777);
camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
scene.add(camera);
camera.position.set(-10,30,400);
camera.lookAt(scene.position);
// RENDERER
if (Detector.webgl)
renderer = new THREE.WebGLRenderer({antialias:true});
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT);
container = document.getElementById('ThreeJS');
container.appendChild(renderer.domElement);
// EVENTS
THREEx.WindowResize(renderer,camera);
THREEx.FullScreen.bindKey({charCode :'m'.charCodeAt(0)});
// LIGHTS
light.position.set(20,0,20);
scene.add(light);
scene.add(lightAmb);
// BACKGROUND
var texture = THREE.ImageUtils.loadTexture('images/sky.jpg');
var backgroundMesh = new THREE.Mesh(new THREE.PlaneGeometry(2,2,0),new THREE.MeshBasicMaterial({map:texture}));
backgroundMesh.material.depthTest = false;
backgroundMesh.material.depthWrite = false;
var backgroundScene = new THREE.Scene();
var backgroundCamera = new THREE.Camera();
backgroundScene.add(backgroundCamera);
backgroundScene.add(backgroundMesh);
// FLOOR
var floorTexture = new THREE.ImageUtils.loadTexture('images/checkerboard.jpg');
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(10,10);
var floorMaterial = new THREE.MeshBasicMaterial({map:floorTexture,side:THREE.DoubleSide,shininess:30});
var floorGeometry = new THREE.PlaneGeometry(1000,1000);
var floor = new THREE.Mesh(floorGeometry,floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
// MESHES WITH ANIMATED TEXTURES!
var attackerTexture = new THREE.ImageUtils.loadTexture('images/kitinalevel2.png');
attack = new TextureAnimator(attackerTexture,2,13,26,25); // texture,#horiz,#vert,#total,duration.
var attackerMaterial = new THREE.MeshBasicMaterial({map:attackerTexture,side:THREE.DoubleSide,transparent:true});
var attackerGeometry = new THREE.PlaneGeometry(50,50,1,1);
var attacker = new THREE.Mesh(attackerGeometry,attackerMaterial);
attacker.position.set(-5,20,350);
scene.add(attacker);
var defenderTexture = new THREE.ImageUtils.loadTexture('images/kitinalevel1.png');
defense = new TextureAnimator(defenderTexture,2,13,26,25); // texture,#horiz,#vert,#total,duration.
var defenderMaterial = new THREE.MeshBasicMaterial({map:defenderTexture,side:THREE.DoubleSide,transparent:true});
var defenderGeometry = new THREE.PlaneGeometry(50,50,1,1);
var defenderx = new THREE.Mesh(defenderGeometry,defenderMaterial);
defenderx.position.set(25,20,350);
scene.add(defenderx);
}
function animate(){
requestAnimationFrame(animate);
render();
update();
}
function update(){
var delta = clock.getDelta();
attack.update(1000 * delta);
defense.update(1000 * delta);
//controls.update();
//stats.update();
}
function render(){
renderer.autoClear = false;
renderer.clear();
renderer.render(scene,camera);
renderer.render(backgroundScene,backgroundCamera);
}
function TextureAnimator(texture,tilesHoriz,tilesVert,numTiles,tileDispDuration){
// note:texture passed by reference,will be updated by the update function.
this.tilesHorizontal = tilesHoriz;
this.tilesVertical = tilesVert;
// how many images does this spritesheet contain?
// usually equals tilesHoriz * tilesVert,but not necessarily,
// if there at blank tiles at the bottom of the spritesheet.
this.numberOfTiles = numTiles;
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1 / this.tilesHorizontal,1 / this.tilesVertical);
// how long should each image be displayed?
this.tileDisplayDuration = tileDispDuration;
// how long has the current image been displayed?
this.currentDisplayTime = 0;
// which image is currently being displayed?
this.currentTile = 0;
this.update = function(milliSec){
this.currentDisplayTime += milliSec;
while(this.currentDisplayTime>this.tileDisplayDuration){
this.currentDisplayTime-=this.tileDisplayDuration;
this.currentTile++;
if (this.currentTile == this.numberOfTiles)
this.currentTile = 0;
var currentColumn = this.currentTile%this.tilesHorizontal;
texture.offset.x = currentColumn/this.tilesHorizontal;
var currentRow = Math.floor(this.currentTile/this.tilesHorizontal);
texture.offset.y = currentRow/this.tilesVertical;
}
};
}
</script>
What am I doing wrong?
Thanks in advance.
Found a solution:
renderer = new THREE.WebGLRenderer({antialias:true,alpha: true });
This will keep the background transparant, then with a little css I made the background appear.
I really tried every example, searched the web for hours but I can't seem to get it working!
So I simply tried to implement a little particle system simulating falling snow, just like this: http://www.aerotwist.com/tutorials/creating-particles-with-three-js/
But I only can access it in whole. Meaning I can rotate it as such but as soon as I try to iterate over it's vertices, the whole animation is getting the hiccups! I would really appreciate some help here!
-
Here are the key parts:
-> Setting up the particle system:
var partikelGeo = new THREE.Geometry();
var partikelMaterial = new THREE.ParticleBasicMaterial({
color:0xffffff,
size: 10,
map: THREE.ImageUtils.loadTexture('snowflake2.png'),
blending: THREE.AdditiveBlending,
transparent:true
});
var partikelAnzahl = 3500;
for (var p = 0; p < partikelAnzahl; p++) {
var pX = Math.random() * 1000 -500;
var pY = Math.random() * 1000 -500;
var pZ = Math.random() * 1000 -500;
var partikel = new THREE.Vertex(new THREE.Vector3(pX,pY,pZ));
partikel.velocity = new THREE.Vector3(0,-Math.random(),0);
partikelGeo.vertices.push(partikel);
}
var partikelSystem = new THREE.ParticleSystem(partikelGeo, partikelMaterial);
partikelSystem.sortParticles = true;
scene.add(partikelSystem);
-> Rendering & Animation on mouseclick
var frame = 0;
function animate(){
// request new frame
requestAnimationFrame(function(){
animate();
});
// render
render();
}
animate();
var check = 0;
onmousedown = function(){
if (check) {
check = 0;
}else{
check = 1;
}
}
function render() {
if (check) {
clickDo();
}
camera.lookAt(new THREE.Vector3(0,0,0));
renderer.render(scene,camera);
}
function clickDo() {
frame++;
partikelSystem.rotation.y += 0.01;
var pCount = partikelAnzahl;
while(pCount--) {
// get the particle
var particle =
partikelGeo.vertices[pCount];
// check if we need to reset
if(particle.position.y < -200) {
particle.position.y = 200;
particle.velocity.y = 0;
}
// update the velocity with
// a splat of randomniz
particle.velocity.y -=
Math.random() * .1;
// and the position
particle.position.addSelf(
particle.velocity);
}
// flag to the particle system
// that we've changed its vertices.
partikelSystem.
geometry.
__dirtyVertices = true;
}
Rah
Your code looks good to me. I would just suggest to try not sorting your particles as you use an additive blending:
partikelSystem.sortParticles = false;
got a problem with firing the mouse position event. The Object are moving when I drag them but not when I click on stage. What should I do? (of course I am adding a stage and layer and stuff ;) Thanks a lot in advance!
function rotateAlltoMouse(layer3) {
for(var n = 0; n < layer3.getChildren().length; n++) {
var shape = layer3.getChildren()[n];
var stage = shape.getStage();
var mousePos = stage.getMousePosition();
var xd = shape.getPosition().x - mousePos.x;
var yd = shape.getPosition().y - mousePos.y ;
var theta = Math.atan2(yd, xd);
var degree = theta / (Math.PI / 180) - 45;
shape.setRotationDeg(degree);
}
}
$('#container').bind('mousemove touchstart', function() {
rotateAlltoMouse(layer3);
});
Just a guess---could be better than a guess if you supply more code ;)
Try requesting the containing DOM element with kineticJS so that you know you're getting the proper container. KineticJS creates some supporting elements for its own use and your #container might not be getting the stage.
$(stage.getDOM()).on('mousemove', function(){ rotateAlltoMouse(layer3); });
Hello I am new to jQuery and I have a problem!
I want to scroll to the top, in a page that is loaded via AJAX call.
This works (test):
$(document).on('click', '#top_icon', function() {
alert('ok');
});
But this is not working (this is what I want to achieve):
$(document).on('click', '#top_icon', function() {
$('html, body').animate({scrollTop: '0px'}, 800);
});
Try this,
$(document).on('click', '#top_icon', function() {
$('html, body').animate({'scrollTop': '0px'}, 800);
return false;
});
scrollTop is undefined in your case.
I am not sure about jQuery, but scrollTop is not a CSS property and therefor might not be part of the properties that can be animated.
But you can create a simple animation for this yourself:
var startValue = 0;
var endValue = 0;
var duration = 800;
var distance = 0;
var velocity = 0;
var step = 0;
var endTime = 0;
var animate = function() {
var elapsedTime = new Date().getTime() - step;
document.body.scrollTop += velocity * elapsedTime;
step = new Date().getTime();
if (step > endTime)
document.body.scrollTop = endValue;
else
setTimeout(animate, 15);
}
yourButton.onclick = function() {
startValue = document.body.scrollTop;
distance = endValue - startValue;
velocity = distance / duration;
step = new Date().getTime();
endTime = step + duration;
animate();
};
Here is a fiddle: http://jsfiddle.net/pXvQG/12/, animate by scrolling down and click the body.