当前位置:   article > 正文

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

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打开就没了)
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/神奇cpp/article/detail/896529
推荐阅读
相关标签
  

闽ICP备14008679号