WebGL/Three.js set mesh offset - javascript

I have a question about three.js.
How do I set an offset to a mesh?
The basic code is available at: http://lukas.achatz.ws/tst/webgl_003.html
What I want is to set a position offset and also that point should be used as the rotation reference.
I tried: mesh.applyMatrix( new THREE.Matrix4().makeTranslation( -2, 0, 0 ) ); but this only moves the mesh in the scene.

You can simply do:
var group = new THREE.Group();
scene.add( group );
var mesh = new THREE.Mesh( ..., ... );
mesh.position.set( -2, 0, 0 );
group.add( mesh );

Related

Attention Three.JS experts! Need help mapping points and faces

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)

THREE JS geometry verticles set by known angle

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

THREE.JS Texture Mapping on ExtrudeGeometry

I'm working on a problem with three.js and ExtrudeGeometry.
I do have a wave-like structure which is made from several individual frames. Each of them is extruded using ExtrudeGeometry.
I'd like to apply a texture to each frame of the structure which is "wrapped around" the structure. For some reason (possibly wrong UV-mapping?) the texture does not display correctly on the extruded edges where the wave-like surface is out of level. (There are some tiny sections in the picture where the texture wraps correctly). I'm using the following script to apply the textures:
// create some simple Geometry
var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0,10 );
shape.lineTo( 100,7 );
shape.lineTo( 100,0 );
var extrudeSettings = {
steps: 2,
amount: 10,
bevelEnabled: false,
bevelThickness: 0,
bevelSize: 0,
bevelSegments: 0
};
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var texture = new THREE.Texture( image );
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture.repeat.set( 0.1, 0.1 );
var material = new THREE.MeshBasicMaterial( {map: texture} );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
Every help is much appreciated! Cheers!
Edit:
I've created this image to better illustrate the problem. White Arrows show, how the texture is supposed to wrap around the object. At some very rare spots it actually does!
Have a look at this example
https://threejs.org/examples/?q=geome#webgl_geometry_shapes
at row 70 there is a comment that states that texture.repeat must be set to (0.008, 0.008)

Reverse vertex order in THREE.js face

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.

how to draw sphere using math/sphere.js in threee.js?

Drawing the sphere with mesh function.
function DRAW_SP(x,y,z)
{
var geometry = new THREE.SphereGeometry( .02, 100,100 );
var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
var sphere = new THREE.Mesh( geometry, material );
sphere.position.set(x,y,z );
scene.add( sphere );
}
its working good , but how to draw the same using Sphere.js, given in three.js/doc under math?
i tried like this
var sphere1= new THREE.Sphere(new THREE.Vector3( -l/2, 0, 0 ), 1.0);
scene.add( sphere1);
its not working .. can any one give a simple example to use like this?
sphere.js is the mathematically version of a sphere. It doesn't draw anything. It is used for calculations.

Categories

Resources