Vue+ThreeJS踩坑笔记

最新推荐文章于 2024-09-05 17:42:30 发布

zzl_1010

最新推荐文章于 2024-09-05 17:42:30 发布

阅读量979

点赞数

分类专栏：问题记录文章标签： three.js 3d vue js

本文链接：https://blog.csdn.net/zzl_1010/article/details/109670185

版权

问题记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客探讨了在Three.js中如何处理灯光以显示所需颜色，动态加载和操作3D模型，特别是关于OBJ和FBX模型的区别。重点在于如何处理具有多个时间轴的单一C4D动画，通过将动画拆分成多个部分实现独立控制。同时，博主解决了场景显示、鼠标交互、视角缩放以及Chrome新版本中有关touch事件的问题。

摘要由CSDN通过智能技术生成

问题思考：

灯光的使用（如何显示我们想要的颜色）；

动态加载模型(动态画线并连接)；

动态加减模型（复制，然后设置位置）；

obj模型只能显示静态，fbx模型可以显示动画；

动画控制，单动画多时间轴分解成多动画控制；

1>、多模型加载：（three 实现多个相同模型的加载）

2>、平行光：(平行光:THREE.DIRECTIONALLIGHT)

1、场景模型出不来

1>、考虑是否是场景太大，或者位置偏移了

2、鼠标点不到场景内模型，或者偏移问题解决

/**
     * 将屏幕坐标转换为3d 坐标
     */
    getIntersects(event) {
      var mainCanvas=event.path[0];
      event.preventDefault();
      var raycaster = new THREE.Raycaster();
      var mouse = new THREE.Vector2();
      // mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      // mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      mouse.x = ((event.clientX - mainCanvas.getBoundingClientRect().left)/mainCanvas.offsetWidth) * 2 - 1;
      mouse.y = -((event.clientY - mainCanvas.getBoundingClientRect().top)/mainCanvas.offsetHeight) * 2 + 1;
      raycaster.setFromCamera(mouse, this.camera);
      var intersects = raycaster.intersectObjects(this.scene.children, true);
      return intersects;
    },

3、滚轮拉近拉远视角，新版本Chrome浏览器报错

错误内容：chrome 监听touch类事件报错：无法被动侦听事件preventDefault，是新版本chrome 浏览器报错。

解决方法：找到报错文件，将注册事件的passive由默认的true改成false

4、*****C4D模型只有一个动画，但是有多个时间轴的处理办法

import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";

思路：将一个动画变成10个动画，通过时间轴来构建

//动画播放
_this.actions = [];
_this.mixer = new THREE.AnimationMixer(object);
//将一个animations动画，按照时间轴拆成多个动画，并以此为源数据进行动画控制
object.animations = _this.sliceClipByTracks(object.animations);
object.animations.map(function (animation, index) {
let obj = _this.mixer.clipAction(animation);
    //obj.setLoop(0, 0);
    //obj.setDuration(7);
    //obj.clampWhenFinished = true;
    //obj.play();
_this.actions.push(obj);
});
原始的操作方式，一个动画一个时间轴可用此方法（原本动画数据就是独立可单独控制时使用）
// object.animations.map(function (item, index) {
//   let obj = _this.mixer.clipAction(object.animations[index]);
//   //obj.setLoop(0, 0);
//   obj.setDuration(4);
//   //obj.clampWhenFinished = true;
//   obj.play();
//   _this.actions.push(obj);
// });

播放一个特定的动画方法1：
（使用Three自带方法，查找object.animations内的AnimationClip,并由此控制AnimationClip）
// var clips = object.animations;
// var clip_0 = THREE.AnimationClip.findByName(clips, "Take_0");
// clip_0 && _this.mixer.clipAction(clip_0).play();
// var clip_9 = THREE.AnimationClip.findByName(clips, "Take_9");
// clip_9 && _this.mixer.clipAction(clip_9).play();

播放一个特定动画，方法2：
直接控制构建的clipAction，
clipAction是通过new THREE.AnimationMixer(object).clipAction(object.animations)生成
_this.actions.filter((item)=>{
if(item._clip.name=="Take_1")
item.play();
})