javascript - 三个JS : Sphere & Line Animation

Question

请参阅下面的更新

希望你能帮助我。

我创建了一个包含线和球体的网格， 现在我想同时为它们制作动画，以便它们具有平滑、脉动的 Action 集。

我在这里进行尝试，其中一条线和球按照我的意愿行事，其他线和球没有移动或错位。

有什么想法吗？

//      _
//  ___| |__   __ _ _ __   ___  ___
// / __| '_ \ / _` | '_ \ / _ \/ __|
// \__ \ | | | (_| | |_) |  __/\__ \
// |___/_| |_|\__,_| .__/ \___||___/
//                 |_|

var numSpheres = 5;
var angRand = [numSpheres];
var spread = 10;
var radius = windowY/5;
var radiusControl = 20;
var xPos;
var yPos;

//sphere
var sphereGeometry = new THREE.SphereGeometry(0.35, 100, 100);


//line
var lineGeometry = new THREE.Geometry();
var lineMaterial = new THREE.LineBasicMaterial({
    color: 0xCCCCCC
});

//create dynamically
for (var i = 0; i < numSpheres; i++) {
    var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x334455});
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    var line = new THREE.Line(lineGeometry, lineMaterial);

    angRand[i] = Math.floor((Math.random() * 360) + 1);//random angle for each sphere/line
    var radiusIncr = spread * (angRand[i]+200)/180;
    var xPos = Math.cos((360/numSpheres * (i) + angRand[i]/2 )) * (radius - radiusIncr);
    var yPos = Math.sin((360/numSpheres * (i) + angRand[i]/2 )) * (radius - radiusIncr);
    var offsetY = Math.floor((Math.random()*5)+1);

    sphere.position.x = xPos/radiusControl;
    sphere.position.y = yPos/radiusControl + offsetY; 

    lineGeometry.vertices.push(
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(sphere.position.x, sphere.position.y, 0)
    );

    scene.add(sphere);
    scene.add(line);
}


//              _                 _   _
//   __ _ _ __ (_)_ __ ___   __ _| |_(_) ___  _ __
//  / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \
// | (_| | | | | | | | | | | (_| | |_| | (_) | | | |
//  \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|

function animations() {

    var time = Date.now() * 0.001;
    var speed = 0.25;
    var speed1 = 0.145;
    var behave = speed * Math.cos(time);
    var behave1 = speed1 * Math.cos(time * 1.25);
    var behave2 = 10 + speed1 * Math.cos(time);
    var behave3 = 10 + speed * Math.cos(time * 0.5);

    for(var i = 0;i < scene.children.length;i++){
        sphere.position.x = xPos/radiusControl + behave;
        sphere.position.y = yPos/radiusControl + behave1;
        line.geometry.vertices[1].x = xPos/radiusControl + behave;
        line.geometry.vertices[1].y = yPos/radiusControl + behave1;
    }

更新:现在我将球体的数据推送到数组中，所有球体都按预期移动。但是现在到线:在这里我还创建了一个嵌套的数组(因为线有 2 个向量)。在 loopmi 中，尝试一条接一条地获取线并获取第二个向量以将该点设置为球体的坐标。但是和以前一样，整个过程只适用于一行。请给我一些建议，我在这里淹没了代码；D

//      _
//  ___| |__   __ _ _ __   ___  ___
// / __| '_ \ / _` | '_ \ / _ \/ __|
// \__ \ | | | (_| | |_) |  __/\__ \
// |___/_| |_|\__,_| .__/ \___||___/
//                 |_|
// for going live better recode as class/objects
var numSpheres = 3;
var angRand = [numSpheres];
var spread = 10;
var radius = windowY/5;
var radiusControl = 20;
var xPos;
var yPos;
var offsetY;
var selectSpheres = [];
var selectxPosSpheres = [];
var selectyPosSpheres = [];
var selectLines = [];

//create dynamically
for (var i = 0; i < numSpheres; i++) {

    //sphere
    var sphereGeometry = new THREE.SphereGeometry(0.35, 100, 100);

    var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x334455});
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);


    //line
    var lineGeometry = new THREE.Geometry();
    var lineMaterial = new THREE.LineBasicMaterial({
    color: 0xCCCCCC
    });

    var line = new THREE.Line(lineGeometry, lineMaterial);

    angRand[i] = Math.floor((Math.random() * 360) + 1);//random angle for each sphere/line
    var radiusIncr = spread * (angRand[i]+200)/180;
    var xPos = Math.cos((360/numSpheres * (i) + angRand[i]/2 )) * (radius - radiusIncr);
    var yPos = Math.sin((360/numSpheres * (i) + angRand[i]/2 )) * (radius - radiusIncr);
    var offsetY = Math.floor((Math.random()*5)+1);

    sphere.position.x = xPos/radiusControl;
    sphere.position.y = yPos/radiusControl + offsetY; 

    lineGeometry.vertices.push(
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(sphere.position.x, sphere.position.y, 0)
    );

    scene.add(sphere);
    scene.add(line);

    selectLines.push(lineGeometry); //fetch the lines (array= [line1][line2][line3])
    selectSpheres.push(sphere);
    selectxPosSpheres.push(xPos);
    selectyPosSpheres.push(yPos);
    console.log("shapes", selectLines);
}


