ThreeJS：球體和線條動畫

Question

請參閱下面的更新

希望您能夠幫助我。

我創建了一個包含線條和球體的網格，現在我想同時為它們設置動畫，這樣它們就有了一個平滑的、脈動的、移動的。

隨着我在這里的嘗試，其中一條線和球體按照我的意願行事，其他線和球體不會移動或脫臼。

有任何想法嗎？

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

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 的文檔非常糟糕。