(Disclaimer: first post on SO. I've searched SO and elsewhere for an answer to this, but while mirrors and reflections do come up, I haven't found anything related to my particular issue.)
Problematic Mirror
This is my first scene in ThreeJS and most of it is based on the official examples (super helpful!). As you can see, for whatever reason the mirror reflection is black/fragmented from most angles, so it only displays a proper reflection under a very narrow range. (Explore other angles to see what I'm talking about.)
Relevant code:
// MIRROR
verticalMirror = new THREE.Mirror( renderer, camera, { clipBias: 0.003, textureWidth: 1024, textureHeight: 1024, color:0x889999 } );
var verticalMirrorMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 300, 300 ), verticalMirror.material );
verticalMirrorMesh.add( verticalMirror );
verticalMirrorMesh.position.y = 100;
verticalMirrorMesh.position.z = -500;
scene.add( verticalMirrorMesh );
And in the render function:
function render()
{
renderer.render( scene, camera );
verticalMirror.renderWithMirror( verticalMirror );
}
I've tried messing with the texture settings and the clipbias to no avail, and the whole code is mostly based on The ThreeJS reference example for Mirror.
Any and all help would be greatly appreciated - thank you!
Thanks WestLangley, verticalMirror.render() saved the day! Mirror reflects beautifully now. I'll avoid renderWithMirror until I get a better idea of what it does.
Much appreciated.
Related
It's very convenient to load GLTF- model in aframe, but no case is found that contains envmap texture. I'd like to see that the official can provide the same case as three official. pmremGenerator.fromEquirectangular(texture) function is used to make gltf model produce real reflection effect
https://threejs.org/examples/#webgl_loader_gltf
https://threejs.org/examples/#webgl_materials_envmaps_hdr
One way would be creating a custom component, which will:
wait until the model is loaded
traverse through the object's children
if they have a material property - apply the envMap
The envmap needs to be a CubeTexture - which adds another level of complication, when you want to use a panorama. You can use a the WebGLRenderTargetCube - It's an object which provides a texture from a Cube Camera 'watching' the panorama.
Overall The component code could look like this:
// create the 'cubecamera' objct
var targetCube = new THREE.WebGLRenderTargetCube(512, 512);
var renderer = this.el.sceneEl.renderer;
// wait until the model is loaded
this.el.addEventListener("model-loaded", e => {
let mesh = this.el.getObject3D("mesh");
// load the texture
var texture = new THREE.TextureLoader().load( URL,
function() {
// create a cube texture from the panorama
var cubeTex = targetCube.fromEquirectangularTexture(renderer, texture);
mesh.traverse(function(node) {
// if a node has a material attribute - it can have a envMap
if (node.material) {
node.material.envMap = cubeTex.texture;
node.material.envMap.intensity = 3;
node.material.needsUpdate = true;
}
});
}
Check it out in this glitch.
I was having the same issue and i found that cube-env-map from a-frame-extras works like a charm.
View component on GitHub
Its docs describe it as:
Applies a CubeTexture as the envMap of an entity, without otherwise
modifying the preset materials
And the code is super simple:
yarn add aframe-extras
import 'aframe-extras'
<a-entity
gltf-model="src: url('/path/to/file.glb')"
cube-env-map="path: /cubeMapFolder/;
extension: jpg;
reflectivity: 0.9;">
</a-entity>
In THREE demo, I remember that WebGLRenderTargetCube was used to produce envmap, but recently it was found thatPMREMGenerator was basically used to generate envmap texture with mipmap. It also supports HDR image format, making gltf model better than JPG texture.
I don't know how these JS modules PMREMGenerator and RGBELoader are used together with the components of Aframe. Can someone provide such an example in Aframe ,Thanks
That's the same High dynamic range (RGBE) Image-based Lighting (IBL) using run-time generated pre-filtered roughness mipmaps (PMREM)
I'm using ArcRotateCamera, when I click on mesh, I have to focus camera on
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 300, BABYLON.Vector3.Zero(), scene);
camera.setTarget(BABYLON.Vector3.Zero());
// on mesh click, focus in
var i = 2;
var pickInfo = scene.pick(scene.pointerX, scene.pointerY);
if (pickInfo.hit) {
pickInfo.pickedMesh.actionManager = new BABYLON.ActionManager(scene);
pickInfo.pickedMesh.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
function (event) {
camera.position = (new BABYLON.Vector3(pickInfo.pickedPoint.x, pickInfo.pickedPoint.y, camera.position.z + i));
i += 2;
})
);
}
this code changes mesh's z position but don't makes it in the center of screen
There are a few things that can be changed in your code.
1st - what you are doing is executing a code action after a click, instead of simply running the code in the callback after a pick has occurred. You are registering a pick action (technically user click) on right on the first frame, but only if the mouse was found in the right location at the right moment. My guess is that it didn't work every time (unless you scene is covered with meshes :-) )
2nd - you are changing the camera's position, instead of change the position to which it is looking. Changing the camera's position won't result in what you want (to see the selected mesh), it will move the camera to a new position while still focusing on the old position.
There are a few ways to solve this. The first is this:
scene.onPointerDown = function(evt, pickInfo) {
if(pickInfo.hit) {
camera.focusOn([pickInfo.pickedMesh], true);
}
}
The ArcRotate camera provides focusOn function that focuses on a group of meshes, while fixing the orientation of the camera. this is very helpful. You can see a demo here:
https://playground.babylonjs.com/#A1210C#51
Another solution would be to use the setTarget function:
https://playground.babylonjs.com/#A1210C#52
Which works a bit differently (notice the orientation change of the camera).
Another thing - use the pointer events integrated in Babylon, as they are saving you the extra call for a scene pick. pointer down is executed with the pickinfo integrated in the function, so you can get the picking info of the current pointer down / up / move each frame.
**** EDIT ****
After a new comment - since you want to animate the values, all you need to do is store the current values, calculate the new ones, and animate the values using the internal animation system (documentation here - https://doc.babylonjs.com/babylon101/animations#basic-animation) . There are many ways to achieve this, I took an old function and modernized it :-)
Here is the demo - https://playground.babylonjs.com/#A1210C#53
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
}
}
}
});
I'm trying to calculate how WIDE to make my button, based on the text that it will contain, and when I try to google for how to calcuate something as simplistic as the WIDTH OF SOME TEXT, I go cross-eyed just trying to wade through apparently nonsensical esoteric counter-intuitive voodoo. Can anyone out there help simplify for me how I would write a function like this:
public function HowWideWouldThisTextBeIfItWereInThisButton(Text:String,Container:Button):int {
...
}
Thanks in advance.
So long as you're in a UIComponent, you can use the measureText function.
public function howWideWouldThisTextBeIfItWereInThisButton(text:String,container:Button):int {
var lineMetrics:TextLineMetrics = container.measureText(text);
return lineMetrics.width;
}
That being said, the flex button component should automatically size to the width of the text, if you don't set a width on it. That way if you need the text width, you can just call use the textWidth property.
This works any format, size, font type. Don't forget properties "autoSize" and "wordWrap"!
var tf:TextField = new TextField();
addChild(tf);
tf.autoSize = TextFieldAutoSize.LEFT;
tf.wordWrap = false;
tf.text = "Whatever here";
tf.width = tf.textWidth + 4; // add 2 pixels-gutters left & right
Your button will need to be "tf.width" wide...
Here's how you do it in Spark:
I've modified - simplified - his example a bit here:
var textMetrics:TextLineMetrics = label.measureText( label.text );
var textWidth:int = textMetrics.width;
Here's a way that works also:
var tempText:Text = new Text();
tempText.regenerateStyleCache(false);
var textWidth:int = tempText.measureText(*yourstring*).width;
as I think, textField.textWidth construction works fine... until you change the font size.
It seems it calculates width based on 12px font.
So, if you have embedded font and global styling you can try fast solution:
var realWidth = myLabel.textField.textWidth * (fontSize / 12);
I've tried this on long and short strings and the result is correct.
Joshua, it really helps to be clear. Are you talking TextField, MX Label, Spark Label, RichText, etc? Different text components use different text engines, such as FTE and TLF and may have different solutions. I certainly wish Adobe had a good set of utilities or sample code which could predict what the size of font rendered onto the controls would be, before you actually do it. But, the good news is that in certain cases - like, a good old fashioned TextField, you can predict this pretty well. You just make a TextField, set it's textFormat field, auto size method and the text. You should be able to get it's size before adding it anywhere. I don't remember what the order was, but, I remember the order you set those properties matters. If you can't figure out how to do it, I can provide a code example. Now, for the new, "improved", components such as Spark Labels - I'll be buggered if I can find a damn way... spent a number of hours on this and haven't found a way.. or someone who knows a way :P.
Following up my comment on quoo's answer, here's the code for same purpose, but just grabbing the width out of a TextField, using TextLineMetrics as well:
public function mtxtWidth(container:TextField):int {
var lineMetrics:TextLineMetrics = container.getLineMetrics(0);
return lineMetrics.width;
}
Sounds like you could use textWidth
I'm trying to implement a show/hide widget animation. The widget is a QDockWidget and therefore is inside the QMainWindowLayout.
Using QPropertyAnimation doens't seem to work, I got something looking like that :
m_listViewDock->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
QPropertyAnimation* animation = new QPropertyAnimation(m_listViewDock, "geometry", m_listViewDock);
animation->setDuration(1000);
QRect g = m_listViewDock->geometry();
animation->setStartState(g);
g.setHeight(80);
animation->setEndState(g);
animation->start(QAbstractAnimation::DeleteWhenStopped);
Unfortunately it doesn't do anything. I tried with other properties (minimumHeight, fixedHeight), but same issue.
I thought I didn't setup my widget layout correctly using the designer but even if I play with minimum sizes I still don't have any result. What kind of size policy should I use if I want to play with the size?
I'm stuck, it would be so great if someone could clarify my issue. I'm not sure I'm doing anything wrong...
Thanks in advance for your help,
Boris -
By the way, here is how Qt programmers used it in the QWidgetAnimator, mainly used for animations of dock widgets, I'm doing exactly the same... :
const QRect final_geometry = _final_geometry.isValid() || widget->isWindow() ? _final_geometry :
QRect(QPoint(-500 - widget->width(), -500 - widget->height()), widget->size());
#ifndef QT_NO_ANIMATION
AnimationMap::const_iterator it = m_animation_map.constFind(widget);
if (it != m_animation_map.constEnd() && (*it)->endValue().toRect() == final_geometry)
return;
QPropertyAnimation *anim = new QPropertyAnimation(widget, "geometry", widget);
anim->setDuration(animate ? 200 : 0);
anim->setEasingCurve(QEasingCurve::InOutQuad);
anim->setEndValue(final_geometry);
m_animation_map[widget] = anim;
connect(anim, SIGNAL(finished()), SLOT(animationFinished()));
anim->start(QPropertyAnimation::DeleteWhenStopped);