three.jsgeometryparticles
Move Objects on sphere away in a straight line and back to origin
I have 2 spheres 1 inner and 1 outer sphere. on the outer sphere i have 128 particles/sprites. i would like to move each sprite/particle out and away from the sphere to a certain distance. The particles/sprites must act like an audio equalizer moving away from the sphere to a certain distance and the back to the rest position. Please can you assist.
var geometryInner = new THREE.SphereGeometry(60, 32, 32);
geometryInner.applyMatrix( new THREE.Matrix4().makeScale( 1.0, 1.8, 1.0 ) );
//var geometryMid = new THREE.SphereGeometry(90, 32, 32);
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShaderGeneral').textContent,
fragmentShader: document.getElementById('fragmentShaderLineColors').textContent,
transparent: false
});
sphereInner = THREE.SceneUtils.createMultiMaterialObject( geometryInner, [
material,
new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true} )
]);
// sphereInner.rotation.x = 0.3;
// sphereInner.position.y = -30;
scene.add(sphereInner);
//
geometryOuter = new THREE.SphereGeometry(80, 32, 32);
geometryOuter.applyMatrix( new THREE.Matrix4().makeScale( 1.0, 1.8, 1.0 ) );
var materialOuter = new THREE.MeshLambertMaterial({color: 0xFF0000, transparent: true, opacity: 0.1});
var sphereOuter = new THREE.Mesh(geometryOuter, materialOuter);
scene.add(sphereOuter);
points = THREE.GeometryUtils.randomPointsInGeometry( geometryOuter, particleCount );
var pMaterial = new THREE.PointCloudMaterial({
color: 0xFFFFCC,
size: 20,
map: THREE.ImageUtils.loadTexture(
"particle.png"
),
blending: THREE.AdditiveBlending,
opacity : 0.8,
depthWrite : false,
transparent: true
});
// create the particle variables
particles = new THREE.Geometry();
// create the particle variables
// now create the individual particles
for (var p = 0; p < points.length; p++)
{
// create a particle with random
// position values, -250 -> 250
pX = points[p].x;
pY = points[p].y;
pZ = points[p].z;
// add it to the geometry
particles.vertices.push(point);
}
// create the particle system
particleSystem = new THREE.PointCloud(particles,
pMaterial);
// also update the particle system to
// sort the particles which enables
// the behaviour we want
particleSystem.sortParticles = true;
// add it to the scene
scene.add(particleSystem);
I have tried this...when i render. I just need some help.
function render()
{
var timer = 0.0001 * Date.now();
// add some rotation to the system
//particleSystem.rotation.y += boost * 0.0001;
var delta = clock.getDelta();
if(typeof array === 'object' && array.length > 0) {
var k = 0;
for(var i = 0; i < particleSystem.geometry.vertices.length ; i++) {
particleSystem.geometry.verticesNeedUpdate = true;
// particleSystem.position.z = boost/2;
particleSystem.geometry.vertices[k].z = array[i]/4 - 30;
// geometryOuter.applyMatrix( new THREE.Matrix4().makeScale( 2, 1.8, 1.0 ) );
// particleSystem.rotation.y += array[2] * 0.0000005 ;
// sphereInner.rotation.z -= array[0] * 0.0000005;
// sphereInner.position.z = boost/3;
sphereInner.rotation.y += array[0] * 0.0000005;
uniforms.time.value -= array[0] * 0.0000005;
uniformsPlane.time.value += array[1] * 0.0000008;
k += (k < array.length ? 1 : 0);
}
}
// uniforms2.time.value = clock.elapsedTime;
// camera.position.x += ( mouseX - camera.position.x ) * .05;
// camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderText();
// renderer.clear();
effect.render( scene, camera );
}
Solution
Here is the fix...
if(typeof array === 'object' && array.length > 0) {
var k = 0;
for(var i = 0; i < particleSystem.geometry.vertices.length ; i++) {
particleSystem.geometry.verticesNeedUpdate = true;
// particleSystem.position.z = boost/2;
if(array[k] == 0)
{
particleSystem.geometry.vertices[k].z = points[k].z;
}
else if(points[k].z + array[k] + 100 < points[k].z)
{
particleSystem.geometry.vertices[k].z = points[k].z;
}
else
{
particleSystem.geometry.vertices[k].z = points[k].z + array[k] + 100;// * 0.1 - 60;
}
// particleSystem.geometry.vertices[k].x = -array[i];
// particleSystem.geometry.vertices[k].y = array[i];
// geometryOuter.applyMatrix( new THREE.Matrix4().makeScale( 2, 1.8, 1.0 ) );
// particleSystem.rotation.y += array[2] * 0.0000005 ;
// sphereInner.rotation.z -= array[0] * 0.0000005;
// sphereInner.position.z = boost/3;
sphereInner.rotation.y += array[0] * 0.0000005;
uniforms.time.value -= array[0] * 0.0000005;
uniformsPlane.time.value += array[1] * 0.0000008;
k += (k < array.length ? 1 : 0);
}
}