Three JS - Uncaught TypeError: Невозможно прочитать свойство 'x' из неопределенного

Question

Я пытаюсь создать морфируемый объект, основанный на количестве частиц, у меня есть 4 объекта, 2 обычные формы три js (куб и сфера) и 2 объекта OBJ.При наведении курсора на соответствующее имя объекта оно меняется на это.

Проблема здесь в том, что когда я пытаюсь навести имя объекта obj, console.log возвращает следующую ошибку в последней строке, гдеЯ пытаюсь получить newParticles.vertices [i] .x и т. Д .:

Uncaught TypeError: Невозможно прочитать свойство 'x' из неопределенного

Код:

// Particle Vars
var particleCount = numberOfParticles;

let spherePoints,
        cubePoints,
        rocketPoints,
        spacemanPoints;

var particles = new Geometry(),
        sphereParticles = new Geometry(),
        cubeParticles = new Geometry(),
        rocketParticles = new Geometry(),
        spacemanParticles = new Geometry();

var pMaterial = new PointsMaterial({
            color: particleColor,
            size: particleSize,
            map: new TextureLoader().load(particleImage),
            blending: AdditiveBlending,
            transparent: true
});

// Objects
var geometry = new SphereGeometry( 5, 30, 30 );

spherePoints = GeometryUtils.randomPointsInGeometry(geometry, particleCount)

var geometry = new BoxGeometry( 9, 9, 9 );

cubePoints = GeometryUtils.randomPointsInGeometry(geometry, particleCount)

// Custom (OGJ) Objects

const codepenAssetUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/605067/';

var objLoader = new OBJLoader();
objLoader.setPath('./upload/');
objLoader.load( 'Nymph.obj', function ( object ) {
    object.traverse( function ( child ) {
        if ( child instanceof Mesh ) {
            let scale = 0.2; //era 2.1 per il razzo

            let area = new Box3();
                area.setFromObject( child );
            let yOffset = (area.max.y * scale) / 2;

            child.geometry.scale(scale,scale,scale);
            rocketPoints = GeometryUtils.randomPointsInBufferGeometry(child.geometry, particleCount);
            createVertices(rocketParticles, rocketPoints, yOffset, 2);
        }
    });
});

var objLoader = new OBJLoader();
objLoader.setPath(codepenAssetUrl);
objLoader.load( 'Astronaut.obj', function ( object ) {
    object.traverse( function ( child ) {
        if ( child instanceof Mesh ) {
            let scale = 4.6;

            let area = new Box3();
                area.setFromObject( child );
            let yOffset = (area.max.y * scale) / 2;

            child.geometry.scale(scale,scale,scale);
            spacemanPoints = GeometryUtils.randomPointsInBufferGeometry(child.geometry, particleCount);
            createVertices(spacemanParticles, spacemanPoints, yOffset, 3);
        }
    });
});

// Particles
for (var p = 0; p < particleCount; p++) {
    var vertex = new Vector3();
            vertex.x = 0;
            vertex.y = 0;
            vertex.z = 0;

    particles.vertices.push(vertex);
}

createVertices (sphereParticles, spherePoints, null, null)
createVertices (cubeParticles, cubePoints, null, 1)

function createVertices (emptyArray, points, yOffset = 0, trigger = null) {
    for (var p = 0; p < particleCount; p++) {
        var vertex = new Vector3();
                vertex.x = points[p]['x'];
                vertex.y = points[p]['y'] - yOffset;
                vertex.z = points[p]['z'];

        emptyArray.vertices.push(vertex);
    }
    if (trigger !== null) {
        triggers[trigger].setAttribute('data-disabled', false)
    }
}

var particleSystem = new Points(
    particles,
    pMaterial
);

particleSystem.sortParticles = true;

// Add the particles to the scene
scene.add(particleSystem);

// Animate
const normalSpeed = (defaultAnimationSpeed/100),
            fullSpeed = (morphAnimationSpeed/100)

let animationVars = {
    speed: normalSpeed
}

function animate() {
    particleSystem.rotation.y += animationVars.speed;
    particles.verticesNeedUpdate = true;

    window.requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

animate();
setTimeout(toSphere, 500);

function toSphere () {
    handleTriggers(0);
    morphTo(sphereParticles);
}

function toCube () {
    handleTriggers(1);
    morphTo(cubeParticles);
}

function toRocket () {
    handleTriggers(2);
    morphTo(rocketParticles);
}

function toSpaceman () {
    handleTriggers(3);
    morphTo(spacemanParticles);
}

function morphTo (newParticles, color = '0xffffff') {
    TweenMax.to(animationVars, .3, {ease:
Power4.easeIn, speed: fullSpeed, onComplete: slowDown});
    particleSystem.material.color.setHex(color);

    for (var i = 0; i < particles.vertices.length; i++){
        TweenMax.to(particles.vertices[i], 4, {ease:
Elastic.easeOut.config( 1, 0.75), x: newParticles.vertices[i].x, y: newParticles.vertices[i].y, z: newParticles.vertices[i].z})
    }
}

PS обратите внимание, что я использую веб-пакет.