Having recently delved into three.js, I've been experimenting with some concepts. My current challenge involves creating a line in the scene and using it as a reference for cloning and transforming. The goal is to display the cloned lines in a sequential transformation within the scene.
The basic code structure looks like this:
var line, scene, camera, light, renderer;
var frame = 0;
var random_degree = Math.round(Math.random() * 360);
var container = document.getElementById( 'container' );
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
scene.add( camera );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 200;
var material = new THREE.LineBasicMaterial({
transparent: true,
color: 0x0000ff
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( -100, 0, 0 ),
new THREE.Vector3( 0, 100, 0 ),
new THREE.Vector3( 100, 0, 0 )
);
line = new THREE.Line( geometry, material );
//Code adapted from http://threejs.org/docs/#Reference/Objects/Line
//simplified for demonstration
}
function animate() {
requestAnimationFrame( animate );
frame ++;
if( frame < 1500){
var newCurve = line.clone();
newCurve.rotation.x = ((random_degree + frame * 0.25) % 360) * Math.PI / 180;
newCurve.rotation.y = ((random_degree + frame * 0.25) % 360) * Math.PI / 180;
newCurve.rotation.z = ((random_degree + frame * 0.25) % 360) * Math.PI / 180;
newCurve.material.opacity = 0.2;
scene.add(newCurve);
}
renderer.render( scene, camera );
}
The HTML section simply consists of:
<div id='container'></div>Although everything is functioning as intended, a limitation arises when the number of lines exceeds 2000, resulting in a significant drop in FPS. In an attempt to address this, I experimented with merging the lines during initialization:
var totalGeometry = new THREE.Geometry();
....
function init(){
....
for(var i=0; i< 1500; i++){
var newCurve = line.clone();
newCurve.rotation.x = ((random_degree + frame * 0.25) % 360) * Math.PI / 180;
newCurve.rotation.y = ((random_degree + frame * 0.25) % 360) * Math.PI / 180;
newCurve.rotation.z = ((random_degree + frame * 0.25) % 360) * Math.PI / 180;
newCurve.updateMatrix();
totalGeometry.merge(newCurve.geometry, newCurve.matrix);
}
var totalLine = new THREE.Line(totalGeometry, material);
....
}
However, I encountered a limitation as I could only merge the lines during initialization and not during the rendering process. When attempting to merge the lines within the function animate(), only a single line is rendered instead of a group:
function animate(){
.....
if( frame < 1500){
var newCurve = curve1.clone();
newCurve.rotation.x = ((random_degree + frame * 0.25) % 360) * Math.PI / 180;
newCurve.rotation.y = ((random_degree + frame * 0.25) % 360) * Math.PI / 180;
newCurve.rotation.z = ((random_degree + frame * 0.25) % 360) * Math.PI / 180;
newCurve.material.opacity = 0.2;
newCurve.updateMatrix();
totalGeo.merge(newCurve.geometry, newCurve.matrix);
totalMesh = new THREE.Line(totalGeo, newCurve.material);
scene.add(totalMesh);
}
}
If anyone has suggestions or solutions to this challenge, I would greatly appreciate it. Thank you.