I have a body but when I have other bodies inside this body and I put a value on its property "angle", and other bodies are rejected of this body.
now, for rotate this body, i tested its properties and found in "constraintImpulse" this property is not found in matters.js documentation, inside "constraintImpulse" it's found "angle" but this dont handle in radians, also, this movement made it with a tween
barra_izquierda_vaso_moleculas = Bodies.rectangle(200,200,10,200,{isStatic: true});
barra_derecha_vaso_moleculas = Bodies.rectangle(500,200,10,200,{isStatic: true});
barra_inferior_vaso_moleculas = Bodies.rectangle(350,300,300,10,{isStatic: true});
vaso_moleculas = Body.create({
parts: [barra_izquierda_vaso_moleculas,barra_derecha_vaso_moleculas,barra_inferior_vaso_moleculas],
restitution: 0,
friction: 0,
frictionStatic : 0,
frictionAir: 0,
inertia: Infinity,
mass: 1,
isStatic: true,
});
World.add(world,vaso_moleculas);
createjs.Tween.get(vaso_moleculas.constraintImpulse).wait(2000).to({angle:0.06},3000);
Maybe you forgot to put update function for tween.
Something like that :
function animate(time) {
window.requestAnimationFrame(animate);
TWEEN.update(time);
}
Without update procedure we don't have a animation.
Look at Tween.js Not Calling onUpdate Function
Related
I've been working on an inertial scrolling implementation within Nextjs using Framer Motion but running into a bit of trouble when animation page transitions using animate presence. I'm hooking into the page scroll progress via useScroll and animating the Y transform with spring physics. The issue, however, is when resetting the window scroll position when navigating between pages. After the component has unmounted, I call window.scrollTo(0,0) via the AnimatePresence onExitComplete callback, but because I'm transforming the page position via spring physics, the scroll reset doesn't complete immediately. So when new pages are mounted, the page transform to reset the scroll is still running.
Additionally, I've included scroll={false} in my Next Link components to prevent the default scroll to top functionality so I can handle this manually via the AnimatePresence component as mentioned above. But this doesn't seem to be working.
There's a bit of code involved so I created a minimal reproduction repo here.
I also notice that passing scrollY to the y property of the variant object prevents the unwanted scrolling behavior on page transition. But passing something like scrollY - 128 breaks the behavior:
const variants = {
hidden: { opacity: 0, x: 0, y: 64 },
enter: { opacity: 1, x: 0, y: 0 },
exit: { opacity: 0, x: 0, y: scrollY },
};
y value in exit variant wasn't being updated to match latest scrollY value. Solution:
useEffect(() => {
return scrollY.onChange((latest) => {
variants.exit.y = -scrollY.current - 128;
});
});
I think I don't quite understand how components and entities work.
I'm using the box component that appears in the a-frame help (https://aframe.io/docs/1.3.0/introduction/writing-a-component.html#example-box-component), and I want to modify a property. When doing so, I thought that the update would be activated but it does nothing. In fact the oldData is always empty and never enters in the update option (except for the first time):
<script>
AFRAME.registerComponent("box", {
...
}
</script>
<a-scene> </a-scene>
<script>
const gScene = document.querySelector("a-scene");
var camara = document.querySelector("[camera]");
camara.setAttribute("position", { x: 0, y: 0, z: 10 });
var p00 = document.createElement("a-entity");
p00.setAttribute("box", { width: 1, height: 1, depth: 1, color: "#f00" });
gScene.appendChild(p00);
p00.setAttribute("height", 3);
p00.setAttribute("color", "#00f");
</script>
First part of the code plot a red box with 1x1x1 dimension. But when I change the height or color attribute, don't do anything. What I have to do to fire the update?
Thanks in advance
You need to update the box attribute - setAttribute("height", XXX) will trigger an update in the height component.
If color is in the box schema, then:
// this updates the color property of the box attribute,
// triggering "update" in the "box" component
p00.setAttribute("box", "color", "red")
// this update the height attribute,
// triggering "update" in the "height" component
p00.setAttribute("height", "10");
I want the slider to use centered slides, but not in the first and the last ones.
When I enable the centered slides property "centeredSlides: true" and set also "slidesPerView: 1.2" I get the correct result on the middle slides, but the first and the last I want to be the left or rigth position respectively.
this.SlideOptionsPaths =
{
initialSlide: 0,
centeredSlides: true,
slidesPerView: 1.2,
slidesPerGroup: 1,
spaceBetween: 10,
//slidesOffsetBefore: -82,
//slidesOffsetAfter: 160,
speed: 400,
fadeEffect:
{
crossFade: true
}
};
This is the actual behavior:
And i need the first image to be aligned left...
When swiping trow the cards (the middle cards) I need this behavier (that is correctly happening):
By the time the question was posted there was no easy way to achieve this result. But since Swiper version 5.2 a new centeredSlidesBounds parameter was added to the API.
All you need to do is use the following parameters in the options object:
{
centeredSlides: true,
centeredSlidesBounds: true
}
Based on the docs what about using:
{
initialSlide: 1
}
which will push the slide along one so it has something to fill the gap, or
{
loop: true,
}
which will start at the beginning but show the end wrapped around.
Because the option your asking isn't supported as far as I know.
I was trying to use tick function as described in the below link https://github.com/aframevr/aframe/blob/master/docs/introduction/best-practices.md but it didnt worked out
AFRAME.registerComponent('foo', {
tick: function () {
var el = this.el;
var rotationTmp = this.rotationTmp = this.rotationTmp || {x: 0, y: 0, z: 0};
var rotation = el.getAttribute('rotation');
rotationTmp.x = rotation.x + 0.1;
rotationTmp.y = rotation.y;
rotationTmp.z = rotation.z;
el.setAttribute('rotation', rotationTmp);
}
});
Expected output the object should rotate around x actual result nothing happens..
I hope it's okay if i clarify a bit Kevin's answer.
But first of all, the code is working. Both in aframe 0.9.2 and 0.8.2.
The issue may be related to
the script being placed after the scene is loaded
the component not being attached to the entity:
js:
AFRAME.registerComponent('foo', {
// component body
})
html:
<a-entity foo></a-entity>
As for Kevins answer - it may be a good idea to make changes in the tick function with referring to the underlying THREE.js object.
If you want to rotate a box, there's no need to throw in all that logic you have:
1) create a tmp variable
2) get the object rotation
3) set the tmp variable
4) set the object rotation
When you have a function which executes on each render loop (tick) then you want to minimize what's happening there. So Kevin directly accesses the THREE.js object, and changes the rotation:
tick: function() {
el.object3D.rotation.x += 0.1 * Math.PI / 180 // three uses radians
}
Check it out in this fiddle.
You can just do el.object3D.rotation.x += 0.1
How do I set multiple instances of the nouislider in Meteor?
I have initialed multiple sliders on a page like codes in this . I would like to set the value of sliders synchronized with a collection, but now I am only able to initialized the value with the collection in "start" option.
I've been trying calling a function on 'slide' event. But in the function I find no way to select all the sliders, or use .val().
var updateSliders=function(){
var slider=$(".sliderrr");
console.log(slider);
slider.each(function(){
console.log($(this).val());
})
};
I will base this answer on what you wrote on github
<div class="slider-container">
<div class="sliderrr"></div>
</div>
and
var slider=$(".sliderrr");
slider.each(function(){
console.log("value:",$(this).val());
})
The problem is that you are calling 'each' on the sliderrr instead of the slider-container.
Template.body.rendered = function () {
//init the slider
this.$('.sliderrr').noUiSlider({
start: 5,
connect: "lower",
step: 0,
format: wNumb({
decimals: 0,
}),
range: {
'min': 0,
'max': 30
}
});
//This is the part I changed
var sliderino = this.$('.slider-container');
sliderino.children('.sliderrr').each(function() {
console.log($(this).val());
});
};