I have an issue with anti aliasing when i spin model with orbiter
i am using
renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true,
antialias: true });
it is helping but not resolving the issue fully.
in this position it looks ok:
Does anyone know how to resolve this? or have any idea what else can i try? ( code sample would be appreciated )
Thanks
EDIT:
Ok i have added this:
renderer.setPixelRatio(2);
and it has improved a LOT ( see result bellow ), but still shows a bit,
anyone has any other idea suggestion?
I am not completely sure if this will do the trick but it might be worth a try.
Using the example below, set your textures anisotropy to the renderers max anisotropy. (i am using the webglrenderer) this should enabel antialiasing on this texture and reduce jagged lines like in the first image.
texture.anisotropy = renderer.getMaxAnisotropy().
Are the lines textures?
If so, I had a simular issue then depending on the camera position not completely on top my texture would get blurry. Maybe this helps for you:
texture.minFilter = THREE.LinearFilter;
So this abandoned? feature of three.js seems to have become somewhat of a holy grail; I've tried to implement it a couple of times unsuccessfully.
The example working on an old release is here: https://threejs.org/examples/#webgl_lights_rectarealight
My minimal broken example is here:
https://jsfiddle.net/bitsofcoad/1k3arL33/
var width = 20;
var height = 20;
var rectLight = new THREE.RectAreaLight( 0xffffff, 500, width, height );
rectLight.intensity = 500.0;
rectLight.position.set( 0, 30, 0 );
rectLight.lookAt( mesh2.position );
scene.add( rectLight )
var rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );
I have made sure to include the proper rectarealight library in the jsfiddle.
This thread was particularly enlightening on the topic of why this PR had some difficulties:
https://github.com/mrdoob/three.js/pull/9234
And this thread was interesting to see how far other people had gotten in developing a similar type of light for three.js:
Improved Area Lighting in WebGL & ThreeJS
I don't really know what happened to break abelnation's example, or even if it is completely broken ( I may have screwed up my jsfiddle... ), but I think there is still considerable interest in this feature.
The soft edges look so nice, I'm tempted to cannibalize WestLangley's custom shader (http://jsfiddle.net/hh74z2ft/89/), which has pretty much all the functionality I need.
Anybody else able to get the basic functions working? Thanks!
Both MeshStandardMaterial and MeshPhysicalMaterial support area lights. The other materials do not.
three.js r.89
It seems that with three.js, a face facing away from a spotlight still receives shadows caused by other meshes between this face and the spotlight. How can we avoid such shadows?
See this jsfiddle for example. In this example, we have a simple scene with a spotlight, an ambient light, a cube, a sphere, and a camera. The frustum of the shadow camera of the spotlight is set to visible.
As we can see, the sphere casts shadow on the farthest face of the cube from the sphere, but this looks wrong because this face is facing away from the spotlight and is not lit by it. I would like to avoid this.
Please note that this jsfiddle is a simplified version of what I would like to achieve. In the actual code, the mesh shape is more complicated and the camera is moved around, and because of these, neither turning off the shadow nor reducing shadowCameraFar is an option for me.
Here is what I think is the most relevant part of the code. See the link to jsfiddle above for the full code.
sphereMesh.castShadow = true;
...
cubeMesh.receiveShadow = true;
...
light.castShadow = true;
light.shadowCameraVisible = true;
light.shadowCameraNear = 200;
light.shadowCameraFar = 1000;
light.shadowCameraFov = 30;
light.shadowBias = 0;
light.shadowDarkness = 0.5;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
...
scene.add(new THREE.AmbientLight(0x404040));
...
var renderer = new THREE.WebGLRenderer();
...
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFShadowMap;
The third figure in question “really weird ghosty shadows using three.js” by Eno seems to illustrate the same issue, but it is not the main point of that question, and I do not find the answer to my question in the answer to that question.
In this fiddle, when i change the following parameters i do not see any visible change(s)
directionalLight.shadowCameraVisible = true;
directionalLight.shadowCameraLeft = 1000;
directionalLight.shadowCameraRight = 1000;
directionalLight.shadowCameraBottom = 1000;
directionalLight.shadowCameraTop = 1000;
Are there any hidden setting(s)? What is functionality of these parameters.
Documentation does not help either, Any suggestions?
Those parameters affect only orthographic camera. So you need to set your camera to THREE.OrthographicCamera(). Here is some tutorial on how to use shadows: Casting Shadows.
Generally, you don't see any visible changes because you only have one cube on your scene, so there is nothing that you are casting your shadow on. Add some more geometries to your scene and see how you can settle things based on this tutorial.
Hope that helps!
In Three.js, I want a camera to be pointed at a point in 3D space.
For this purpose, I tried using the camera.lookAt function like so:
camera.lookAt(new THREE.Vector3(-100,-100,0));
However, I found out that the call has no effect whatsoever. It just does nothing at all. I tried changing the numbers in the vector, and I always get the same look on screen, when it should be changing.
I just found now that if I remove the THREE.TrackballControls I have in my code, the camera.lookAt() works as it should. Is there something wrong with how I use THREE.TrackballControls? This is how I initialize them:
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 10.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 1.0;
var radius = 5;
controls.minDistance = radius * 1.1;
controls.maxDistance = radius * 100;
controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]*/
And then in my render function I do:
function render() {
controls.update();
renderer.render(scene, camera);
}
Documentation on Three.js is pretty scarce, so I thought I'd ask here. Am I doing something wrong?
Looking at the source code of THREE.TrackballControls, I figured out that I can make the camera look where I want by setting trackballControls.target to the THREE.Vector3 I want it to look at, and then rerendering the scene.
Yes Please beware... It seems that having THREE.TrackballControls or THREE.OrbitControls seems to override the camera.lookAt function as your are passing in your camera when you instantiate an instance of the controls. You might want to get rid of the controls and then performing camera.lookAt() or tween your camera some other way to verify that the controls are having a overriding effect on your Camera. I googled for a while why camera.lookat() seemed to have no effect.
In my opinion, we are not supposed to mess with the original code. I found a way around to achieve the objective of looking at any particular point.
After having declared your "control" variable, simply execute these two lines of code:
// Assuming you know how to set the camera and myCanvas variables
control = new THREE.OrbitControls(camera, myCanvas);
// Later in your code
control.object.position.set(camX, camY, camZ);
control.target = new THREE.Vector3(targetX, targetY, targetZ);
Keep in my mind that this will switch the center of the focus to your new target. In other words, your new target will be the center of all rotations of the camera. Some parts will be difficult to look at as you became familiar to manipulate the camera assuming the default center. Try zoom in as much as you can and you will have a sense of what I am saying
Hope this help.
I figured it out. To prevent THREE.TrackballControls or THREE.OrbitControls from overriding camera.lookAt upon initialization, you need to change the line that sets the control's target property to equal the sum of the camera.position vector and the camera.getWorldDirection() vector, instead of how it's currently implemented using a new THREE.Vector3() (which defaults to (0, 0, 0)).
So, for THREE.TrackballControls, change line 39 to:
this.target = new THREE.Vector3().addVectors(/*new line for readability*/
object.position, object.getWorldDirection());
Same goes for THREE.OrbitControls, on line 36.
I actaully haven't tested it on TrackballControls.js but it does work on OrbitControls.js. Hope this helps.
Here's an alternative solution: create an object (i.e. cube) with 0 dimensions.
var cameraTarget = new THREE.Mesh( new THREE.CubeGeometry(0,0,0));
In the render function set the camera.lookAt to the position of the cameraTarget.
function render() {
camera.lookAt( cameraTarget.position );
renderer.render( scene, camera );
}
Then just move cameraTarget around as you wish.
I ran into the same problem and was able to make it work by using OrbitControls.target. Below is what I did after declaring a controller.
controller = new THREE.OrbitControls(camera, renderer.domElement);
controller.addEventListener('change', renderer.domElement);
controller.target = new THREE.Vector3(0, 1, 0);