//              _                 _   _
//   __ _ _ __ (_)_ __ ___   __ _| |_(_) ___  _ __
//  / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \
// | (_| | | | | | | | | | | (_| | |_| | (_) | | | |
//  \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|

function animations() {
    var time = Date.now() * 0.001;
    var speed = 0.25;
    var behave = speed * Math.cos(time);

    for (var i = 0; i < selectSpheres.length; i++) {
        sphere = selectSpheres[i];
        sphere.position.x =  selectxPosSpheres[i]/radiusControl + behave;
        sphere.position.y = (selectyPosSpheres[i]/radiusControl + offsetY) + behave;

        line = selectLines[i]; //put the value "i" of the array into variable "line"
        console.log("animations", line); //lets see if all lines are grabbed by the loop
        line.vertices[1].x = sphere.position.x; //fetch the 2nd vector of line"i" and put it on the x coords of the sphere
        line.vertices[1].y = sphere.position.y; //fetch the 2nd vector of line"i" and put it on the y coords of the sphere
        //why is only one line grabbed by the loop although the console says it grabbs every one of them?!?!
    };
}

Answer 1

明白了!我不得不将“更新功能”放入循环中。

//              _                 _   _
//   __ _ _ __ (_)_ __ ___   __ _| |_(_) ___  _ __
//  / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \
// | (_| | | | | | | | | | | (_| | |_| | (_) | | | |
//  \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|

function animations() {
    var time = Date.now() * 0.001;
    var speed = 0.55;
    var behave = speed * Math.cos(time);

    for (var i = 0; i < selectSpheres.length; i++) {
        sphere = selectSpheres[i];
        sphere.position.x =  selectxPosSpheres[i]/radiusControl + behave;
        sphere.position.y = (selectyPosSpheres[i]/radiusControl + offsetY) + behave;

        line = selectLines[i]; //put the value "i" of the array into variable "line"
        console.log("animations", line); //lets see if all lines are grabbed by the loop
        line.vertices[1].x = sphere.position.x; //fetch the 2nd vector of line"i" and put it on the x coords of the sphere
        console.log("lineX", line.vertices[1].x)
        console.log("sphereX", sphere.position.x)
        line.vertices[1].y = sphere.position.y; //fetch the 2nd vector of line"i" and put it on the y coords of the sphere
        //why is only one line grabbed by the loop although the console says it grabbs every one of them?!?!
        line.verticesNeedUpdate = true;
        sphereGeometry.normalsNeedUpdate = true;
    };
}

顺便说一句:ThreeJS 的文档非常糟糕。