Increase the playground area in A-Frame - aframe

I searched everywhere and can't find the answer:
How is it possible to increase the playground area in A-Frame? (the scene width & height, which by default seems to be 30x30 meters)

There is no builtin way to customize this grid but you can easily do that in the console using e.g.
AFRAME.scenes[0].object3D.traverse( e => { if (e.type == "LineSegments") e.scale.multiplyScalar(2) } )
and if you want a component proper
As a script but instead using
AFRAME.registerComponent('larger-playground', {
init: function () {
this.object3D.traverse( e => { if (e.type == "LineSegments") e.scale.multiplyScalar(2) } )
}
});
PS: assumed you don't have other lines in the scene.

Related

Get wold coordinates from screen coordinates in Babylon.js

I'm not using a ground. I want to get the pickedPoint to add a mesh dynamically.
scene.onPointerDown = function (evt, pickResult) {
// if the click hits the ground object, we change the impact position
if (pickResult.hit) {
console.log('an object is picked');
} else {
console.log('get world coordinates from evt.x and evt.y');
}
};
the pickResult object has a variable called pickedPoint .
Here is a quick demo:
https://playground.babylonjs.com/#NU4F6Y#0

change camera rotation without dragging canvas in Aframe

I am playing with Aframe (version 0.8.0) sometime now. I am stuck at one problem, I have been searching for its solution for couple of days but failed thus this question.
My problem is how can I change camera rotation without having to drag on canvas?
I tried these things but they didn't work:
camera.setAttribute('rotation', {....})
camera.object3D.children[0].rotation.x = 0 // some value
putting camera entity as the child of another entity and changing the rotation of parent entity is not what I am looking for
Any hint would be appreciated, thanks...
Update: this problem occurs only with version 0.8. There is no such error in previous version 0.7.1.
You're milage will vary but you could try:
https://glitch.com/edit/#!/a-frame-rotate-camera-test
AFRAME.registerComponent("rotate", {
init: function () {
document.body.onkeyup = (e) => {
if(e.keyCode == 32){
this.el.components['look-controls'].yawObject.rotation.y += 1
}
}
}
});

Is it possible to arrows on a pageable container (visual composer)?

I'm working on my WordPress website with Visual Composer.
I need to include a pageable container but it would be great if it can be like a slideshow.
This is my pageable container
Thanks in advance,
Regards :)
Based upon the current version of WP Bakery Page Builder the below works for me:
To build it I created a row with 3 columns, with the pageable container in the middle column and the left and right arrow images in the columns on either side.
Both arrow images and the pageable container were given IDs. In my example the IDs of the arrows were #arrow_prev and #arrow_next respectively. You can give your pageable container any unique ID.
(function ($) {
$(document).ready(function(){
$( '#arrow_prev' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'prev');
});
$( '#arrow_next' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'next');
});
function move_pageable_container(pageable_container,direction){
// Make a list of the panel IDs
var panel_ids = $(pageable_container.find(".vc_tta-panel"))
.map(function() { return this.id; }) // convert to set of IDs
.get();
// Find position of the active panel in list
var current_active_pos = panel_ids.indexOf($(pageable_container).find(".vc_tta-panel.vc_active").attr('id'));
var new_pos = 0;
switch(direction) {
case 'prev':
if (current_active_pos > 0){
new_pos = current_active_pos-1;
}else{
new_pos = panel_ids.length-1;
}
break;
case 'next':
if (current_active_pos < panel_ids.length-1){
new_pos = current_active_pos+1;
}else{
new_pos = 0;
}
break;
}
// Clear active panels
$(pageable_container.find(".vc_tta-panel")).each(function(i,a) {
$(this).removeClass("vc_active");
});
var new_active_panel = $(pageable_container).find('#'+ panel_ids[new_pos]);
$(new_active_panel).addClass("vc_animating");
$(new_active_panel).addClass("vc_active");
setTimeout(
function(){
$(new_active_panel).removeClass("vc_animating");
}, 350);
}
}
);
})(jQuery);
If you want a pseudo fading-in effect then you can use this additional CSS in your style sheet:
#id_of_pageable_container .vc_tta-panel.vc_animating {
opacity: 0!important;
}
Where #id_of_pageable_container is the ID that you gave your pageable container
A simpler solution with vanilla js only:
The idea is to find the target page button and press it programmatically, so that there is no need to mimic the plugin's animations as in Chaz's solution.
Add js (via Raw JS widget / other means):
function prevSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i - 1 < 0) return;
slides[i - 1].firstChild.click();
return;
}
}
}
function nextSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i + 1 >= slides.length) return;
slides[i + 1].firstChild.click();
return;
}
}
}
Add button widgets and set href to call js:
For left arrow button,
javascript:prevSlide();
For right arrow button,
javascript:nextSlide();
Hope this helps.
I prefer to use the Post Grid widget for that. Keep in mind that the pageable container is not totally responsive, it doesn't react to swipe touching, but the Post Grid does.
Post Grid is really powerful, although it also has its caveouts. You can create your content with posts and pages, or a custom post type and then filter what you want to show in your slider from the widget options.
In "advanced mode" you can use the Grid Builder to create your own template and control the output.
The only problems that I've found with this method is to set a variable height in sliders and that sometimes it is slow loading content and is not possible to do a lazyload.

