Currently, I am in the process of developing a trace-line function for a visualization project that involves transitioning between different time step values. However, I have encountered an issue while using THREE.js's BufferGeometry and the setDrawRange method to create the line. It seems that the line is only visible when the origin point of the line is within the camera's view. If I pan away from the origin point, the line disappears, but it reappears when panning back towards the origin (typically located at 0,0,0). Is there a specific reason for this behavior, and is there a workaround available? I have already experimented with various render settings without success.
The provided code snippet is currently utilized for testing purposes and focuses on visualizing the object's trace as time progresses.
var traceHandle = {
/* setup() returns trace-line */
setup : function (MAX_POINTS) {
var lineGeo = new THREE.BufferGeometry();
//var MAX_POINTS = 500*10;
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
lineGeo.addAttribute('position', new THREE.BufferAttribute(positions, 3));
var lineMaterial = new THREE.LineBasicMaterial({color:0x00ff00 });
var traceLine = new THREE.Line(lineGeo, lineMaterial);
scene.add(traceLine);
return traceLine;
},
/****
* updateTrace() updates and draws trace line
* Need 'index' saved globally for this
****/
updateTrace : function (traceLine, obj, timeStep, index) {
traceLine.geometry.setDrawRange( 0, timeStep );
traceLine.geometry.dynamic = true;
var positions = traceLine.geometry.attributes.position.array;
positions[index++]=obj.position.x;
positions[index++]=obj.position.y;
positions[index++]=obj.position.z;
// required after the first render
traceLine.geometry.attributes.position.needsUpdate = true;
return index;
}
};
Your help and insights are greatly appreciated!