three.js rectAreaLight up to date - javascript

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

Related

Anti Aliasing Three.js / WebGL

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;

Disappearing Objects - Three.js CanvasRenderer

I am very stuck, I do not understand why my objects are disappearing with canvas renderer. While it works exactly as expected with webGL renderer, I need to display this on mobile devices and as such do not have access to a webGL renderer
I have tried overdraw:true but this does not seem to make the missing objects disappear
http://jsfiddle.net/xH9GD/3/
When I comment out the room the boxes remain but they get very mangled on my iPhone.
I understand the concept of Z-fighting however I don't think this is occurring as the zPosition of each of the faces should be seperate to the others
floor = drawTopFacingWall(room.width, room.length );
wall1 = drawLeftFacingWall( room.length, room.depth );
wall2 = drawFrontFacingWall( room.width, room.depth );
wall3 = drawRightFacingWall( room.length, room.depth );
roof = drawBottomFacingWall( room.width, room.length );
wall4 = drawBackFacingWall( room.width, room.depth );
The "disappearing" geometry is caused by a limitation of CanvasRenderer due to the way it handles depth-sorting.
While WebGLRenderer sorts at the pixel level, CanvasRenderer sorts at the polygon level.
The best you can do is to increase the tessellation of your geometry.
var geometry = new THREE.PlaneGeometry( width, height, 10, 10 );
three.js r.66

ThreeCSG expand gives faulty mesh

I'm trying to create a rounded cube using the ThreeCSG expand function on a csg model, but the resulting mesh looks wrong. I can't figure out what the problem is though. Does anyone have experience with ThreeCSG and see what's up ? thanks. the code:
var a = CSG.cube();
var b = a.expand( 0.4, 6 );
this.m_scene.add( new THREE.Mesh( THREE.CSG.fromCSG( b ), new THREE.MeshNormalMaterial() ) );
the resulting mesh is here:
(source: jvanderspek.com)
thanks,
Jonathan
Your vertexNormals somehow fail. Seems they got "lost in translation".
Check my answer on another question here.
It might be the same problem.

Three.js shadows - how to improve?

I've been playing with three.js here - 2toria.com/pool
The issue I'm having is trying to get my shadows to look better. At the moment, they look like this:-
A bit pixellated. Is there a way I can make them look smoother, like here:-
I've tried a few things, but I can't find the right settings. My renderer is set up like this:-
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFShadowMap;
I thought shadowMapSoft would have done it, but no. Any ideas/help?
Indeed, I've had the same problem. My fix was to increase my light sources shadowMapWidth and Height. In my case it was a spotLight:
spotLight = new THREE.SpotLight( 0xAAAAAA );
spotLight.castShadow = true;
spotLight.shadowCameraFov = VIEW_ANGLE;
spotLight.shadowBias = 0.0001;
spotLight.shadowDarkness = 0.2;
spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;
Oh one more thing, if you increase the map size by power's of two you smooth out the shadow's more and more, but you will see a performance hit with complex geometry. So try 2048, maybe 4096 see how they work for ya.
I noticed you have renderer.shadowMapType. I'm gonna have to look into that, may make my own projects that much better, thanks :)

Making a rotation around a point

I'm using THREE API in order to realize some animations in my app. Now i have a real problem : i'd like making spherical rotation around a specific point. The "rotate" method included in mesh objects allow me to make them, but the center of the rotation is (by default i guess) the center of the mesh.
Then, i only rotate my objects around themself...
I have already found some examples, but they don't solve my problem. I tried to create objects 3D parents like groups, and tried to make the rotation around this groups after having translated them, but this still does not work...
Can you please give me a hand about that ?
I'm so sorry, i found my problem... Making a jsfiddle made me realize i forgot to instanciate my parent as " a new Object 3D() ", that was why i didn't see any objects in my scene when i used animation on my parent... i give you a short part of my code anyway dedicated to interested people finding any help :
// mesh
mesh = new THREE.Mesh( geometry, material );
parent = new THREE.Object3D();
parent.add(mesh);
// if i want my rotation point situated at (300;0;0)
parent.position.set(300,0,0);
mesh.position.set(-300, 0, 0);
scene.add(parent);
http://jsfiddle.net/KqTg8/6/
Thank you

Categories