Can anyone offer suitable documentation for updating ThreeJS objects with Matrix4? I've found very few samples online, and they seem to use outdated syntax. In this post for example, the multiplySelf syntax is deprecated and the jsfiddle doesn't work.
I've had success getting the transformation to work during the init() function:
object.matrixAutoUpdate=false;
scene.add( object );
var m=new THREE.Matrix4(1,0,0,0,0,1.132,0,0,0,0,1.3,0,0,0,0,1);
object.applyMatrix(m);
But I'm specifically trying to activate a transition based on Matrix4 (a user clicks a button and the transformation happens as an animation). I'm having a lot of trouble getting the transformation to operate after the scene is loaded, so thanks in advance for any tips.
You should be able to do this:
object.matrixAutoUpdate = false;
object.matrix.set(1,0,0,0,0,1.132,0,0,0,0,1.3,0,0,0,0,1);
Related
Goal: I want to create a Web based experience where the user need to see a series of elements on the scene and later, I want to leave the user explore alone.
I have several objects around the scene and I want the camera to look at them one by one. I am using the lookat() method but is not working correctly. I found this example on Threejs:
http://jsfiddle.net/L0rdzbej/135/
But my example is not working like the previous example.
After the answer of #Mugen87 is working but with a little modification:
document.getElementById('cam').sceneEl.camera.lookAt
Access the camera in this way. You can see the example here:
https://glitch.com/~aframe-lookat-cam-not-working
Please click on the button "animate camera".
As mentioned in this thread, you have to remove or disable look-controls if you're overriding camera rotation manually. So you can do:
var cameraEl = document.getElementById('camera');
cameraEl.setAttribute('look-controls', {enabled: false});
to disable the controls, perform your lookAt() operations, and then enable the controls via:
cameraEl.setAttribute('look-controls', {enabled: true})
I finally could make it worked. I am new in Threejs and aframe and surely I don't understand rotation, positions,world coordinates good enough but I think I did a decent work. Here the link:
https://glitch.com/~aframe-lookat-camera-working
I hope will be useful for somebody on the future.
I'm working from the most recent examples I can find, and I still can't get shadowCasting to display.
barebones jsFiddle: https://jsfiddle.net/bitsofcoad/rw48tu93/
The point light should cast a shadow from the first mesh to the second.
According to https://github.com/mrdoob/three.js/wiki/Migration-Guide:
shadowMap.enable = true/false is correct syntax.
https://threejs.org/docs/#api/renderers/WebGLRenderer support that.
However, I get a syntax error if I use that label. Am I missing something?
Thanks
Enable shadows like so:
renderer.shadowMap.enabled = true;
And yes, if you are trying to update an outdated example, the Migration Guide can be helpful.
Other good resources are the three.js examples, as they are consistent with the latest three.js release.
three.js r.88
How can I dynamically turn on and off antialiasing and shadows in WebGLRenderer?
Simply changing the properties of anti-aliasing and shadowMapEnable does not work. I looked in the source and found a method updateShadowMap () but it was removed in release 69.
UPDATE: OK, the answer to the second half of the question I found here
https://github.com/mrdoob/three.js/issues/2466
As a result the following code works fine:
renderer.shadowMapEnabled = false;
for(var i in tiles.children)
tiles.children[i].material.needsUpdate=true;
renderer.clearTarget( sun.shadowMap );
You can't enable/diable antialiasing from a WebGL context after creation. The only way is to create a new context and submit all the buffers and textures again.
So, ideally you would only need to create a new WebGLRenderer with the antialias boolean. This doesn't work yet thought, but I'm working to have it working ASAP.
I'm working with the three.js editor where I parse an object from JSON format. As usual it first parses the materials and geometries, then I create meshes from it. While parsing materials I also load textures. The issue now is that I have to call...
object.geometry.uvsNeedUpdate = true;
object.geometry.buffersNeedUpdate = true;
... after the image for the texture completely loaded - but why?! The geometry never changed before, neither did its uvs or anything like it. It's still the plain old geometry, yet I always get a GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2 when trying to render. It only works with this "hack" although the geometry is always the same.
In my opinion it should also work perfectly when I update the uvs after object creation (or not at all). I didn't find anything in the three.js editor code that would update the geometry or its faceVertexUvs.
I know it's a bit of an abstract problem, I'm mainly looking for some hints or insights why this hack might be necessary.
Thanks!
Three.js "guesses" whether uvs are needed according to your used textures in bufferGuessUVType. If you want to preallocate uv buffers you can either init a map attribute with an empty THREE.Texture, update the geometry after the map was assigned, etc.
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