We Keep Coding

Buggy edges in three.js when using gltf

Does anybody know how to get rid of this bug?
It doesn't occur on stuff created in three.js code (as for example the tree is not a .gltf but handcrafted code). However, the "sheep-like" thing I imported through a gltf (exported by blockbench) and I mean yeah - this looks completely inacceptable. I tried different scales but the edges are bugged no matter what scale I set the sheep to.
const loader = new GLTFLoader();
loader.load( './sheep.gltf', function ( gltf ) {
var gltfO = gltf.scene;
//gltfO.scale.set(0.05, 0.05, 0.05);
gltfO.position.set(0,-sz/2,0);
scene.add( gltfO );
}, undefined, function ( error ) {
console.error( error );
} );

Turns out this is an issue with UV Mapping. At least I figured out a work around that one can apply in blockbench. Instead of just painting the rectangle in the UV you also need to paint the border OUTSIDE the rectangle. Not really a solution but it's at least a workaround. Probably doesn't work for non unicolor texture? I don't know. But it works in this case.

From AbstractMesh to Mesh in BabylonJS

I have a little problem:
I would like to use CSG on mesh imported using assetsmanager, everythins work ok but I cant reach to have a CSG object, that I think it's because I have an abstractmesh and not a mesh,
So how to convert AbstractMesh to mesh? My bad part of code is that:
assetsManager.onFinish = function(task)
{
var prova = task[0].loadedMeshes[0];
aCSG = BABYLON.CSG.FromMesh(prova);
I get "Cannot read property '0' of null", that I think because loadeMeshes return an Array of AbstractMesh as the documentation here:  https://doc.babylonjs.com/api/classes/babylon.meshassettask#loadedmeshes
but BABYLON.CSG.FromMesh() method need a Mesh type as you can see in the documentation here: https://doc.babylonjs.com/api/classes/babylon.csg#frommesh
Could someone help me?
Thnak you

I don't think this is the issue. Can you make sure that prova object is the mesh that you want? sometimes they are non geometric root meshes

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;

three.js rectAreaLight up to date

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

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