我有一个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的<head>
上添加<META HTTP-EQUIV="refresh" CONTENT="5">
,那么它会刷新并获取颜色值,但场景会重置(请注意,您可以用鼠标移动场景)。有没有办法在不重新加载页面并保留Three.JS场景的情况下更新Javascript变量?
完整代码在这里:https://github.com/f0n/threeSocket
GitHub页面:https://f0n.github.io/threeSocket/
发布于 2018-09-27 03:29:49
当您将<META HTTP-EQUIV="refresh" CONTENT="5">
添加到HTML文档中时,您是在告诉它刷新所有内容。DOM更新、JavaScript、其状态、变量值...所有的一切。如果要保持在场景中的位置,则不应使用此方法。
为什么不加载一次HTML页面,然后对服务器执行定时调用,以便只检索颜色数据,而不进行整个页面的刷新?这就是XMLHTTPRequest的作用。这就是他们所说的AJAX (Asynchronous Javascript And XML),并且有概述如何使用它的plenty of StackOverflow questions。
发布于 2018-09-27 03:25:04
您可以尝试使用setInterval方法刷新这些值,因此不需要刷新整个页面。
这里有更多信息
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
https://stackoverflow.com/questions/52524721
复制相似问题