Add polygon in A-frame - aframe

Is there a way to add polygon in A-frame? Kinda like:
<a-entity geometry="primitive:polygon;positions:x y z, ..., x y z;">
</a-entity>
?
Thanks.

There used to be a polygon-component, but it doesn't work with 0.5.0 or 0.6.0. So you have to make your own in three.js, by creating a component which adds a mesh to your entity:
let points = []; //vertices of Your shape
points.push( new THREE.Vector2( 0, 0 ) );
points.push( new THREE.Vector2( 3, 0 ) );
points.push( new THREE.Vector2( 5, 2 ) );
points.push( new THREE.Vector2( 5, 5 ) );
points.push( new THREE.Vector2( 5, 5 ) );
points.push( new THREE.Vector2( 2, 7 ) );
// scaling, not necessary:
for( var i = 0; i < points.length; i ++ ) {
points[ i ].multiplyScalar( 0.25 );
}
// Create new shape out of the points:
var heartShape = new THREE.Shape(points);
// Create geometry out of the shape
var geometry = new THREE.ShapeGeometry( heartShape );
// Give it a basic material
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// Create a mesh using our geometry and material
var mesh = new THREE.Mesh( geometry, material ) ;
// add it to the entity:
this.el.object3D.add( mesh );
Working fiddle here, it's the 'foo' component.
UPDATE
You can make the shape to a 3D object by extruding it along the z-axis, using:
var extrudedGeometry = new THREE.ExtrudeGeometry(shape, {amount: 5,
bevelEnabled: false});
You can find more information about extrusion params here. The amount is the 'thickness' of the object.
Working fiddle here.

Related

Adding points to Path.Circle first point is at 0,0?

Hello in a for loop whne I add points to a circle the first point is always at 0,0? and not at the beginning of the circle? sketch
var circle= new Path.Circle({
radius: 100,
position: [200,200]
})
splat= new Path.Circle()
splat.fillColor= 'pink'
var count= 40
var length= circle.length
for(var i = 0; i <= count; i++){
var offset= i / count * length
const normal = i === 0 || i === count
? new Point(0, 0)
: circle.getNormalAt(offset) * (Math.random() * 50);
const point = circle.getPointAt(offset).add(i % 2 == 0 ? normal
: -normal);
console.log(point)
splat.add(point)
splat.smooth({ type: 'catmull-rom', factor: 0.5 });
}
splat.closed= true
Thanks in advance
Your path should be created using the generic new Path() constructor and not the specific new Path.Circle() constructor which expects a center and a radius and creates a 0 wide circle at point 0,0 when you're not passing them.
splat= new Path.Circle() => splat= new Path()

Geometry in Plan (Math)

