Basicially I like to connect the right side of mesh 1 to the left side of mesh 2.
Currently, If I scale mesh1 I have to reposition mesh2 in order to have the same distance as before.
So let's scale mesh 1 to z: 2
var tween = new TWEEN.Tween(mesh1.scale).to({ z: 2 }, 1000).start();
tween.easing(TWEEN.Easing.Elastic.InOut);
In order to have the same distance to mesh 1 as before I have to reposition mesh 2 to z:1.5
var tween = new TWEEN.Tween(mesh2.position).to({ z: 1.5 }, 1000).start();
tween.easing(TWEEN.Easing.Elastic.InOut);
Are there any options in connecting the colored mesh faces. So If I scale mesh 1, mesh 2 automatically change it's position?
...
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var mesh1 = new THREE.Mesh( geometry,
new THREE.MeshPhongMaterial({color: 0x222222}));
mesh1 .position.set( 0, 0, 0 );
mesh1 .scale.set( 1, 1, 1 );
scene.add( mesh1 );
var mesh2 = new THREE.Mesh( geometry,
new THREE.MeshPhongMaterial({color: 0x222222}));
mesh2 .position.set( 0, 0, 1 );
mesh2 .scale.set( 1, 1, 1 );
scene.add( mesh2 );
This is a geometric problem.
I haven't worked with three.js before, but I believe I have a geometric solution.
Consider a third imaginary mesh, mesh3, such that it is a combination of mesh1 and mesh2.
That is:
mesh1: position(0, 0, 0), scale(1, 1, 1);
mesh2: position(0, 0, 1), scale(1, 1, 1);
mesh3: position(0, 0, 0), scale(1, 1, 2); // Loosely, mesh3 = mesh1 + mesh2
Now to scale the structure by a scalar k, I propose two approaches:
Approach 1:
Scale mesh1 and mesh3 each by k.
Compute the difference between mesh3 and mesh1, meshDiff.
Set mesh2 = meshDiff.
Approach 2:
Scale mesh3 by k.
Compute two halves of mesh3, mesh31 and mesh32, such that they are oriented along mesh1 and mesh2 respectively.
Set mesh1 = mesh31 and mesh2 = mesh32.
The approaches are very similar. Keep three.js's API in mind to choose the best approach.
Note: You needn't ever render mesh3. It only exists as a computational aid.
Generality:
The idea presented above can be used in other situations as well, wherein geometries sharing a common feature need to be scaled.
Hope this helps.
PS: I realize that this answer is a little abstract. Nonetheless, I hope it helps.
Related
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
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)
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 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 );
I want to make parts of a mesh invisible at runtime. Can I set these parts invisible/transparent, e.g. by changing attributes of single faces? The mesh itself uses only one material.
Exemplary illustration as the editor understands this question: Imagine a mesh (here with a geometry of 20 vertices) where each quad of four vertices builds up a Face4. Now, some parts of the mesh should be made invisible (here two faces are invisible).
Note: This answer applies to legacy versions of three.js
You can assign a different material to each face. Here is an example where the faces share a material, but some faces are transparent:
// geometry
var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
// materials
materials = [
new THREE.MeshLambertMaterial( { color: 0xffff00, side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { transparent: true, opacity: 0 } )
];
// assign material to each face
for( var i = 0; i < geometry.faces.length; i++ ) {
geometry.faces[ i ].materialIndex = THREE.Math.randInt( 0, 1 );
}
geometry.sortFacesByMaterialIndex(); // optional, to reduce draw calls
// mesh
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );
three.js r.87