threejs AnimationClip Example needed - javascript

in threeJS: I have an object3D and want to do simple keyframed Animations with it: Move, Rotate, Scale.
There is a simple example here: https://threejs.org/examples/#misc_animation_keys but it does not work anymore since Animation has changed completely animation rotation switched to quaternion in threeJS some time ago.
I am searching for a very simple example like that, but working with the new Animation system, i already googled it and did find nothing. There is no documentation on the threeJS Page.
Using Blender or Collada to create the animation is not an option, since i have imported the model from a step file, which is supported by neither one.
EDIT I have solved the problem with the example, but i still have problems, since i want to animate a nested Object3d, but only the root Object3d, so i specified keys only for the root object not the whole hierarchy. But it throws an error cause the animation keys hierarchy has not the same structure than the root Object3d hierarchy. But this is another problem and needs another question

The problem with the example was, that rotation in animation keys is now specified as quaternion, not as Euler rotation like in the example. So adding a fourth value (1) to the rotation param made it work.

Finally found one good example with setting desired values in key frames:
Misc animation keys
Full source can be found by inspecting that page.
Here is pasted essential part:
// create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
// Note: the keyframe track type should correspond to the type of the property being animated
// POSITION
var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );
// SCALE
var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );
// ROTATION
// Rotation should be performed using quaternions, using a QuaternionKeyframeTrack
// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported
// set up rotation about x axis
var xAxis = new THREE.Vector3( 1, 0, 0 );
var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
// COLOR
var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
// OPACITY
var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
// create an animation sequence with the tracks
// If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );
// setup the AnimationMixer
mixer = new THREE.AnimationMixer( mesh );
// create a ClipAction and set it to play
var clipAction = mixer.clipAction( clip );
clipAction.play();
Animation has 3 key frames [0,1,2] = [initial,final,initial]
Position array [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] means (0,0,0) -> (30,0,0) -> (0,0,0)

I find only this one:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_animation_scene.html
Also, was able to write one myself:
//Let's create a mesh
this.mesh = new THREE.Mesh( geometry, material );
this.clock = new THREE.Clock();
//Save this mixer somewhere
this.mixer = new THREE.AnimationMixer( this.mesh );
let animation = THREE.AnimationClipCreator.CreateRotationAnimation(100, "y");
this.mixer.clipAction(animation ).play();
//In the animation block of your scene:
var delta = 0.75 * clock.getDelta();
this.mixer.update( delta );
This is going to rotate the given mesh around of the y axis.

Related

Customize PlaneGeometry edges for each segment in ThreeJS

Currently PlaneGeometry has an option to change segment width and height but this has no effect on edges. Each segment currently has indexed positions to create an 'N' shape when viewing the geometry in wireframe mode:
Indexes currently are:
0 = South West
1 = North West
2 = South East
3 = North East
This gives us an 'N' shape for each segment with wireframes, however instead of this 'N' Shape i would like to create an 'X' shape with edges for every segment. Currently i'm using planes to create different heights and having an 'X' shape would make the result look less edgy shaped (screenshots below).
I think all required vertices already exists, but how is it possible to get an extra edge between point 0 and 3 for each segment?
I've tried looking for the answer online but couldn't find a clear answer on this matter, besides many articles are older than version R125 which made breaking changes to Geometries. Currently I'm using version R135.
I'm guessing i will need to create a custom Buffer Geometry, but am in doubt of how to execute this properly and not losing too much performance.
All red and blue lines are currently existing edges in wireframe mode.
All green lines are desired and currently not existing, what would be the best way to do this without losing performance?
Thanks in advance!
It took me a fair amount of attempts but in the end it didn't turn out to be too hard. I've created this custom PlaneGeometry by creating a custom BufferGeometry. Although it's probably 3x heavier to use;
At the moment it holds 36 (12 * 3) positions per tile segment as where the default PlaneGeometry holds 12 (4 * 3) positions. Although i'm not sure if 3x more positions automatically means 3x more performance usage, but it definitely uses more than the default PlaneGeometry.
Here are the results (changes in height smoothen out prettier):
Code to create the geometry:
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
// (North Face)
.5, -.5, 0, // 0: Center
1, -1, 0, // 1: NE
1, 0, 0, // 2: NW
// (East Face)
.5, -.5, 0, // 3: Center
0, -1, 0, // 4: SE
1, -1, 0, // 5: NE
// (South Face)
.5, -.5, 0, // 6: Center
0, 0, 0, // 7: SW
0, -1, 0, // 8: SE
// (West Face)
.5, -.5, 0, // 9: Center
1, 0, 0, // 10: NW
0, 0, 0, // 11: SW
]);
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
const mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x = - Math.PI / 2;
scene.add( mesh );

