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

一．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();
1
2
3
4
5
6
7
8
9
10
11
12

在 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); // 不建议这样使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如果需要在发送请求前动态更改数据，建议使用 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
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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);
});

二、建模

3.1 C4D

1. 界面模式animate，下面时间轴可选择一个模型里的所有动画进行修改。
2. 可设置自动保存 但很卡 随时Ctrl+S
3. 工具——轴心可以解决轴心问题
4. 导出的模型渲染到别的软件出现面缺失可能是法线的问题，可选择面右键——反转法线（ps：对齐法线）

3.2 3DMAX

基本操作

1. 快捷键x搜索
2. 右键，选择子节点
3. 骨骼绑定
   ——> ——> 物品连到骨骼
4. 动画制作
   自动/手动关键帧都可，注意复制时一定要回到第一帧
5. 材质（搞不懂，导出去到C4D打开就没了）