记录一些自己遇到的基于three.js数字孪生的技术

最新推荐文章于 2024-05-14 10:02:30 发布

兔兔爱吃浆果

最新推荐文章于 2024-05-14 10:02:30 发布

阅读量525

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/hwlll/article/details/130508743

版权

一．three.js代码方面

1.调用接口

1.1 XHR（XMLHttpRequest）方法（fetch方法有问题）
get代码如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getData');
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    const targetValue = data.fieldName; // 获取目标字段的值
    console.log(targetValue);
  } else {
    console.error('Request failed. Returned status of ' + xhr.status);
  }
};
xhr.send();

在 XHR 对象中更改请求体（request body）的数据内容，可以使用 XMLHttpRequest.prototype.send() 方法发送请求之前修改 XMLHttpRequest.prototype.data 属性。

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/saveData');
const requestData = { name: 'John Doe', age: 25 };
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error('Request failed. Returned status of ' + xhr.status);
  }
};
xhr.send(JSON.stringify(requestData)); // 发送请求
// 修改请求体数据
requestData.age = 30;
xhr.data = JSON.stringify(requestData); // 不建议这样使用

如果需要在发送请求前动态更改数据，建议使用 FormData 对象来构建请求体，并使用 append 方法添加数据内容。当需要更新数据时，我们可以直接修改 FormData 实例中的字段值，示例代码：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/saveData');
const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('age', 25);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error('Request failed. Returned status of ' + xhr.status);
  }
};
xhr.send(formData); // 发送请求
// 修改请求体数据
formData.set('age', 30);
xhr.send(formData); // 再次发送请求

1.2 注意外部需要重新设一个变量_this存储this值

2.模型加载

2.1使用loader包括mtlloader和fbxloader时，由于加载速度不同，会出现问题，需要控制顺序。可以用getObjectByName方法控制顺序，外部声明一个count变量记录加载了多少个obj物体。

3．相机视角切换补间

创建一个position和target记录相机移动后的位置和朝向即可，也可以分别调用。
animateCamera(position,target, duration){
var tween = new TWEEN.Tween(camera.position)
.to({ x: position.x, y: position.y, z: position.z ,
tx:target.x,ty:target.y,tz:target.z
}, duration)
.easing(TWEEN.Easing.Quadratic.Out)
.onUpdate(function() {
// 每次 Tween 更新时更新相机朝向
camera.lookAt(target);
});