var lineGeometry = new THREE.Geometry();
var lineMaterial = new THREE.LineBasicMaterial({
color: 0x000000
});
lineGeometry.vertices.push(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 10, 0),
);
var line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);
I want to update this line's endpoint in a circular fashion. In other languages it is straightforward, I would increase some variable and update the endpoint like radius * cos(dt) and radius * sin(dt). In three.js I tried the following, but it doesn't work:
var dt = 0;
function render(){
dt += 0.01;
line.geometry.vertices[1].x = 10*Math.cos(dt);
line.geometry.vertices[1].z = 10*Math.sin(dt);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
edit: I don't want to use line.rotation.z += 0.01 method.
line.geometry.verticesNeedUpdate = true;
Add the above line before calling render. This will signal three.js that the vertex buffer has changed, so it will update it appropriately.
Since you mentioned using line.rotation, I must mention that updating the vertices is inefficient compared to rotating the line shape. When you rotate a line shape, you are simply updating the shape's transformation matrix. But when you update vertices, three.js needs to re-upload the entire set of vertices to the GPU. This may seem trivial for a single line segment, but it's a bad habit to get into if you ever intend to use larger shapes later.
Related
I wished to draw a curved line in Three.js with a thickness greater than one . After some digging, Three.MeshLine used to be the answer. However, I've seen a few reports (and can confirm from my own usage) that the code given on the repo example triggers a "Class constructor cannot be invoked without 'new'" error and kills the line.
Curious if anybody has found a way to make MeshLine functional with recent versions of Three. Below is the code from the current release (last commit one year ago). Unless maybe I'm missing something or if the repo has kind of gone out the window.
var scene, camera, renderer, points, line;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, 640 / 480, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 480);
document.body.appendChild(renderer.domElement);
camera.position.z = 9;
points = [];
for (var i = -10; i < 10.1; i += 0.1) {
points.push([i, Math.sin(i), 0]);
}
line = new MeshLine();
line.setPoints(points.flat());
var material = new MeshLineMaterial({ color: new THREE.Color(0xffff00), lineWidth: 0.1, dashArray: 0.1, dashRatio: 0.2});
material.transparent = true;
mesh = new THREE.Mesh(line, material);
scene.add(mesh);
animate();
}
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
The project THREE.MeshLine can not support latest versions (> r127) because it derives the MeshLine class from BufferGeometry like so:
THREE.BufferGeometry.call(this)
This is no valid JS syntax anymore since BufferGeometry is now a ES6 class. That means the maintainers of THREE.MeshLine also have to move their code to ES6.
I'm trying to draw a line between two moving vertices. The vertex's drawing is stored in a variable called object, which has a position, which is a THREE.Vector3.
The line is created thusly:
var Line = function(scene, source, target){
var geometry = new THREE.Geometry();
geometry.dynamic = true;
geometry.vertices.push(source.object.position);
geometry.vertices.push(target.object.position);
geometry.verticesNeedUpdate = true;
var material = new THREE.LineBasicMaterial({ color: 0x000000 });
var line = new THREE.Line( geometry, material );
scene.add(line);
return line;
};
..., where source and target are vertices and the vertices get updated via:
vertex.object.position.add(vertex.velocity);
Now, I assigned the source.object.position and target.object.position to the line.geometry.vertices[0] and line.geometry.vertices[1] because I wanted one to update with the other. But instead, the vertex positions vary wildly from the line positions. The vertices are where they are, but the lines don't connect to the vertices.
How can I make the lines move with the vertices?
In your animation loop you have to set line.geometry.verticesNeedUpdate = true. Because every time after rendering it becomes false. jsfiddle example
I am adding "n" number of circles on the scene.
var radius = 1;
var segments = 32;
var circleGeometry = new THREE.CircleGeometry( radius, segments);
function generateCircles(){
//scene.remove(circle);
var count=0;
while (1000> count) {
circle = new THREE.Mesh (circleGeometry, material);
scene.add (circle);
count ++;
}
}
It is effective to do it this way ?.
in my code I call this function. and every time you call it, it all goes back slower, I guess it's because there are more objects in the scene. what can I do?
Each time the function is called I need erased completely from the memory stage and the circles that were generated.
with "slower", I mean that I want my application to run faster. every time I run the function add more and more circles. so I want to be removed earlier. to add new ones. if there are many circles in the scene it slows execution.
http://jsfiddle.net/v8oxsxtc/
You can remove the old circles from the scene by calling the scene.remove method on each of the circles you previously added. Here is a simple example using your code:
var lastCircles = null;
function generateCircles(){
var count=0;
if(lastCircles) { // remove old circles if they exist
lastCircles.forEach(function(c) {
scene.remove(c);
});
}
lastCircles = []; // clear cache
while (1000 > count) {
circle = new THREE.Mesh (circleGeometry, material);
lastCircles.push(circle); // add each circle to cache
scene.add (circle);
circle.position.set(count,count,count)
count ++;
}
}
I'm working on a project where i would like to have objects floating around a webpage,
you can see the progress here.
I'm now using a 2d plane to float the objects around, it's the same size as the div behind it and i've set the plane's opacity to 0.
This creates the desired effect but there is one problem occurring. The objects float around the div and become invisible when behind the plane, that's good. The renderer is transparent renderer = new THREE.WebGLRenderer({alpha: true}); so i can see the DOM underneath, that's good to. But the transparent plane that hides the floating objects adds a white color to the DOM. This only happens to DOM elements behind the plane. When dom behind the canvas is not behind the plane the proper colors are shown.
This is the code to create the plane:
var plane = new THREE.Mesh(new THREE.PlaneGeometry(160, 400), new THREE.MeshNormalMaterial());
plane.overdraw = true;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = -100;
plane.material.opacity = 0;
edit:
The problem was caused by the material type. By using a THREE.MeshBasicMaterial() instead of a THREE.MeshNormalMaterial() and adding a color to the material plane.material.color = '0xffffff' the problem got solved! The final code to create the plane looks like this:
var plane = new THREE.Mesh(new THREE.PlaneGeometry(160, 400), new THREE.MeshBasicMaterial());
plane.overdraw = true;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = -100;
plane.material.color = '0xffffff';
plane.material.opacity = 0;
Hope this helps people facing the same problem.
I would like to add just one particle and be able to move it around. However, all I could find it how to do it with a Particle System. I tried adding a particle to the scene as one would do a mesh, but it didn't render. Only when I used a particle system did it render.
Here is what I tried:
particle_material = new THREE.ParticleBasicMaterial({ color: 0x0000ff, size: 2000 });
particle = new THREE.Particle(particle_material);
particle.position.x = 0;
particle.position.y = 0;
particle.position.z = 0;
scene.add(particle);
THREE.Particle is supported by CanvasRenderer and THREE.ParticleSystem is supported by WebGLRenderer.
You may want to consider using THREE.Sprite. See http://threejs.org/examples/webgl_sprites.html.
three.js r.60