how to properly animate/tween a line in THREE.js using TweenLite? - javascript

I want to tween a 3D line using THREE.JS and TweenLite. But the approach that works well with e.g. the position of a sphere does not work out here. I do not know why.
// add a line to the scene using THREE.js
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(500, 500, 500));
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial());
scene.add( line );
// using TweenLite to animate
var tl = new TimelineLite();
var target = { x: 0, y: 0, z:0 };
line.geometry.verticesNeedUpdate = true;
tl.add(TweenLite.to(line.geometry.vertices[1] , 1, target));
tl.play();
Result: Nothing happens. Why?
PS. The reason might be explained in this post, but I do not understand it.

Found the solution myself: Above the vertex is flagged as needing an update, which happens once in the line line.geometry.verticesNeedUpdate = true;. But this flag needs to be set after each change in the vertex. This can be achieved by putting the update line in the onUpdate function. Now, the line will be called after each update of the vertex.
target.onUpdate = function () {
line.geometry.verticesNeedUpdate = true;
};

Related

How to extend an existing straight line in Three.js

I have an existing line initiated
// material
const material = new THREE.LineBasicMaterial({ color: 0xffffff });
// array of vertices
vertices.push(new THREE.Vector3(0, 0, 0));
vertices.push(new THREE.Vector3(0, 0, 5));
//
const geometry = new THREE.BufferGeometry().setFromPoints(vertices);
const line = new THREE.Line(geometry, material);
And what I want to do is extend this line following its initiation. I've read this page on how to update things and I don't think it fits this situation because instead of adding vertices to my shape, I want to move them. Then again, it's very likely I misunderstood. I've tried deleting the line and then redrawing it longer, but I can't get it to work without my browser crashing.
The BufferGeometry exposes its vertices through its positions BufferAttribute. To change the positions, you should do something like the following:
//
// Assuming we want to move your line segment (0, 0, 0)-(0, 0, 5) by
// one unit in the direction of positive x, to (1, 0, 0)-(1, 0, 5).
//
// Get a reference to the "position" buffer attribute
const pos = geometry.getAttribute("position");
// Set the new positions
pos.setXYZ(0, vertices[0].x + 1, vertices[0].y, vertices[0].z);
pos.setXYZ(1, vertices[1].x + 1, vertices[1].y, vertices[1].z);
// Update the vertex buffer in graphics memory
pos.needsUpdate = true;
// Update the bounds to support, e.g., frustum culling
geometry.computeBoundingBox();
geometry.computeBoundingSphere();
Other methods exist, such as modifying the attribute's backing array directly and copying in a new array, but the general process will be the same.

Creating a new object in three.js

I'm currently working on a project that involves making 3Dobjects in Threejs, based of databases.
I already have the connection etc, but it keeps failing when I try to create a new object.
this.type = 'CustomObject';
let shape = new THREE.Shape();
const maxSize = coords.reduce((prev, current) => (Math.abs(prev.value) > Math.abs(current.value)) ? prev : current); // max Size but Abs
// console.log("Max size before check : "+ maxSize.value);
//Check weither maxSize is positive or negative.
let height = Math.abs(maxSize.value);
shape.moveTo(0, 0);
for (let i = 0; i < coords.length; i++) {
// console.log(coords[i]);
shape.lineTo(coords[i].id, coords[i].value);
}
shape.lineTo(coords[coords.length - 1].id, -height - 3);
shape.lineTo(0, -height - 3);
shape.lineTo(0, 0);
// let geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
let extrudeSettings = {
steps: 4,
amount: 20,
bevelEnabled: false,
bevelThickness: 1,
bevelSize: 1,
bevelSegments: 1
};
this.geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
this.material = new THREE.MeshBasicMaterial({color: 0xCbcbcb});
let object = new THREE.Mesh( this.geometry, this.material );
this.createdGraph = object;
console.log(this.createdGraph.Object3D);
this.scene.add(this.createdGraph);
}
This is just part of the code, I know it's not the best. But I would like to work it before I clean it.
It's writen with ES6 in mind.
The problem is that if you execute the code, it does create the figure I'd like to have.
A screengrab of the object created by the code.
But if I try to add it to A-Frame ( because I've worked with it before), it keeps giving me the error that I can't add an object without an Object3D to the scene or 'this.updateMorphTargets is not a function ' .
Anyone have any ideas ?
PS I've also tried this https://stackoverflow.com/a/31924233 idea, but that comes back with the ' this.updateMorphTargets is not a function' error.
Thanks :)
I'm not sure which parts give you the error,
I've copied Your code to a fiddle, added 3 coords, and it's working.
Judging from Your code, You've got bad scene references, in a-frame it's
this.el.sceneEl
assuming this is any entity, and this.scene does not refer to the scene.
Furthermore refer to three.js objects as object3D, not Object3D
I've only put the three.js object creation to a aframe component:
AFRAME.registerComponent("foo",{
init:function(){
//Your code here
}
});
and placed an entity:
<a-entity foo> </a-entity>
Also I've placed the object by getting the scene reference, before adding:
this.el.sceneEl.object3D.add(object)

How do you animate a line using EaselJS and TweenJS

