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个向量）。在循环中尝试抓住一行接一行并抓住第二个向量以将该点设置在球体的坐标处。但和以前一样，整个事情只适用于一条线。请给我一些建议，我在这里淹没了代码; 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的文件很糟糕。

三个JS：Sphere和;线条动画

1 个答案: