I'm trying to sync the camera orientation of one threejs scene with another by passing the world matrix of the first scene's camera to the second and then using
camera.matrix.fromArray(cam1array); //cam1array is the flattened worldmatrix of the 1st scene
camera.updateMatrixWorld( true );
However, when I print camera.matrixWorld for the second scene, it would appear that there has been no update (matrixWorld is the same as before the previous commands). The second scene does use OrbitControls so maybe they are overriding my commands, but I wondered if anyone could advise me on how to achieve the same world matrix for the second scene as the first?
I should also clarify that part of the issue is that it would appear that setting
camera.matrixAutoUpdate = false;
in order to prevent overriding seems to prevent OrbitControls from functioning corrrectly.
Related
I need to post-process the scene that I rendered previously on textureA (as render target), with my custom shader and save the result to textureB (input:textureA, output:textureB). Therefore, I don't need a scene and a camera. I think it's too simple to even bother with three.js classes like EffectComposer, Shaderpass, CopyShader, TexturePass, etc.
So, how do I setup this computing-like post-processing in a simple way?
I've create for you a fiddle that shows a basic post-processing effect without EffectComposer. The idea behind this code is to work with an instance of WebGLRenderTarget.
First, you draw the scene into this render target. In the next step, you use this render target as a texture for a plane which is rendered with an orthographic camera. The code in the render loop looks like this:
renderer.clear();
renderer.render( scene, camera, renderTarget );
renderer.render( sceneFX, cameraFX );
The corresponding material of this plane is your custom shader. I've used a luminosity shader from the official repo.
Therefore, I don't need a scene and a camera.
Please do it like in the example. That's the intended way of the library.
Demo: https://jsfiddle.net/f2Lommf5/5149/
three.js R91
I'm trying to render some 3d text using THREE.FontLoader. The object is in the scene but does not appear. The only thing I thought could be the problem is that the mesh appears to have a BufferGeometry instead of a TextGeometry, for whatever reason. Is there anything wrong with my code?
Link to my code:
https://puu.sh/w78xs/3e350985e1.png
I'm going to assume you have lights in your scene, and you camera is oriented correctly.
The loader.load call is asynchronous, but you're creating your mesh synchronously.
// This is an asynchronous call, which may take some time.
loader.load('/assets/delvetiker_regular.typeface.json',
function(font){
// This function is a callback, and is only executed AFTER load completes
geometry = ...;
});
//...
// At this point, geometry MAY OR MAY NOT EXIST.
// If it doesn't, this won't work.
mesh = new THREE.Mesh(geometry, mat);
If you move all the code you have at the bottom to inside your the loader callback, you should see a difference.
// This is an asynchronous call, which may take some time.
loader.load('/assets/delvetiker_regular.typeface.json',
function(font){
// This function is a callback, and is only executed AFTER load completes
geometry = ...;
mat = ...'
// At this point, geometry DOES EXIST.
mesh = new THREE.Mesh(geometry, mat);
super(...);
});
//...
I'm also assuming the call to super adds the mesh to the scene, but if it doesn't, you'll also need to call scene.add(mesh) in the loader callback.
Buffergeometry isn't the issue. If you look at the source, most THREE.XxxxXxxxxGeometry uses BufferGeometry somewhere behind the scenes.
First thing i saw is you have no lights in your scene. Try MeshBasicMaterial to make sure it's working. Phong expects lights. MeshBasicMaterial will just paint it a flat color.
Also make sure that your camera is not positioned inside the model and then also call camera.lookAt(textmesh.position); to make sure it's not looking away.
I'm new to coding and everyday I learn something new. I want to have a masked scene with other 3D objects, that are from other scenes, to be behind and around it. At this moment I'm stuck with a masked scene. Right now I have this working. As u can see the background is grey and other 3D objects, that are from other scenes and behind the masked scene, can't be seen because of it.
How can I make the backround from masked scene to be transparent with other 3D objects from other scenes?
I think it has something to do with the fragmentShader, because I can change the background color by changing this line "vec4 background = vec4(1.0, 1.0, 1.0, 0.0);",.
Thanks in advance for all the help!
Update
I understand that the background is transparent on this previous link, but I fail to create a new scene with new 3D objects that is visible and is outside the masked scene. Just helping me make a new scene on that previous link would help me out with my problem.
I'm viewing a scene using threejs and the trackball camera. I try to get the view matrix from the camera, but its matrixworldinverse isn't updating. I do call updateMatrixWorld in my render function. The matrixworld is updating, just not the inverse. Any ideas why?
You need to do it yourself:
camera.matrixWorldInverse.getInverse( camera.matrixWorld );
Make sure camera.matrixWorld is updated first. Note that by default, it is automatically updated by the renderer.
three.js r.58
I've added some text to my scene with THREE.TextGeometry, and the text seems to be stuck in whichever xy plane I place it. Any way to have it adjust to always be in plane with the screen- readable for the user?
Try
mesh.lookAt( camera.position );
The local z-axis of the mesh should then point toward the camera.
To make the text always face the screen (rather than the camera):
mesh.quaternion.copy(camera.quaternion);
Note that this differs from object.lookAt(camera); since this will result in different orientation depending on where on the screen the object is located.
Object3D.onBeforeRender can be used to update the orientation on each frame. It might be useful to disable frustum culling using Object3D.frustumCulled = false; to ensure that the callback always is triggered.