2020-11-25

最新推荐文章于 2023-10-09 15:56:30 发布

hahah1234111111

最新推荐文章于 2023-10-09 15:56:30 发布

阅读量105

点赞数

文章标签： three.js

本文链接：https://blog.youkuaiyun.com/hahah1234111111/article/details/110121236

版权

json模型的加载和拾取

加载：var OBJLoaders = new THREE.ObjectLoader();
http://www.webgl3d.cn/threejs/docs/#api/zh/loaders/ObjectLoader中文文档地址

设置group

data(){
return {
group: null
	}
}

在加载主函数中定义group
this.group = new THREE.Group();

加载

var texture = OBJLoaders.load(
        "@/../static/static/" + obj.obj + ".json",
        object => {
          object.position.x = 0;
          object.position.y = 0;
          object.position.z = 0;
          // console.log(object);
          //把加载的模型添加到group中，为后续拾取做准备
          this.group.add(object);
          this.scene.add(this.group);
          this.renderer.render(this.scene, this.camera);
        },
        this.onProgress,
        this.onError
      );

模型拾取
https://blog.youkuaiyun.com/ithanmang/article/details/80897888大佬讲的拾取模型，后半段讲的怎么拾取加载的外部模型
https://blog.youkuaiyun.com/moyebaobei1/article/details/84993114其他人的案例

    // 点击事件
    click() {
      // 点击变色
      this.renderer.domElement.addEventListener("mouseup", event => {
        // 将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        // 新建一个三维单位向量 假设z方向就是0.5
        // 根据照相机，把这个向量转换到视点坐标系
        var vector = new THREE.Vector3(
          this.mouse.x,
          this.mouse.y,
          0.5
        ).unproject(this.camera);

        // 在视点坐标系中形成射线,射线的起点向量是照相机， 射线的方向向量是照相机到点击的点，这个向量应该归一标准化。
        var raycaster = new THREE.Raycaster(
          this.camera.position,
          vector.sub(this.camera.position).normalize()
        );
        raycaster.setFromCamera(this.mouse, this.camera);
        // 射线和模型求交，选中一系列直线
        // var intersects = raycaster.intersectObjects(this.scene.children);
        var intersects = raycaster.intersectObjects(this.group1.children, true);
      });
    },