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
Related
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.
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 am developing a web application that uses 3d buildings as models. I want to create a button that places the camera so that the model is in a suitable position, however when I rotate the camera manually the mouse control resets it again.
Sample here:Link
If I enable //controls.update() the rotation doesn't work. With //controls.update() disabled the camera rotate fine but when I use the mouse, the camera is reset.
¿What can I do? Thanks!
You shouldn't directly change the rotation of the camera, instead you should change the position+target.
When you call controls.update() the rotation of the camera will be calculated based on the position of the camera (the location of the camera) and the target of the controls (the location of focus).
For example you can do:
controls.target.set(0,0,1);
camera.position.set(-0.041, 1.9, -1.21);
controls.update();
I'm getting started with three.js, and I don't want to use WebGLRenderer (renderer = new THREE.WebGLRenderer();) at all. Instead I want to use renderer = new THREE.CanvasRenderer();.
I don't want to use WebGLRenderer due to lack of support.
How can I have a camera orbit without using WebGLRenderer, and use canvas only in three.js?
The three.js site has a small but effective set of Canvas samples as well. Just take a look at the source of https://threejs.org/examples/#canvas_camera_orthographic: it has an orbiting camera. It is orthographic, which you might not want, but the source should be self-explanatory on how to change it to a perspective camera.
How make an Update function in Three.js, like in Unity3d?
I mean, that i create an object:
var torus = new THREE.Mesh(
new THREE.TorusKnotGeometry(60,20,100),
reflectionMaterial
);
and when i click on the body, i change a reflectionMaterial. But the image don't change, i see a not changed reflectionMaterial (last figure). Always redrawing a render image???
Thank's for attention. Sorry for my English (I'm from Ukrainian).
P.S.: I work with Three.js onn my netbook and on (not my) notebook. On netbook i don't see a shaders. Why?? Did the Three.js support Shader Model number 3 and 0?
If I understand your question, you are having issues changing a material after you click on something? You may need to change a flag depending on if you already have a material or not, there are some dependencies - check the link below:
material.needsUpdate = true;
There is an article on How to update things in Three.js