I have two collada files (two different scenes: "01.dae" and "02.dae").
I want to display 01.dae first and right after the animation finishes I want to load and display 02.dae on the same canvas.
(I'm trying to modify "webgl_loader_collada_keyframe.html" to do this but no results so far.)
How could I handle more than one animated collada scenes? A source code or any tips or tricks would be appreciated!
Thank you for your answer. I modified my code based on your idae but unfortunately it's not working.
Could you take a look at my code please?
Here is my code:
loader.load( 'pump.dae', function ( collada ) {
model = collada.scene;
animations = collada.animations;
kfAnimationsLength = animations.length;
model.scale.x = model.scale.y = model.scale.z = 0.125; // 1/8 scale, modeled in cm
init();
start();
animate( lastTimestamp );
setTimeout(loadSecond,3000);
} );
function loadSecond()
{
loader2.load( 'pump2.dae', function ( collada2 )
{
scene.remove( model );
model2 = collada2.scene;
animations2 = collada2.animations;
kfAnimationsLength2 = animations2.length;
model2.scale.x = model2.scale.y = model2.scale.z = 0.125; // 1/8 scale, modeled in cm
init2();
start2();
animate2( lastTimestamp2 );
//alert("second loaded");
} );
}
...
As you can see I extended your code with
scene.remove( model );
to remove the previous scene.
The first scene displays and then disapears properly however the new secene does not load. Do you have an idae why?
(Note: I don't know how long my first scene realy is.)
If you know how long the animation is, you could use a setTimeout to load the second model.
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('PATH TO MODEL', function colladaReady( collada){
dae = collada.scene;
skin = collada.skins[ 0 ];
dae.scale.x = dae.scale.y = dae.scale.z = 1;
dae.updateMatrix();
scene.add(dae);
render();
setTimeout(loadSecond,3000);
});
function loadSecond(){
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('PATH TO MODEL', function colladaReady( collada){
///repeat model loading logic
}
Where the time interval in the setTimeout is equal to the length of your animation.
Related
I have points generated one by one, and when a new point is generated, I want to draw a line segment connecting with the previous point. Like this:
var x by remember { mutableStateOf( 0.0f)}
var y by remember { mutableStateOf( 0.5f)}
var pStart by remember { mutableStateOf(Offset(0f, 0.5f))}
Canvas(modifier = Modifier.fillMaxSize()) {
canvasWidth = size.width
canvasHeight = size.height
val pEnd = Offset(x * canvasWidth, (1-y) * canvasHeight)
val col = if (pEnd.y < pStart.y) Color.Green else Color.Red
drawLine(
start = pStart,
end = pEnd,
strokeWidth = 4f,
color = col
)
pStart = pEnd
}
But this only draws the segment in a flash and no segments stay on the screen.
I know I can save the points to a list and redraw all the segments whenever a new point is added. But I just hope to economize. Is it possible?
There's no practical other way. You COULD in fact, keep track of just two points, adding a whole new Canvas (all Transparent and Filling the maximum Size, stacked on top of one another), for each extra point that is added. This does seem a bit impractical, but maybe try it out and do some benchmarking to see which one checks out. This is the only OTHER way I could think of, where you do not have to store all the points and recompose every time a point is added, since all the other lines would technically be frozen in space.
In response to the somewhat (unreasonably) aggressive comment below, here's some sample code. I assume you have a stream of new points coming in so a LiveData object is assumed to be the source of that, which I shall be converting to a MutableState<T> for my use-case.
var latestPoint by liveData.collectAsState()
var recordedPoint by remember { mutableStateOf(latestPoint) }
var triggerDraw by remember { mutableStateOf(false) }
var canvasList = mutableStateListOf<#Composable () -> Unit>Canvas>() // Canvas is the Composable
if(triggerDraw){
canvasList.add(
Canvas(){
/* you have the recordedPoint, and latestPoint, simply draw a line here */
}
)
triggerDraw = false
}
LaunchedEffect(latestPoint){
triggerDraw = true
}
canvasList.forEach {
it() // Invoke the Composable here
}
Thanks Dad!
Hey guys so I have this konva js app that has your typical background video just like the demo or close to it. I am able to play the video background and add image objects on top of it etc. Now I want a way to save the stage in its current state. So I do state.stage.toJSON() and as expected it creates a serialized JSON object. Now here's where I am hung up. when I load the stage like so state.stage = Konva.Node.create(data.stage, "container"); the stage data gets loaded (it is the correct size and so forth) yet there is no background video, no images or anything how do I fix this? I don't even know if stage.toJSON is correct but the point is I need to save it, leave the page and load it back up at a future date.
state.backgroundVideo = new Konva.Image({
image: state.video,
draggable: false
});
state.video.addEventListener("loadedmetadata", function(e) {
state.backgroundVideo.width(state.width);
state.backgroundVideo.height(state.height);
});
state.anim = new Konva.Animation(function() {
// do nothing, animation just need to update the layer
}, state.layer);
state.layer.add(state.backgroundVideo);
state.layer.batchDraw();
const canvas = document.getElementsByTagName("canvas")[0];
state.canvas = canvas;
node.toJSON() doesnt serialize image or video objects from Konva.Image attributes.
To solve the issue you can save video or image src into custom attribute:
image.setAttr('source', imageURL);
A simple string will be serialized into JSON. Then after you created a node from the JSON Konva.Node.create(data.stage, "container");
You need to find such nodes and restore image or video manually
// "video-background" is a sample here
// you can define your own selector
const videoNode = stage.findOne('.video-background');
const source = videoNode.getAttr('source');
const video = document.createElement('video');
video.src = source;
videoNode.image(video);
For more information take a look here:
https://konvajs.org/docs/data_and_serialization/Complex_Load.html
https://konvajs.org/docs/data_and_serialization/Best_Practices.html
thanks #lavrton your comments really helped me figure it out. Rather than loading the stage directly however I just saved the data from the stage used the data to rebuild the stage in the exact same way. Heres the code I used to get the data to save.
Heres my code:
const groups = state.stage.find("Group");
const stageData = [];
for (let x = 0; x < groups.length; x++) {
let g = groups[x];
let i = g.findOne("Image").getAttrs();
let group = { x: g.getX(), y: g.getY() };
let image = { x: i.width, y: i.height };
let obj = { image, group, jsonId: g.getAttr("jsonId") };
stageData.push(obj);
}
console.log("stageData", stageData);
i am new in cocos2d-js here, i just created this code:`
var that = this;
that._dice
// add player
// create sprite sheet
cc.spriteFrameCache.addSpriteFrames(res.dice_plist);
var spriteSheet = new cc.SpriteBatchNode(res.diceRed_png);
that.addChild(spriteSheet, 2);
// init runningAction
var animFrames = [];
for (var i = 1; i < 7; i++) {
var str = "dieRed" + i + ".png";
var frame = cc.spriteFrameCache.getSpriteFrame(str);
animFrames.push(frame);
}
var animation = new cc.Animation(animFrames, 0.1);
that.runningAction = new cc.Repeat.create(new cc.Animate(animation), Math.random()*10);
var diceSprite = new cc.Sprite("#dieRed1.png");
diceSprite.visible = true;
console.log(this.getContentSize(diceSprite));
diceSprite.runAction(this.runningAction);
that._dice.push(diceSprite);
var size = cc.winSize;
spriteSheet.setPosition(size.width/6.5, size.height/1.20);
spriteSheet.setAnchorPoint(0.5, 0.5);
spriteSheet.addChild(diceSprite, 2);
`
and i would like to use the getFrames() feature to return the array of ccanimation frames. i'm just thinking to get the information of which picture are being animated on the screen there, for example, if the #dieRed1.png is being animated or visible on the screen, it would show value or return value of 1. i have tried to googled around and cannot find any other clue there. if there is any better method, i would love to see that as well. sorry for the english anyway, a bit confused how to arrange the words. thank you :)
Ok, so refering to
the official docs
{Array} getFrames()
Returns the array of animation frames
Which means you can just do:
var frames = animation.getFrames();
To get the array. And then you'll receive an array of cc.AnimationFrame.
To get sprite link do:
var frame = frames[0];//cc.AnimationFrame
var spriteFrame = frame.getSpriteFrame(); //cc.SpriteFrame
var texture = spriteFrame.getTexture(); // cc.Texture
And the texture itself should have the name attribute which may do the job.
I have two styles of interactions, one highlights the feature, the second places a tooltop with the feature name. Commenting both out, they're very fast, leave either in, the map application slows in IE and Firefox (but not Chrome).
map.addInteraction(new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
layers: [stationLayer],
style: null // this is actually a style function but even as null it slows
}));
$(map.getViewport()).on('mousemove', function(evt) {
if(!dragging) {
var pixel = map.getEventPixel(evt.originalEvent);
var feature = null;
// this block directly below is the offending function, comment it out and it works fine
map.forEachFeatureAtPixel(pixel, function(f, l) {
if(f.get("type") === "station") {
feature = f;
}
});
// commenting out just below (getting the feature but doing nothing with it, still slow
if(feature) {
target.css("cursor", "pointer");
$("#FeatureTooltip").html(feature.get("name"))
.css({
top: pixel[1]-10,
left: pixel[0]+15
}).show();
} else {
target.css("cursor", "");
$("#FeatureTooltip").hide();
}
}
});
I mean this seems like an issue with OpenLayers-3 but I just wanted to be sure I wasn't overlooking something else here.
Oh yeah, there's roughly 600+ points. Which is a lot, but not unreasonably so I would think. Zooming-in to limit the features in view definitely helps. So I guess this is a # of features issue.
This is a known bug and needs more investigation. You can track progress here: https://github.com/openlayers/ol3/issues/4232.
However, there is one thing you can do to make things faster: return a truthy value from map.forEachFeatureAtPixel to stop checking for features once one was found:
var feature = map.forEachFeatureAtPixel(pixel, function(f) {
if (f.get('type') == 'station') {
return feature;
}
});
i had same issue, solved a problem by setInterval, about this later
1) every mouse move to 1 pixel fires event, and you will have a quee of event till you stop moving, and the quee will run in calback function, and freezes
2) if you have an objects with difficult styles, all element shown in canvas will take time to calculate for if they hit the cursor
resolve:
1. use setInterval
2. check for pixels moved size from preview, if less than N, return
3. for layers where multiple styles, try to simplify them by dividing into multiple ones, and let only one layer by interactive for cursor move
function mouseMove(evt) {
clearTimeout(mm.sheduled);
function squareDist(coord1, coord2) {
var dx = coord1[0] - coord2[0];
var dy = coord1[1] - coord2[1];
return dx * dx + dy * dy;
}
if (mm.isActive === false) {
map.unByKey(mm.listener);
return;
}
//shedules FIFO, last pixel processed after 200msec last process
const elapsed = (performance.now() - mm.finishTime);
const pixel = evt.pixel;
const distance = squareDist(mm.lastP, pixel);
if (distance > 0) {
mm.lastP = pixel;
mm.finishTime = performance.now();
mm.sheduled = setTimeout(function () {
mouseMove(evt);
}, MIN_ELAPSE_MSEC);
return;
} else if (elapsed < MIN_ELAPSE_MSEC || mm.working === true) {
// console.log(`distance = ${distance} and elapsed = ${elapsed} mesc , it never should happen`);
mm.sheduled = setTimeout(function () {
mouseMove(evt);
}, MIN_ELAPSE_MSEC);
return;
}
//while multithreading is not working on browsers, this flag is unusable
mm.working = true;
let t = performance.now();
//region drag map
const vStyle = map.getViewport().style;
vStyle.cursor = 'default';
if (evt.dragging) {
vStyle.cursor = 'grabbing';
}//endregion
else {
//todo replace calback with cursor=wait,cursor=busy
UtGeo.doInCallback(function () {
checkPixel(pixel);
});
}
mm.finishTime = performance.now();
mm.working = false;
console.log('mm finished', performance.now() - t);
}
In addition to #ahocevar's answer, a possible optimization for you is to utilize the select interaction's select event.
It appears that both the select interaction and your mousemove listener are both checking for hits on the same layers, doing double work. The select interaction will trigger select events whenever the set of selected features changes. You could listen to it, and show the popup whenever some feature is selected and hide it when not.
This should reduce the work by half, assuming that forEachFeatureAtPixel is what's hogging the system.
I use AS3 in Flex 3 to create new image and seem unable to get the exact size of the original image. percentHeight & percentWidth to 100 can do the job, but limitation in ObjectHandlers require me to set the image scale in pixel.
Any solution?
Note: this is also applicable for displaying Image original dimension without ObjectHandler control, just remove those lines that are not applicable.
After struggle hours for solution, I found my own answer thru in actionscript forum, in fact, only one solution, I surprise there was no such topic elsewhere.
private function init():void {
var image:Image = new Image();
image.source = "http://www.colorjack.com/software/media/circle.png";
image.addEventListener(Event.COMPLETE, imageLoaded);
/* wait for completion as Image control is asynchronous,
* which mean ObjectHandler will attempt to load asap
* and you are not able to get the correct dimension for scaling.
* EventListener fixed that.
*/
this.addChild(image);
//whenever you scale ObjectHandler control, the image is always fit by 100%
image.percentHeight = 100;
image.percentWidth = 100;
}
private function imageLoaded(e:Event):void{
var img:Image = e.target as Image;
trace("Height ", img.contentHeight);
trace("Width ", img.contentWidth);
var oh:ObjectHandles = new ObjectHandles();
oh.x = 200;
oh.y = 200;
oh.height = img.contentHeight;
oh.width = img.contentWidth;
oh.allowRotate = true;
oh.autoBringForward = true;
oh.addChild(img);
genericExamples.addChild(oh);
}