threejs 微信小程序原生版本的使用 obj模型的加载

直接上代码,

<canvas class="webgl" type="webgl" id="gl" bindtouchstart="onTX" bindtouchend="onTX" bindtouchmove="onTX" style="width:100vw;height:90vh"></canvas>
const common_vendor = require("../../common/vendor.js");

Page({

  onLoad() {
    const query = common_vendor.index.createSelectorQuery().in(this);
    query.select("#gl").boundingClientRect((x) => {
      this.win = x;
    }).exec();
    common_vendor.index.createSelectorQuery().select("#gl").node().exec((res) => {
      const canvas = this.canvas = res[0].node;
      this.platform = new common_vendor.WechatPlatform(canvas);
      common_vendor.PLATFORM.set(this.platform);
      const scene = this.scene = new common_vendor.Scene();
      scene.background = new common_vendor.Color(16777200);
      scene.add(new common_vendor.AmbientLight(16777215, 1));
      scene.add(new common_vendor.DirectionalLight(16777215, 1));
      const camera = this.camera = new common_vendor.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1e3);
      camera.position.set(0, 7, 15);
      const renderer = new common_vendor.WebGL1Renderer({ canvas, antialias: true, alpha: true });
      renderer.outputEncoding = common_vendor.sRGBEncoding;
      renderer.setSize(canvas.width, canvas.height);
      renderer.setPixelRatio(common_vendor.$window.devicePixelRatio);
      const controls = new common_vendor.OrbitControls(camera, canvas);
      controls.enableDamping = true;
      controls.dampingFactor = 0.25;
      controls.enableZoom = true;
      var textureLoader = new common_vendor.TextureLoader();
      var texture = textureLoader.load("https://files.ifok.cn/m2photo");
      texture.minFilter = common_vendor.LinearFilter;
      var bump = textureLoader.load("https://files.ifok.cn/security_sign/design_fabric_skin/fabric004.png");
      const loader = new common_vendor.OBJLoader();
      loader.load("https://files.ifok.cn/m2_obj/x.obj", (object) => {
        object.traverse((child) => {
          child.material = new common_vendor.MeshStandardMaterial({
            color: 11119017,
            side: common_vendor.DoubleSide,
            map: texture,
            bumpMap: bump,
            bumpScale: 2
          });
        });
        object.scale.set(0.1, 0.1, 0.1);
        object.position.set(0, -10, 0);
        scene.add(object);
        this.clo_object = object;
      }, () => {
      }, () => {
      });
      const axesHelper = new common_vendor.AxesHelper(10);
      scene.add(axesHelper);
      this.raycaster = new common_vendor.Raycaster();
      this.mouse = new common_vendor.Vector2();
      const render = () => {
        if (!this.disposing)
          this.frameId = common_vendor.$requestAnimationFrame(render);
        controls.update();
        renderer.render(scene, camera);
      };
      render();
    });
  },

  onTX(e) {
    this.platform.dispatchTouchEvent(e);
  }
})

我使用的是three-platformize,可以通过npm install的方式直接安装的,小程序原生的npm我还没有试过,加载进去后用THREE替换掉common_vendor即可,加载器那里需要导入OBJLoader,然后就可以直接用了

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序是一种可以在微信平台上进行开发和使用的应用程序。而FBX模型是一种常见的三维模型格式,用于存储复杂的三维模型和动画数据。 在微信小程序加载FBX模型需要经过一定的处理步骤。首先,需要将FBX模型转换为小程序支持的格式,例如GLTF或OBJ。这可以通过使用专门的软件或在线工具进行转换操作来实现。 转换完成后,可以将转换后的模型文件上传到微信小程序的资源目录中。接下来,在小程序的代码中使用WebGL或WebGL2来创建一个实例,并通过代码加载模型文件。加载过程中可以添加一些加载进度提示,以提升用户体验。 一旦模型加载完成,可以通过小程序的canvas元素将模型渲染出来,并通过代码控制模型的交互和动画效果。在展示模型时,还可以添加一些交互功能,如旋转、放大、选取等,以增加用户的互动体验。 需要注意的是,加载FBX模型可能会占用较多的计算资源和内存,因此在开发时应注意性能优化和资源管理,以保证小程序的流畅运行。另外,对模型文件的大小也要进行一定的优化,以便更快地加载和渲染模型。 总之,通过以上的步骤,我们可以在微信小程序中成功加载和展示FBX模型,为用户提供更加丰富和有趣的体验。 ### 回答2: 微信小程序是一种可以在微信中进行开发和发布的应用程序,而FBX是一种常用的三维模型文件格式。在微信小程序加载FBX模型需要经过以下几个步骤。 首先,我们需要将FBX模型文件转换为小程序支持的格式。由于小程序不直接支持FBX文件,我们可以使用第三方的工具或库将FBX文件转换为小程序支持的模型格式,如GLTF或OBJ。这些格式在小程序中可以能够被加载和显示。 其次,我们需要在小程序的代码中引入模型文件,并进行加载和渲染。在小程序的代码中,我们可以引入相关的三维渲染库或插件,如THREE.js或WebGL,在其中使用加载模型文件的方法来加载和显示模型。通过设置相应的位置、旋转、缩放和纹理等属性,可以调整模型小程序中的显示效果。 接下来,我们需要为加载模型添加交互功能。小程序提供了丰富的交互API,我们可以通过绑定事件监听器来实现模型的交互功能,如点击、拖动、旋转等操作。通过监听用户的操作,我们可以对模型进行相应的响应和更新。 最后,我们需要将加载模型进行适当的优化和调整,以保证在小程序中的性能和显示效果。由于小程序的资源和性能限制,我们可能需要对模型进行压缩、降低面数或调整材质参数等操作,以提高小程序的运行效率和加载速度。 综上所述,通过转换模型文件格式、加载和渲染模型、添加交互功能以及优化调整模型,我们可以在微信小程序中成功加载和显示FBX模型,并实现丰富的交互体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值