I'm trying to make a simulation consisting of many lines. Up until now I had Three.js v45 and Trackball Controls and it worked fine.
I then tried to implement my lines in a buffer geometry (as in this example: http://fzwoch.project-sheol.org/three.js/examples/webgl_buffergeometry_lines.html)
but for that I needed to update to the newer Three.js build. And Trackball Controls doesn't work anymore! Am I missing something? How can I get both to work?
Thank you,
Kasia
First have you noticed that the controls changed location? Now you have to add in your html file:
<script src="three.js/examples/js/controls/TrackballControls.js"></script>
You should also check the migration notes https://github.com/mrdoob/three.js/wiki/Migration to see if anything else changed for your code from the r45 release to r55 (current).
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.
recently updated a simple three.js scene from ~ r74 to r94. Textured materials are loading correctly but LineBasicMaterial is not showing. All references to materials are giving the error ".shading has been removed. Use the boolean .flatShading instead."
I can't find where .shading is being referenced. I'm just using three.js, not referencing any other three-related js files.
I found one thread saying to check the dependencies have been updated, but I don't know how to do this and assumed everything was just in the three.js file.
Does anyone have any ideas where .shading is being set please?
Many thanks.
LineBasicMaterial does not respond to lights, and never has.
LineBasicMaterial does not utilize the .flatShading property.
The .flatShading property is only used when rendering meshes.
three.js r.94
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
Since I still can't comment on this answer, I'll make a new question.
Previous iterations of r74dev allowed you to have an environment map and fake some sort of IBL, allowing you to have an unlit scene looking nice (in both examples, a single white directional light is at the left, just for the demo, the right part is how it looks unlit).
This was fine for the little project I was doing, but now, lightning is taken into account, relegating the environment map to "just" that.
Is it possible to replicate the functionality so that it works with the final r74 release?
The r74dev I use have some quirks such as having to set roughness to -0.999 so the surface is fully smooth, and I understand the behaviour in general wasn't the most correct one.
EDIT: New pics and JSFiddle of the pics, here.
Change the script tags in the HTML to switch between versions:
<!-- Current development three.js -->
<script src="https://rawgithub.com/mrdoob/three.js/dev/build/three.js"></script>
<!-- Three.js from the 8th of november -->
<script src="https://rawgithub.com/mrdoob/three.js/becea58835be00da49fae6695098769300689766/build/three.js"></script>
Thanks for the help
Im trying to use last threejs version to load a Collada Loader. Furthermore, I just want to make a mouse over events.
I've been reading (and analyzing a lot of examples) about this on related forum, there is a problem about intersectObjects (this function makes possible mouse over evet).
Question is simple: How can I code mouse over events on pieces of my model?
Here is my example but It is not using the latest version of the threejs library.
Nothing else at the moment, I think It is so hard to begin with this library, there isn't so much documentation...
My root issue is when mouse is out of canvas, threejs detects mouse over some piece of my model and through the event... I think if I update threejs this may be fixed
Thank you!!!
As far as I can see you already implemented intersectObjects.Try using this on your canvas:
position : absolute,
top : 0px
Seems to me that you dont use the right mousePosition for the calculation. Try using the relative mousePosition of the canvas and not of the document. And I would not check for intersection on every render call. Maybe on a mouseMove event or on an interval.