My goal is to have a line animate from point A to point B using the Tween function.
The drawing library I am using is EaselJS and for Tweening I am using TweenJS.
Is this possible using the moveTo function to animate a straight line from point A to point B?
My current setup is as follows:
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
My goal is to animate this path from x100 y100 to x0 y0.
Animation Example:
I have tried this using the following and nothing happens:
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
createjs.Tween.get(line).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);
Nothing happens.
Draw Example:
However if I use this I get the line as expected but it is not animated:
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
line.lineTo(0, 0);
This draws a line as expected.
Is there some way to use the lineTo method with the tweening method I am missing? I have checked the documentation of both Easel and TweenJS and can't find an example or any clear instructions on how to do this or if this is not possible.
Any help is appreciated.
The easiest approach is to use a Graphics command. The .command property returns the last created graphics command, which you can then manipulate with a tween:
var cmd = line.graphics.lineTo(100,100).command;
createjs.Tween.get(cmd).to({x:0}, 1000);
Here's a working example: https://jsfiddle.net/gskinner/17Lk8a9s/1/
Demo: http://jsfiddle.net/thpbr1vt/3/
Attention! Performance.
var stage = new createjs.Stage("canvas");
var vpoint = new createjs.Point( 100, 100);
var line = new createjs.Graphics();
line.beginStroke( 'cyan' );
line.moveTo( vpoint.x, vpoint.y );
var s = new createjs.Shape(line);
stage.addChild(s);
createjs.Tween.get(vpoint).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);
createjs.Ticker.addEventListener("tick", tick);
function tick() {
line.lineTo( vpoint.x, vpoint.y );
stage.update();
}

three.js transparent png texture strange border webgl

I am having a strange problem when using pngs as a texture in three.js. The pngs get strange borders at the area between visible and transparent. I allready tried to play around with alphatest value but then sometimes the image disapears completly in areas where are really thin 1px lines. Is there a solution how to solve this?
var explosionTexture = new THREE.ImageUtils.loadTexture( 'explosion.png' );
boomer = new TextureAnimator( explosionTexture, 4, 4, 16, 55 ); // texture, #horiz, #vert, #total, duration.
var explosionMaterial = new THREE.MeshBasicMaterial( { map: explosionTexture } );
explosionMaterial.transparent = true;
var cube2Geometry = new THREE.PlaneGeometry( 64, 64, 1, 1 );
cube2 = new THREE.Mesh( cube2Geometry, explosionMaterial );
cube2.position.set(100,26,0);
scene.add(cube2);
// renderer
//renderer = new THREE.WebGLRenderer( { antialias: false, premultipliedAlpha: true } );
renderer = new THREE.WebGLRenderer( { antialias: false } );
Just try this:
explosionTexture.anisotropy = 0;
explosionTexture.magFilter = THREE.NearestFilter;
explosionTexture.minFilter = THREE.NearestFilter;
Also you should not use antialaising when constructing the renderer:
renderer = new THREE.WebGLRenderer({antialias: false});
Did this to preview minecraft texture packs, works great :-)
Use material blending, the following configuration worked for me:
material.blending = THREE.CustomBlending
material.blendSrc = THREE.OneFactor
material.blendDst = THREE.OneMinusSrcAlphaFactor
See this example:
http://threejs.org/examples/#webgl_materials_blending_custom
Congratulations, you've run directly into the Texel-to-Pixel-mapping-trap. :)
This should help you out of there, although it's not WebGL the basics still apply.
Ok, so I tried all the solutions on this page. They all failed.
What worked for me was to use the correct Texture.wrapS (horizontal wrapping) and Texture.wrapT (vertical wrapping) for the sprite texture.
I personally was finding this ugly edge on the top of my sprite. I just had to make sure my Texture.wrapT setting was THREE.ClampToEdgeWrapping instead of THREE.RepeatWrapping.
Solved the issue perfectly without messing with alpha test values, texture filters, vertices or antialiasing.
i solved it like this:
var c2GVertices = cube2Geometry.vertices;
for (var i = 0; i < c2GVertices.length; i++) {
c2GVertices[i].x = c2GVertices[i].x - 0.5;
c2GVertices[i].y = c2GVertices[i].y - 0.5;
}
is there an easier way to move all vertices a half pixel?

Three.js - Shape disappears on flip side

I've made a circle as follows:
material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
arcShape = new THREE.Shape();
arcShape.absarc( 0, 0, 20, 0, -Math.PI*2, true );
geometry = arcShape.makeGeometry();
circle = new THREE.Mesh(geometry, material);
scene.add(circle);
Like that, it is visible. But rotate it, and it disappears.
shadow.rotation.x = Math.PI / 2;
I've seen several other posts where this problem has not been solved. (So unless someone has a solution, I'll resort to making a flat cylinder instead. It's just a niggling problem).
I've set mesh.doubleSided = true and mesh.flipSided = false. I've also tried all 4 combinations of toggling the renderer's depthTest and the material's depthWrite properties.
Is there anything else I could try? If not, I'm guessing the code is sensitive to the order of some of my calls, in which case, I've had a long day so I'll stick with the cylinder!!
material.side = THREE.DoubleSide;

Categories

Resources