Flipping Face Normal ThreeJS but not on floor

I try to build a house generator based on a floorplan. Generating the mesh works fine, but now I need to flip the normals on some faces.
buildRoomMeshFromPoints(planeScalar, heightScalar){
var pointsAsVector2 = []
this.points.map(e => {
pointsAsVector2.push(new THREE.Vector2(e.x * planeScalar, e.y * planeScalar))
})
var shape = new THREE.Shape();
shape.moveTo(pointsAsVector2[0].x, pointsAsVector2[0].y)
pointsAsVector2.shift()
pointsAsVector2.forEach(e => shape.lineTo(e.x, e.y))
const extrusionSettings = {
steps: 2,
depth: heightScalar,
bevelEnabled: false
};
var roomGeometry = new THREE.ExtrudeGeometry( shape, extrusionSettings );
var materialFront = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var materialSide = new THREE.MeshBasicMaterial( { color: 0xff8800 } );
var materialArray = [ materialFront, materialSide ];
var roomMaterial = new THREE.MeshFaceMaterial(materialArray);
var room = new THREE.Mesh(roomGeometry, roomMaterial);
room.position.set(0,0,0);
room.rotation.set(THREE.MathUtils.degToRad(-90),0,0)
return room;
}
This is the code that generates the house based on a collection of 2D points. To make the walls see through, I wanna change the normals of all walls and the roof.
My approach would be to compare each face normals angle to an up vector (THREE.Vector3(0,1,0)) and if the angle is greater then 0.0xx then flip it. I simply have no idea how to flip them :)
Thanks for any help!
Greetings pascal
In simplest terms, "flipping" or finding the negative of the normal (or any) vector is a matter of negating each of its components. So if your normal vector n is a THREE.Vector3 instance, then its negative is n.multiplyScalar(-1), or if it's in an array of the form [ x, y, z ], then its negative is [ -1 * x, -1 * y, -1 * z ].
Flipping the normal vectors won't do all of what you're looking to accomplish, though. Normals in Three.js (and many other engines and renderers) are separate and distinct from the notion of the side of a triangle that's being rendered. So if you only flip the vectors, Three.js will continue to render the front side of the triangles, which form the exterior of the mesh; those faces will appear darker, though, because they're reflecting light in exactly the wrong direction.
For each triangle, you need to both (a) flip the normals of its vertices; and (b) either render the back side of that triangle or reverse the facing of the triangle.
To render the back side of the triangle, you can set the .side property of your material to THREE.BackSide. (I have not tested this, and it may have other implications; among other things, you may come across other parts of your codebase that have to be specifically written with an eye to the fact that you're rendering backfaces.)
A more robust solution would be to make the triangles themselves face the other way.
ExtrudeGeometry is a factory for BufferGeometry, and the vertex positions are stored in a flat array in the .attributes.position.array property of the generated geometry. You can swap every 3rd-5th element in the array with every 6th-9th element to reverse the winding order of the triangle, which changes the side that Three.js considers to be the front. Thus, a triangle defined as (0, 0, 0), (1, 0, 1), (1, 1, 1) and represented in the array as [ 0, 0, 0, 1, 0, 1, 1, 1, 1 ] becomes (0, 0, 0), (1, 1, 1), (1, 0, 1) and [ 0, 0, 0, 1, 1, 1, 1, 0, 1 ]. (Put differently, ABC becomes ACB.)
To accomplish this in code requires something like the following.
/**
* #param { import("THREE").BufferGeometry } geom
* #return { undefined }
*/
flipSides = (geom) => {
const positions = geom.getAttribute("position");
const normals = geom.getAttribute("normal");
const newNormals = Array.from(normals.array);
for (let attrName of ["position", "normal", "uv"]) {
// for (let i = 0; i < positions.count; i += 3) {
// ExtrudeGeometry generates a non-indexed BufferGeometry. To flip
// the faces, we must reverse the winding order, i.e., for each triangle
// ABC, we must change it to ACB. We must do this for the position,
// normal, and uv buffers.
const attr = geom.getAttribute(attrName);
let newArr = Array.from(attr.array)
const sz = attr.itemSize;
for (let i = 0; i < attr.count; i++) {
const offset = sz * 3 * i;
// i is the index of the first of three vertices of a triangle.
// Sample the buffer for the second and third vertices, which
// we'll swap.
const tempB = newArr.slice(
offset + sz,
offset + 2 * sz
);
const tempC = newArr.slice(
offset + 2 * sz,
offset + 3 * sz
);
newArr.splice(offset + sz, sz, ...tempC);
newArr.splice(offset + 2 * sz, sz, ...tempB);
}
// If we're working on the normals buffer, we also need to reverse
// the normals. Since reversing a vector simply entails a
// scalar-vector multiplication by -1, and since the array is
// flat, we can do this with one map() operation.
if (attrName == "normal") {
newArr = newArr.map((e) => e * -1);
}
// Replace the position buffer with our new array
geom.setAttribute(
attrName,
new THREE.BufferAttribute(
Float32Array.from(newArr),
sz
));
attr.needsUpdate = true;
}
I've posted a demonstration of this approach on CodePen.

Three.js - BufferGeometry warning Render count or primcount is 0 when no index is specify

I want to create a BufferGeometry without setting the indices.
(As written here, in this case the renderer assumes that each three contiguous positions represent a single triangle), but I get the warning Render count or primcount is 0 and no geometry is shown.
What am I doing wrong?
Here following the code to reproduce the issue.
var buffGeometry = new THREE.BufferGeometry();
buffGeometry.attributes =
{
position:
{
itemSize: 3, array: new Float32Array([10, 0, 0, 0, 10, 0, 0, 0, 0, 0, 10, 0, 10, 0, 0, 10, 10, 0]),
numItems: 18
}
};
indexArray = new Uint32Array([0, 1, 2, 3, 4, 5]);
< !--it works adding the index array with the following line-- >
// buffGeometry.setIndex(new THREE.BufferAttribute(indexArray, 1));
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh(buffGeometry, material);
scene.add(mesh);
three.js r77
(Here the complete sample)
Documentation here:
http://threejs.org/docs/index.html#Reference/Core/BufferGeometry
In short, you're not supposed to set the attribute property directly.
Instead, you're supposed to create a THREE.BufferAttribute and then add it to the geometry by calling .addAttribute('position', bufferAttribute)
EDIT: Not sure how setIndex work, does it actually render anything or not crash?
In my case I was receiving this warning when using this code, which was working completely fine:
const curveMesh = new THREE.Mesh()
let curve
allCoords.forEach(coords => {
curve = new Curve(coords, material, step)
curveMesh.add(curve.mesh)
curveMesh.add(curve.meshOrigin)
curveMesh.add(curve.meshDestination)
})
rootMesh.add(curveMesh)
When I replaced it with this line, it started to not see the warning anymore [.WebGL-0x7fe61b026400]RENDER WARNING: Render count or primcount is 0.
// please notice here is now Group!
const curveMesh = new THREE.Group()
let curve
allCoords.forEach(coords => {
curve = new Curve(coords, material, step)
curveMesh.add(curve.mesh)
curveMesh.add(curve.meshOrigin)
curveMesh.add(curve.meshDestination)
})
rootMesh.add(curveMesh)

How can I add faces to an indexed THREE.BufferGeometry?

Say that I had generated a THREE.BufferGeometry from a THREE.Geometry named oldGeom like so:
// using WebGLRenderer
var geometry = new THREE.BufferGeometry();
var indices = new Uint16Array(oldGeom.vertices.length);
var vertices = new Float32Array(oldGeom.vertices.length * 3);
for (var i = 0; i < oldGeom.vertices.length; i++) {
indices[i] = i;
vertices[i * 3 + 0] = oldGeom.vertices[i].x;
vertices[i * 3 + 1] = oldGeom.vertices[i].y;
vertices[i * 3 + 2] = oldGeom.vertices[i].z;
}
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
Hopefully I have the indexing right. At this point, how could I add a face using the indices? I'm planning to loop through the faces of oldGeom to add them all here, but I can't find any documentation on this. Thanks!
Similar to this question, but with an indexed geometry.
From the documentation for BufferGeometry:
index (itemSize: 3)
Allows for vertices to be re-used across multiple triangles; this is called using "indexed triangles," and works much the same as it does in Geometry: each triangle is associated with the index of three vertices. This attribute therefore stores the index of each vertex for each triangular face. If this attribute is not set, the renderer assumes that each three contiguous positions represent a single triangle.
The way "indexed triangles" work is that "position" is an array of numbers, with every consecutive set of 3 numbers representing one vertex (x, y, z). "Index" is an array of numbers, where every consecutive set of 3 numbers represents one face, by referring to the indices of vertices in the "position" array.
You might have an array of vertices like this:
var vertices = [0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0];
You can think of this array as sets of XYZ coordinates like this:
var vertices = [
0, 0, 0, // vertex index 0
1, 0, 0, // vertex index 1
1, 1, 0, // vertex index 2
0, 1, 0 // vertex index 3
];
Now if you have an index array like this:
var indices = [0, 1, 2, 1, 2, 3];
It represents two triangles:
var indices = [
0, 1, 2, // face with vertices at indices 0, 1, 2
1, 2, 3 // face with vertices at indices 1, 2, 3
];
So triangle #1 has vertices at XYZ (0, 0, 0), (1, 0, 0), (1, 1, 0) while triangle #2 has vertices at XYZ (1, 0, 0), (1, 1, 0), (0, 1, 0).
On the other hand you can define vertices without using an index. The power of indexing is that it lets you reuse vertices defined in the array instead of listing them redundantly every time they appear in a triangle. If you have a single array, vertices, then quite simply, every set of 9 numbers in the array is one triangle (three sets of consecutive vertices, each with three consecutive XYZ values).
Going back to your original question, if you want to add triangles to your BufferedGeometry, I see two basic options:
Add the triangles to the original oldGeom object, and then convert it. It's a lot easier to add triangles to Geometry than it is BufferGeometry. Remember that the whole point of BufferGeometry is that it's not supposed to change! You would also be able to take advantage of .fromGeometry() because the new faces are already defined in oldGeom.
Make an indices array that's larger than necessary for the original indices and manually define triangles there. If you're defining new vertices that don't exist in the vertices array then you'd have to add them in there too. What a pain in the butt.

Three.js and collision detection

I'm quite new in 3D and Threejs.
I set up a scene with a ground, on the top of the ground lots of cubes.
http://jsfiddle.net/whurp02s/1/
I'm trying to select cubes that cross the yellow rectangle.
So I looked at exemple on internet and found the Raycaster object and it's intersectObject function
//**************** colision detection
var caster = new THREE.Raycaster();
var collisions = [];
var rays = [
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(1, 0, 1),
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(1, 0, -1),
new THREE.Vector3(0, 0, -1),
new THREE.Vector3(-1, 0, -1),
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(-1, 0, 1)
];
for ( var i = 0; i < rays.length; i += 1 ) {
caster.set( squareTL.position, rays[i] );
for( var boxId in boxGroup ) {
var boxObj = boxGroup[boxId];
collisions = caster.intersectObject( boxObj );
if ( collisions.length ) {
console.log(collisions);
} else console.log("no colision");
}
}
But 0 collision are found.
There is something obvious that I'm missing...
I've looked at your jsfiddle code and I've seen a few things that should help:
-Your "boxGroup" array needs to be populated with another array containing the object and not the object itself
-The statement: if ( collisions.length) should be changed to (collisions.length >0) . In case the length is > 1
-Optional actions: Add your collision logic into an animation/run loop
-I would create a new JSfeedle code specific to collition work with less objects. It should be easier for you to debug and understand.
Good luck,
J3zusla

Categories

Resources