I want to draw a triangle and i know only all angles (Alpha,Beta,Gamma) and all side length (10).
For drawing a triangle i need to set 3 vertices to geometry with absolute Vector3 values.
Is in THREE.js any integrated tool or practice fit for this?
geometry.vertices.push(
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( -10, -10, 0 ),
new THREE.Vector3( 10, -10, 0 ),
);
geometry.faces.push( new THREE.Face3( 0, 1, 2 ));
var material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
var mesh = new THREE.Mesh( geometry, material );
Only THREE method i can imagine is to create a 2 vector geometry with vector distance of side lengths, use matrix translation to set rotation pivot on vector[0] and change its position and rotation, each time set globalToWorld() for its vector[1]. But I think this is not a good solution.
I used this:
var length = 10;
var aplpha = 0.3;//rad
var beta= 1;//rad
geometry.vertices.push(
new THREE.Vector3(),
new THREE.Vector3(length ,0,0).applyAxisAngle(new THREE.Vector3(0,1,0),aplpha ),
new THREE.Vector3(length ,0,0).applyAxisAngle(new THREE.Vector3(0,1,0),beta ),
new THREE.Vector3(),
);
https://threejs.org/docs/#api/en/math/Vector3
THREE.JS r 96
Related
Any help from this great community would be such a blesing. I've recently been trying to figure out how to plot a set of points and faces that come from an XML file with Three.js.
The points look something like this:
<P id="1">472227.25640192 2943287.51179465 200.138787</P>
<P id="2">472232.14363148 2943288.56768013 200.129142</P>
<P id="3">472237.03086105 2943289.62356560 200.119496</P>
and the faces look like this:
<F>1021 1020 1061</F>
<F>640 754 641</F>
<F>1534 1633 1535</F>
Keep in mind that there are thousands of these faces and points and each of them has 3 numbers. I've converted to xml to json and done all the parsing required but when I try to do a sample of some of the points as lines in Three.js, I get nothing but a black screen. Here's what I tried. Is anything like I'm trying to do even possible with three.js? Is there a better alternative?
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );
var scene = new THREE.Scene();
var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( 472227.25640192, 2943287.51179465, 200.138787) );
geometry.vertices.push(new THREE.Vector3( 472232.14363148, 2943288.56768013, 200.129142) );
geometry.vertices.push(new THREE.Vector3( 472237.03086105, 2943289.62356560, 200.119496) );
var line = new THREE.Line( geometry, material );
scene.add( line );
renderer.render( scene, camera );
Thanks, any help is appreciated.
The vertices you define are putting the line outside of the viewport. For example, change the coords to
geometry.vertices.push(new THREE.Vector3(1, 2, 0));
geometry.vertices.push(new THREE.Vector3(3, 3, 0));
geometry.vertices.push(new THREE.Vector3(5, 6, 0));
and you will see the line.
-or-
If the values you're working with are as large as the ones in your example, move the camera waaaaaay back on the z axis. (you could also scale the values to something more manageable)
I am trying to construct a cube manually using three.js by declaring its vectors and faces; I am able to do it using the code below, however, the material does not seem to be working as expected, instead the cube is rendering in a solid black color.
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3( -1, 1, 0.1 ),
v2 = new THREE.Vector3( 1, 1, 0.1 ),
v3 = new THREE.Vector3( 1, -1, 0.1 ),
v4 = new THREE.Vector3( -1, -1, 0.1 ),
v5 = new THREE.Vector3( -1, 1, 2 ),
v6 = new THREE.Vector3( 1, 1, 2 ),
v7 = new THREE.Vector3( 1, -1, 2 ),
v8 = new THREE.Vector3( -1, -1, 2 );
geom.vertices.push(v1,v2,v3,v4,v5,v6,v7,v8);
geom.faces.push(
new THREE.Face3(0,1,3),
new THREE.Face3(1,2,3),
new THREE.Face3(4,5,7),
new THREE.Face3(5,6,7),
new THREE.Face3(1,4,5),
new THREE.Face3(0,1,4),
new THREE.Face3(2,3,7),
new THREE.Face3(2,6,7),
new THREE.Face3(0,3,7),
new THREE.Face3(0,4,7),
new THREE.Face3(1,2,5),
new THREE.Face3(2,5,6)
);
var mat = new THREE.MeshNormalMaterial();
mat.side = THREE.DoubleSide;
var cube = new THREE.Mesh( geom, mat);
scene.add(cube);
If I render the cube normally, using the code that follows, the cube renders as expected.
cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), new THREE.MeshNormalMaterial());
scene.add(cube);
You haven't specified vertex normals. For something quick, compute face normals, like so:
geom.computeFaceNormals();
but you should learn how to set vertex normals in your custom geometry.
Also, face "winding order" should be counter-clockwise. You are not consistently doing that.
If you define faces correctly, you can remove side = THREE.DoubleSide.
three.js r.90
I need to reverse vertex order in faces of my geometry.
In example:
// create geometry
var geometry = new THREE.Geometry();
// create vertices
geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 0, 100, 0 ) );
geometry.vertices.push( new THREE.Vector3( 100, 0, 0 ) );
// create face
var face = new THREE.Face3( 0, 1, 2 );
geometry.faces.push ( face );
// compute normals
geometry.computeFaceNormals();
geometry.computeVertexNormals();
// add to scene
var mesh = new THREE.Mesh(
geometry,
new THREE.MeshBasicMaterial({color: 0x00ffff})
);
scene.add( mesh );
Now I need to change order of vertices in face from 0,1,2 to 2,1,0. But when I do this manually it does not work no matter which flags for update I set to true.
The question - is it possible to reverse vertices order on the fly and if yes then how?
Important - It's better to avoid using negative scale for geometry in this case. And it's also better to avoid re-creating of object.
THREE.js: r73
delete mesh.geometry.__directGeometry;
This should apply yours changes. In some reason in r72 and r73 __directGeometry not updated automatically.
I'm on r68 and I'm trying to find an example of someone creating a rectangular pyramid which I can apply THREE.MeshFaceMaterial() to, most of the examples seem fairly out of date and throw errors with my current build.
I just need to be able to
Texturise each face
Rotate it so the rectangular face is at the -y position
Thanks in advance!
The accepted answer works only for pyramids with a base that has equal sides. In case you want a pyramid with a rectangular foot you can do like this:
var geometry = new THREE.Geometry();
geometry.vertices = [
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 0, 1, 0 ),
new THREE.Vector3( 1, 1, 0 ),
new THREE.Vector3( 1, 0, 0 ),
new THREE.Vector3( 0.5, 0.5, 1 )
];
geometry.faces = [
new THREE.Face3( 0, 1, 2 ),
new THREE.Face3( 0, 2, 3 ),
new THREE.Face3( 1, 0, 4 ),
new THREE.Face3( 2, 1, 4 ),
new THREE.Face3( 3, 2, 4 ),
new THREE.Face3( 0, 3, 4 )
];
Now you have a pyramid geometry with a square base of 1 x 1 and a height of 1. By applying a scaling matrix we can make this pyramid to any desired width/length/height combination:
var transformation = new THREE.Matrix4().makeScale( width, length, height );
geometry.applyMatrix( transformation );
This can also be wrapped in a custom Pyramid geometry class so you can use it like this:
new THREE.Pyramid( width, length, height );
As #WestLangley stated, using a THREE.CylinderGeometry() to do this is the correct way, here's how I did mine
var geometry = new THREE.CylinderGeometry( 1, TILE_SIZE*3, TILE_SIZE*3, 4 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00 , wireframe:true} );
var cylinder = new THREE.Mesh( geometry, material );
this.scene.add( cylinder );
Works perfect!
Use ConeBufferGeometry geometry and change radialSegments to 4
BufferGeometry are faster than normal Geometry
Other parameters you can tweak:
ConeBufferGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
Result:
Live Demo:
https://threejs.org/docs/#api/en/geometries/ConeBufferGeometry
I had created a shape using extrude geometry , and now with the extrude settings i need to increase the thickness i had used bevelThickness it increases the thickness along y axis , but need to increase it along x and z axis.
Here my working jsfiddle
Below is my code for extrude settings ,
var extrusionSettings = {
curveSegments:5,
steps: 10,
amount: 10,
bevelEnabled: true,
bevelThickness: 120,
bevelSize: 0,
bevelSegments: 8,
material: 0,
extrudeMaterial: 1
};
var geometry1 = new THREE.ExtrudeGeometry( shape1, extrusionSettings );
var materialLeft = new THREE.MeshLambertMaterial({
color: 0xd6d6d6,// red
transparent:true,
side: THREE.DoubleSide,
ambient: 0xea6767,
opacity:-0.5
});
var materialRight = new THREE.MeshLambertMaterial({
color: 0xcc49c3,//violet
side: THREE.DoubleSide,
ambient: 0xcc49c3
});
var materials = [ materialLeft, materialRight
];
var material = new THREE.MeshFaceMaterial( materials );
var mesh1 = new THREE.Mesh( geometry1, material );
object.add( mesh1 );
object.rotation.x = Math.PI / 2;
scene.add( object );
Below is sample image
is there any setting to increase it ? Can any one guide me ?
Finally i did the trick to fix it, What i did is just i cloned a Mesh add added the position to cloned mesh, so i got the wall nearby another inner wall, by this way i have added multiple clone with the loop, multiple inner wall nearby other created the wall thickens,
Demo : Fiddle
//outer wall mesh
var mesh1 = new THREE.Mesh( geometry1, material );
object.add( mesh1 );
var mesh_arr=new Array();
for(i=0.1;i<15;i++)
{
//cloned mesh,add position to the cloning mesh
mesh_arr[i] = mesh1.clone();
mesh_arr[i].position.set(i,i,i);
mesh_arr[i].updateMatrix();
object.add( mesh_arr[i] );
}