While checking three js apis, Object3D.matrixWorldAutoUpdate properties exists in the documentaion here, which says:
.matrixWorldAutoUpdate : Boolean
Default is true. If set, then the renderer checks every frame if the object and its children need matrix updates. When it isn't, then you have to maintain all matrices in the object and its children yourself.
But when I try this in aframe 1.3.0 environment, I found no matrixWorldAutoUpdate properties in my Object3D, I import aframe like
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
make object3d like:
var scene = new THREE.Scene();
var material = new THREE.MeshLambertMaterial({
color:0x0000ff,
// wireframe:true,
});
var mesh = new THREE.Mesh(geometry, material);
mesh.translateY(1);
var group = new THREE.Group();
group.translateY(-1.33);
group.add(mesh);
scene.add(group);
both mesh and group object dont have matrixWorldAutoUpdate properties.
Question:
1.is Aframe using specific version of three js rather than three js master or realse tags? if so, how do I check the version of three js that Aframe building from? How could I check the original three js source code?
2.what's the design purpose or usage example of matrixWorldAutoUpdate properties? if it's false, it means matrixworld is not calculated from its position/rotation/scale? and we could set it's matrixworld directly? ignoring the local matrix properties?
thanks!
A-Frame is using a forked version of three.js called super-three.
Basically from what I can tell the super-three version tells you the three.js version.
The version of super-three being used in A-Frame tag 1.3.0 is ^0.137.0 and can be found in the package.json. This version of super-three uses release r137 of Three.js.
You can check the source code of the three.js being used by super-three. It's likely that they haven't rebased the fork to a recent version of three that includes matrixWorldAutoUpdate functionality.
If you're wondering why they're doing this, there are a few discussions on Github worth checking out:
Why are you using "super-three"
Changing A-Frame's THREE relationship
Edit:
Noticed you already asked the question in the Github issue. Answer from Vincent Fretin:
#flankechen The feature you're talking about was merged in three r144,
so it's not in aframe 1.3.0 that uses three r137. Aframe master is
currently using r144 via super-three fork that add some features back,
see the 8 latest commit in the branch
https://github.com/supermedium/three.js/commits/super-r144 You
currently need to do your own build from master, the bot is down.
Related
AFrame 1.1.0 is using THREE.js 123, which by default is now using WebGL2.
Some AFrame components are not working with WebGL2 yet. It would be great if we could use the AFrame with WebGL1. THREE.js still supports WebGL1 rendering.
When creating the renderer, you can pass your own canvas and context to the constructor, instead of letting the engine create its own. So you could simply grab the <canvas> HTMLElement, request a WebGL1 context from it, and use them when initializing the renderer:
var myCanvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');
var renderer = new WebGLRenderer({
canvas: myCanvas,
context: gl
});
According to the maintainer of AFrame, this is not possible currently with 1.1.0.
AFrame creates its own canvas in a-scene.js setupCanvas(), so you can't pass in one with the webgl1 context already set.
We ended up making a patch to our own version of AFrame. You can see the logic here for specifying whether or not to use WebGL2 vs WebGL1 using the renderer system.
https://github.com/8thwall/8frame/commit/533c4304f20153834a85f60a19e161e61ce71ec6
Even with the patch, there are still issues with webgl1 around shader GLSL compatibility.
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
Is there a way I can update a three.js material without hiding the object it is applied to.
The only thing I came up with was to clone the object and the material, update the cloned material using material.needsUpdate = true and replacing the original object with the cloned one.
Is there a better solution for this?
Ok it was a stupid mistake on my side. I changed my code to use THREE.TextureLoader() and preload the texture. Now everything is working fine.
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