Question

现在我有一个场景设置了50个随机生成的框。我将这50个随机生成的框添加到一个大的THREE.Mesh drawnObject中。然后我将drawnObject添加到场景中。

函数addPickingData将所有这些框合并到同一个THREE.BoxGeometry allBoxGeom中。 allBoxGeom用于创建drawnObject。

var allBoxGeom = new THREE.BoxGeometry();
var pickingData = [];

function createScene() {    
    for (var i = 1; i < 50; i++) {
        var position = new THREE.Vector3();
        position.x = Math.random() * 700 - 350;
        position.y = 10;
        position.z = Math.random() * 800 - 400;
        var rotation = new THREE.Euler();
        rotation.x = 0;
        rotation.y = 0;
        rotation.z = 0;
        var scale = new THREE.Vector3();
        scale.x = scale.y = scale.z = Math.random() * 20 + 50;

        addPickingData(i, position, rotation, scale);
    }
    var drawnMaterials = new THREE.MeshPhongMaterial({ color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0  });
    var drawnObject = new THREE.Mesh(allBoxGeom, drawnMaterials);
    scene.add(drawnObject);
}

function addPickingData(index, position, rotation, scale) {
    var geom = new THREE.BoxGeometry(1,1,1);
    var color = new THREE.Color();
    var matrix = new THREE.Matrix4();
    var quaternion = new THREE.Quaternion();

    quaternion.setFromEuler(rotation, false);
    matrix.compose(position, quaternion, scale);
    // give the geom's vertices a random color to display
    applyVertexColors(geom, color.setHex(Math.random() * 0xffffff));
    allBoxGeom.merge(geom, matrix);
    // give the geom's vertices a color corresponding to the 'id'
    applyVertexColors(geom, color.setHex(index));

    pickingGeometry.merge(geom, matrix);
    pickingData[index] = {
        position: position,
        rotation: rotation,
        scale: scale
    };
}

这样一切正常，直到我向我的html添加一个按钮，该按钮调用我的本地DynamoDB服务器并为框位置和尺寸提取数据。然后，我创建包含数据的框并将其合并到allBoxGeom。我的数据框数据pickingData确实使用新值正确更新。当我尝试将drawnObject（使用新的allBoxGeom）读入场景时出现问题。场景不会渲染drawObject。

这是我的按钮听众：

updatePackageViewButton.addEventListener("click", function(err, res) {
    var table = "Boxes";
    var params = {
        TableName: table,
    };

    docClient.scan(params, function(err, data) {
        var boxes = data.Items;
        var barcode;
        var position;
        var scale;
        for (var key in boxes) {
            var box= boxes[key];
            barcode = box.barcode;
            position = box.position;
            scale = box.scale;

            var rotation = new THREE.Euler();
            rotation.x = 0;
            rotation.y = 0;
            rotation.z = 0;

            addPickingData(pickingData.length, position, rotation, scale);
        }

        var drawnMaterials = new THREE.MeshPhongMaterial({ color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0  });
        var drawnObject = new THREE.Mesh(allBoxGeom, drawnMaterials);
        scene.add(drawnObject);
    });
});

这是我的渲染功能，只是为了更清楚：

function render() {
    requestAnimationFrame(render);
    controls.update();
    TWEEN.update();
    renderer.render(scene, camera);
}

我不知道我在哪里出错了。

当从DB中拉出对象数据时，THREE.js场景不会更新

0 个答案: