I'm exporting an object has gltf from substance painter and i'm importing it into my A-frame scene. However, the metallic outer material is shown dark in my current scene and other materials like plastic white are all visible. The scene already has ambient and directional lights. Unable to figure out this behaviour.
You need to add an Environment Map to your Metallic Materials, because metals especially shiny ones are mostly reflection. Light entities and ambient light are not sufficient to provide that.
Related
Is there a way to import three.js material qualities and scene items (like lights) into my shader material, in order to light it and cause it to cast shadows (on itself)?
I'm using react-three-fiber, and so haven't been able to find apprpriate resources yet.
Heres my code: https://codesandbox.io/s/r3f-wavey-image-shader-forked-nm3ykn?file=/src/App.js
I've set up a scene in Three.js with OrbitControls.js to allow for rotation and panning. I would like my lighting set-up to follow the camera, ensuring that the object in the scene is always illuminated. (Right now you can rotate to the "dark side" of the object).
I've tried to solve this problem by making each light a child of the camera:
scene.add(light);
camera.add(light);
However, this produce the desired effect. The only other way I can think of solving this problem is by keeping track of the camera's change in spherical coordinates and making the lights match those changes (but this is undesirable for a myriad of reasons).
I'm relatively new to Three.js so I'm hoping there is an easy solution that I'm just unfamiliar with. Thanks!
If you want you light to follow the camera, you can use a PointLight with the following pattern:
scene.add( camera );
camera.add( light );
three.js r.67
I'm implementing a little 3D maze game, rendering the walls as Meshes affected by a PointLight. Some objects will be implementes as Sprites, but I'm having an issue....the objects appear fully iluminated, a behavior like MeshBasicMaterial.
It's possible to have these Sprites affected by the light just like Lambert or Phong materials?
Instead of using a Sprite, why not use a PlaneGeometry with a MeshLambertMaterial, and keep the rotation of the plane in sync with the rotation of the camera so that the plane always faces the camera just as a Sprite does? See the related question Three.js - billboard effect, maintain orientation after camera pans for further details.
Having Sprites respond to lights is currently not supported. They are affected by Fog, however.
three.js r.62
I'm trying to build a camera calibration function for a three.js app and could very much do with some help.
I have a geometry in a 3d scene, lets say for this example it is a cube. As this object and scene exist in 3d, all properties of the cube are known.
I also have a physical copy of the geometry.
What I would like to is take a photo of the physical geometry and mark 4+ points on the image in x and y. These points correspond to 4+ points in the 3d geometry.
Using these point correlations, I would like to be able to work out the orientation of the camera to the geometry in the photo and then match a virtual camera to the 3d geometry in the three.js scene.
I looked into the possibility of using an AR lib such as JS-aruco or JSARToolkit. But these systems need a marker, where as my system need to be marker less. The user will choose the 4 (or more) points on the image.
I've been doing some research and identified that Tsai's algorithm for camera alignment should suit my needs.
While I have a good knowledge of javascript and three.js, My linear algebra isn't the best and hence am having a problem translating the algorithm into javascript.
If anyone could give me some pointers, or is able to explain the process of Tsai's algorithm in a javascript mannor I would be so super ultra thankful.
I was wondering if there's a way to project a shadow without have a "ground" plane where project it.
I'd like to do that because the camera can be moved around the object and would be ugly see it pass through the ground.
I'm using Three.js latest-version with the WebGl renderer.
Yes this is possible by applying ShadowMaterial to the plane geometry. This material can receive shadows and is completely transparent. so you just position the plane geometry at the desired location in the scene and you are good to go. check out this. https://threejs.org/docs/#api/en/materials/ShadowMaterial
This is technically impossible, you could write a shader that renders the shadow on a transparent plane, that way you would not notice it when the "camera" goes through the plane, only when it goes through the shadow itself.
To do so you can lerp between the shadowratio and a transparent black or white in the pixel shader and then set the corresponding blending states on the rendering context.