My problem is to know whether or not a point is contained in a polygon (sets of points) on the same surface.
Simple example in my favorite language DART
Point myPoint = new Point(10, 12);
List<Point> myPolygon = [ // The Polygon, for example is simple rect
new Point(2, 7),
new Point(15,7),
new Point(15, 18),
new Point(2, 18)
];
bool pointIsContainedInPolygon(List Polygon){
// .. data processing ...
}
I need to know what is the function: pointIsContainedInPolygon(myPolygon)
I have resumed the code data in the How can I determine whether a 2D Point is within a Polygon? post in dart, here is the result (tested)
bool pnpoly(Point point, List<Point> polygon){
// Step 1: Cut and detail
int nvert = polygon.length;
List<int> vertx = [];
List<int> verty = [];
for(Point vert in polygon){ // Listing x and y pos of all vertices
vertx.add(vert.x);
verty.add(vert.y);
}
// Step 2: Calcul..
bool c = false;
int j = nvert-1;
for (int i = 0; i < nvert; j = i++){
if( ((verty[i]>point.y) != (verty[j]>point.y)) && (point.x < (vertx[j]-vertx[i]) * (point.y-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ){
c = !c;
}
}
return c;
}
Here is my test
List<Point> myPolygon = [ // classic rectangle
new Point(2,2),
new Point(52,2),
new Point(52,41),
new Point(2,41)
];
Point myPoint = new Point(53,40);
print( pnpoly(myPoint, myPolygon) ); // false

Group an Array of Vectors according to certain Floors in Three.js

I have a list of Vectors which represent points on three different floors in three.js.
I am trying to group these vectors according to the floor they belong to. Is there a good formula to do this? Perhaps find height from on vector or something. Not sure how to go about this. Any help would be appreciated.
Thanks,
Rob
As Wilt said... Can't really help you without more info.
Still, if your floors are even and all stand on the xz plane (in my example), You may indeed check the points' height (position.y) against the floors'.
var container, renderer, scene, camera, controls;
var floors = [];
var points = [], materials = [], heights = [];
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
container = document.createElement('div');
document.body.appendChild(container);
container.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// camera + controls
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 50, 750);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
//floors
for(i=0; i<3; i++) {
var planeGeometry = new THREE.BoxGeometry(500, 500, 10, 10);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff * Math.random(),
side: THREE.DoubleSide,
transparent: true,
opacity : 0.3,
depthWrite : false //get rid of coplanar glitches wall/floor
});
materials.push(planeMaterial);
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = Math.PI / 2;
//plane.rotation.y = Math.PI / 8; //Uncomment to see this doesn't work if the floors move, i.e. changing rotation/position. If this is what you need, just raycast from point to floor in the animation loop and count how many floors the ray goes through (intersects.length)
plane.position.y = 75*i;
heights.push(plane.position.y);
floors.push(plane);
scene.add(plane);
}
//wall
var height = heights[2];
var planeGeometry = new THREE.BoxGeometry(500, height+100, 10, 10);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff * Math.random(),
side: THREE.DoubleSide,
transparent: true,
opacity:0.3,
depthWrite : false //get rid of coplanar glitches wall/floor
});
materials.push(planeMaterial);
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.y = heights[1]+45;
plane.position.z = -510/2;
scene.add(plane);
// points
for (i=0; i<200; i++) {
var sphereGeometry = new THREE.SphereGeometry(3, 32, 16);
var sphere = new THREE.Mesh(sphereGeometry);
sphere.position.x = Math.random() * 500 - 250;
sphere.position.y = Math.random() * 300 - 100;
sphere.position.z = Math.random() * 500 - 250;
scene.add(sphere);
points.push(sphere);
}
// events
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(event) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function addSpheres() {
//addSpheres
for (i=0;i<200;i++) {
var that = points[i].position.y;
points[i].position.y = ( that < heights[0] ) ? 200 : that - 0.5;
if ( that > heights[0] && that < heights[1] ) points[i].material = materials[0];
if ( that < heights[2] && that > heights[1] ) points[i].material = materials[1];
if ( that > heights[2] ) points[i].material = materials[2];
points[i].material.needsUpdate = true;
}
}
function animate() {
controls.update();
addSpheres();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
Now, feel free to "group" these points according to your needs.
Please note that "vectors" are different from "points". Read more about the difference.
Raycasting would be the way to go if you had a more complex scene (moving floors/different planes, points moving in different directions).

Three.js - Rotation of a cylinder that represents a vector

I am using three.js to create a simple 3d vector environment. I am using lines to represent all 3 vector compontens x, y, z and a line for the final vector representation. Problem is that setting the width of a line is not working in Windows. The workaround that I try to implement is placing a cylinder onto the line (see red object in image below).
That is my current result:
As you see I am not able to rotate the cylinder to the correct position.
I faced the problem that the rotation center of the cylinder is in the middle of the object, so I moved the rotation point to the beginning of the cylinder. But still, rotation is not working correctly. I guess, the rotations around the axis influence each other.
Here is the code:
// VEKTOR
var vektor = {};
vektor._x = 2;
vektor._y = 1.5;
vektor._z = 1;
vektor._length = Math.sqrt(vektor._x*vektor._x + vektor._y*vektor._y + vektor._z*vektor._z);
// CYLINDER
var cyl_material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
// cylinder which is our line that represents the vector
var cyl_width = 0.025; // default line width
var cyl_height = vektor._length;
// THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
var cylGeometry = new THREE.CylinderGeometry(cyl_width, cyl_width, cyl_height, 20, 1, false);
// translate the cylinder geometry so that the desired point within the geometry is now at the origin
// https://stackoverflow.com/questions/12746011/three-js-how-do-i-rotate-a-cylinder-around-a-specific-point
cylGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, cyl_height/2, 0 ) );
var cylinder = new THREE.Mesh(cylGeometry, cyl_material);
updateCylinder();
scene.add( cylinder );
And the function updateCylinder trys to do the rotation.
function updateCylinder() {
// ... stuff, then:
cylinder.rotation.x = Math.atan2(vektor._z,vektor._y);
cylinder.rotation.y = 0.5*Math.PI+Math.atan2(vektor._x,vektor._z);
cylinder.rotation.z = Math.atan2(vektor._x,vektor._y);
}
Here is the current demo: http://www.matheretter.de/3d/vektoren/komponenten/
What am i doing wrong with the rotation? How to implement it so that the cylinder is following the vector line?
Thanks for your help.
If you want to transform a cylinder so that one end is at the origin and the other end points toward a specific point, here is the pattern you can follow:
First, transform your geometry so one end of the cylinder is at the origin, and the other end (the top) is on the positive z-axis.
var geometry = new THREE.CylinderGeometry( 0, 1, length, 8, 1, true );
geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, length / 2, 0 ) );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
Then create your mesh, and call the lookAt() method:
var mesh = new THREE.Mesh( geometry, material );
mesh.lookAt( point );
three.js r.67

