Question

我有一个Three.JS应用程序，该应用程序根据文本文件为对象着色：

let color1 = 0x00ff00;
let color2 = 0xFF04F0;

在Three.JS代码中：

var cubeGeometry = new THREE.BoxGeometry(15, 1, 5);
var cubeMaterial = new THREE.MeshLambertMaterial({color:color2});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

var cubeGeometry1 = new THREE.BoxGeometry(15, 1, 5);
var cubeMaterial1 = new THREE.MeshLambertMaterial({color:color1});
var cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1);

随着文本文件中颜色的更改，Three.JS应用程序将正确显示它们。如果在HTML的<META HTTP-EQUIV="refresh" CONTENT="5">上添加<head>，则它会刷新并获取颜色值，但是场景会重置（注意，可以用鼠标移动场景）。有没有一种方法可以更新Javascript变量而无需重新加载页面并保持Three.JS场景？

完整代码在这里：https://github.com/f0n/threeSocket

GitHub页面：https://f0n.github.io/threeSocket/

Answer 1

将<META HTTP-EQUIV="refresh" CONTENT="5">添加到HTML文档中时，就是在告诉它刷新所有文档。 HTML，DOM更新，JavaScript，其状态，变量值等等。如果要保持场景中的位置，则不应使用这种方法。

为什么不一次加载HTML页面，然后对服务器执行定时调用以仅恢复颜色数据而不进行整页刷新？这就是XMLHTTPRequest的目的。这就是他们所说的AJAX（异步Java语言和XML），plenty of StackOverflow questions概述了如何使用它。

Answer 2

您可以尝试使用setInterval方法刷新值，因此不需要整页刷新。

更多信息

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

如何在不刷新页面的情况下刷新Javascript变量？

2 个答案: