Переместить объекты на сфере по прямой линии и обратно к началу координат
У меня есть 2 сферы 1 внутренняя и 1 внешняя сфера. на внешней сфере у меня 128 частиц / спрайтов. Я хотел бы переместить каждый спрайт / частицу из сферы на определенное расстояние. Частицы / спрайты должны действовать как звуковой эквалайзер, перемещаясь от сферы на определенное расстояние и обратно в исходное положение. Пожалуйста, вы можете помочь.
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);
Я попробовал это... когда я рендеринг. Мне просто нужна помощь.
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 );
}
1 ответ
Решение
Вот исправление...
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);
}
}