Ray.direction where camera (object) is looking at

I am doing simple collision detection and although I can easily detect up/down objects with a THREE.ray, I am having a hard time to find what's in front/back of a camera (or any object) when they rotate? I tried projecting a ray with a projector and to display how that ray shoots using helper arrow. Once I start rotating camera around Y axis, ray points to inverse direction or just acts weirdly...
ray = new THREE.Ray();
projector = new THREE.Projector();
vector = projector.projectVector( coll.getObject().matrix.getPosition().clone(), camera );
ray.direction = vector.normalize();
ray.origin = coll.getObject().matrix.getPosition().clone();
helper.setDirection(ray.direction.clone());
helper.position = ray.origin.clone();
I ended up setting a cube around my object attached to a camera and shooting rays through vertices added up, like this:
vertices = coll.getObject().geometry.vertices;
rad = coll.getObject().boundRadius+1;
var directions = {
"up": [4,1],
"down": [6,2],
"front": [3,4],
"back": [7,0],
"left": [5,6],
"right": [1,2],
};
var collisions = {
"up": {},
"down": {},
"front": {},
"back": {},
"left": {},
"right": {},
};
for (key in directions){
(directions[key].length > 1) ? localVertex = vertices[directions[key][0]].clone().addSelf(vertices[directions[key][1]].clone()) : localVertex = vertices[directions[key][0]].clone();
globalVertex = coll.getObject().matrix.multiplyVector3(localVertex);
directionVector = globalVertex.subSelf( coll.getObject().position );
ray = new THREE.Ray( coll.getObject().position.clone(), directionVector.clone().normalize(), 0, 1000 );
intersects = ray.intersectObjects(obj, true);
if (intersects.length > 0) {
distance = intersects[ 0 ].distance;
if (distance >= 0 && distance <= rad) {
collisions[key] = intersects[ 0 ];
} else {
collisions[key] = false;
}
} else {
collisions[key] = false;
++falseCount;
}
}
}
return (falseCount !== 6) ? collisions : false;

Resources