I use three.js's SphereGeometry build an earth , and I want add a blue atmosphere to make it look better.
How can I do that?
Now the earth is looking like this
I want to render the atmosphere like below (just don't know how to render the light, maybe it called glow):
Using a custom shader like this:
http://stemkoski.github.io/Three.js/Shader-Glow.html
Or just use this ready made threex atmosphere-glow extension:
https://github.com/jeromeetienne/threex.geometricglow#threex.atmospherematerial.js
Result: http://jeromeetienne.github.io/threex.planets/examples/earth.html
Related
I'm working on a little project with react-three-fiber. If I load my .gbl 3D Model into the scene it's completly dark even if I use the ambientlight in the canvas. But in the three.js editor it looks exactly like I want it if I use the Modeviewer environment. Is it possbile to download this environmet somewhere and use it in my project?
yes, the stage component from the drei library https://twitter.com/0xca0a/status/1402975317174726656 all you need is wrap your model into <Stage>. as for models being dark even with ambientlight, this is usually related to wrong materials, for instance metalness=1. take a look here: https://discourse.threejs.org/t/ambient-light-and-gltf-models-not-working-results-in-black-model/7428/5
I am looking for autorotate functionality like in Orbital controls. I found the rotateCamera() in Threejs Docs. Not sure how to use it or call it. Can anyone tell me how to use it?
TrackballControls does not support auto rotate. The mentioned method rotateCamera() is intended for internal use only. It's actually called by update().
You have two options now:
Use OrbitControls
Create a custom version of TrackballControls and implement the auto rotate feature by yourself.
First please excuse my bad english writing and please note that I am a Javascript NOOB!
I am currently developing a website for a client where I am presenting different kind of "wood cut" in webgl but I am unable to get the desired look an feel...
My goal is to make the viewer look and react like what we can see at Sketchfab.
http://sketchfab.com/show/9f7e1e088f0943b697e809f224f8c76d
The rotation is limited to a certain angle and the model always stay in the right position... With Trackballcontrols the model rotate all the way and its a mess. I have tried to change the quaternion as follow:
from:
_this.object.up.applyQuaternion( quaternion );
to:
_this.object.up.applyQuaternion( new THREE.Vector4(0,0,0,1) );
but it behave weird when I reach a certain angle, the model become jumpy...
Then I tried with Orbitcontrols but it seems that there is no dynamicDamping because the controls are really "dry". I prefer a smoother effect...
1- So is there a way to use Orbitcontrols and get the dynamicDamping to work?
2- Is it possible to modify Trackballcontrols to get the desired result?
an example of my models are here:
http://www.boissilvac.ca/new/nosproduits/patron19
Thank you for your time
I have been using advanced renderers like Vray to render gemstones (offline). I am working on a project to render them in real time using three.js
I am not a 3D expert and am wondering if its possible to implement some of the more advanced refraction, reflection shaders to simulate a sparkling/faceted gemstone, and if so where can I find the code to implement it
For simulated refraction and reflection using cubemap shaders within Three.js, I would look at the source within this demo: http://stemkoski.github.io/Three.js/Bubble.html
For accurate Raytracing using Javascript (similar to VRay or other photon-lighting techniques): http://29a.ch/2010/6/2/realtime-raytracing-in-javascript
I am trying to simulate the OpenGL flat shading model using Three.js. My idea is creating an example like http://en.wikipedia.org/wiki/File:Phong-shading-sample.jpg. I was trying to change some different shading models but I cannot obtain the desired result.
Is it possible to create this scene in three.js?
Thanks in advance
Materials e.g. the MeshBasicMaterial have an option called "shading". It can be set to THREE.None, THREE.FlatShading, THREE.SmoothShading.
I am not sure if you need a light source in the first place or wether you have to enable shading for a the whole scene. Look at the demos at the Three.js website for something with shading.