问题描述
关注此线程:JS SSE: Cannot access event.data outside of onMsg callback function?
我有一个用 Three.JS 编写的 3D 立方体,它使用 Server-sent-event 从远程服务器接收数据。 3D 从使 3D 立方体相应移动的加速度计 X 获取数据。 问题是该值可能非常高,导致 3D 模型过冲并超出屏幕边界。
以下是来自加速度计X的值:
我尝试重新调整每个传入的值,如下所示:
- (sensorValue / 16384)*500
- ((sensorValue / 16384)*1000)/(height)
但运动变得或大或小,使人眼无法看到。
代码如下:
let sensorValue = 0;
let sensorAddr = 0;
StartRetrieveLiveData();
function main() {
const canvas = document.querySelector('#canvas');
const accelPanel = document.querySelector('#accelPanel');
const renderer = new THREE.Webglrenderer({ canvas });
var context = canvas.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;
const fov = 70;
const aspect = 2;
const near = 20;
const far = 500;
const camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
camera.position.set(0,50,1.5);
camera.up.set(0,1);
camera.lookAt(0,0);
const scene = new THREE.Scene();
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.PointLight(color,intensity);
scene.add(light);
}
// an array of objects who's rotation to update
const objects = [];
const radius = 3;
const widthSegments = 3;
const heightSegments = 3;
const sphereGeometry = new THREE.BoxGeometry(radius,widthSegments,heightSegments);
const sunMaterial = new THREE.MeshBasicMaterial({ color: "green",wireframe: false });
const object = new THREE.Mesh(sphereGeometry,sunMaterial);
var cubeAxis = new THREE.AxesHelper(10);
object.add(cubeAxis);
object.scale.set(2,2,2);
scene.add(object);
objects.push(object);
function resizeRendererTodisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width,height,false);
}
return needResize;
}
function render() {
if (resizeRendererTodisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
objects.forEach((obj) => {
// Here I take accelerometerX and pass them to the 3D cube
if (sensorAddr === 1) {
sensorValueIndex = ((sensorValue / 16384)*1000)/(height);
obj.position.z = sensorValueIndex;
console.log(sensorValueIndex);
}
});
renderer.render(scene,camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
function onMsg(event) {
// console.log(`[message] Data received from server: ${event.data}`);
// console.log("event.data = " + JSON.parse(event.data));
var received_msg = event.data;
var obj = JSON.parse(JSON.parse(received_msg));
if (obj !== null) {
if (
obj.hasOwnProperty("DataMapChangedobjectsAddressValue") &&
obj["DataMapChangedobjectsAddressValue"][0]["DataMapAddress"] !==
undefined
) {
sensorAddr =
obj["DataMapChangedobjectsAddressValue"][0]["DataMapAddress"];
sensorValue =
obj["DataMapChangedobjectsAddressValue"][0]["Value"];
// if (sensorAddr === 1) {
// sensorValueIndex = (sensorValue / 16384) * 500;
// }
}
}
}
基本上,立方体应该上下移动并且仍然在视野内。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)