How to render a webgl in a responsive iframe?

I'm using ThreeJS to paint 3D experiments of planets in a responsive iframe. Here's an illustration of Earth, for example.
This works fine on DOMContentLoaded, but not onresize. The scene is cut off or remains at (0,0) top-left as per its first render. Note, this is the recommended behavior according to webgl anti patterns.
But I want to scale the planet according to the new size of the iframe, both when the window is resized or when orientation changes (and leads to a resize). Essentially, to make it cross-platform and responsive.
I have a few ideas to make this work:
Use innerWidth/innerHeight, even though it is an anti-pattern, but can work if we dispose() and repaint the scene with new height & width of the iframe.
Ensure the disposition and repaint is carried out efficiently, i.e. setTimeout and detect resizeFinish() like so:
function resizeFinish() {
width = window.clientWidth;
height = window.clientHeight;
renderer.setSize(width, height);
render();
if (scene) {
while (scene.children.length > 0) {
scene.remove(scene.children[scene.children.length - 1]);
}
// cleanup without calling render (data needs to be cleaned up before a new scene can be generated)
renderer.dispose(scene.children);
}
alertSize();
}
window.onresize = function() {
clearTimeout(doit);
doit = setTimeout(function() {
resizeFinish();
}, 1000);
};
function render() {
controls.update();
sphere.rotation.y += 0.003;
clouds.rotation.y += 0.005;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
Is this good enough?

button for zoom in three.js

I use three.js and THREE.OrbitControls for animation
I dont know how change zoom with button click
How I understand ..for zooming answer this functions
this.dollyIn = function ( dollyScale ) {
if ( dollyScale === undefined ) {
dollyScale = getZoomScale();
}
scale /= dollyScale;
};
this.dollyOut = function ( dollyScale ) {
if ( dollyScale === undefined ) {
dollyScale = getZoomScale();
}
scale *= dollyScale;
};
what I need send to increment or decrement zoom
I how do it for this button form ??
<input id="clickMe" type="button" value="+" onclick="..." />
I've done this in one of my project.
You are right, you can use dollyIn() and dollyOut() functions from OrbitControls to do the zooming in or out.
Here is the steps and snippet code :
You need to initialize the OrbitControls along with your camera and renderer domElement :
var controls = new THREE.OrbitControls(camera, renderer.domElement);
Create function for zooming in and out :
function zoomModel(isZoomOut, scale) {
if(isZoomOut){
controls.dollyIn(scale);
}else{
controls.dollyOut(scale);
}
}
Add event listener into your button to call the zoomModel function :
$("#clickMe").on("click", function(){
// call this to make the model larger/ zoom in
zoomModel(true, 4);
// call this to make it smaller / zoom out
//zoomModel(false, 4);
});
For newer THREEjs versions (tried on r74 and r75) you can call these on button click events:
controls.constraint.dollyOut(/*Add your desired scale here*/) //Zoom in
or
controls.constraint.dollyIn(/*Add your desired scale here*/) //Zoom out
Look in OrbitControls.js how the scale-value is applied to the radius of the camera around its target in the update()-function and how getZoomScale() is implemented.
The scale is multiplied with the overall radius. So to zoom out, the scale value has to larger than 1 and to zoom in, scale has to be smaller than 1. Also, scale will be reset to 1.0 at the end of the OrbitControls update function.
getZoomScale() on the other hand always returns 0.95 if zoomSpeed is set to 1.0.
To put it in a nutshell, if you only call controls.dollyOut() or controls.dollyIn() on button-click-event, your zoom will change like what you would experience with one tick of your mouse wheel, as this uses the same function call.

Resources