Skip to content

Feature: give the option to customize OEF. #328

@kalwalt

Description

@kalwalt

Discussed in #327

Originally posted by v-litvintsev October 31, 2024
Hi! I cannot edit interpolationFactor, while in the react-three-arnft library interpolationFactor can be changed for ARCanvas, is it possible to change interpolationFactor without using react-three-arnft?

Or I can edit it only without ARnft class as in the example: https://kalwalt.github.io/jsartoolkit5/examples/nft_improved_worker/main_threejs_wasm_worker.html

import * as THREE from "three";
import { ARnft } from "@webarkit/ar-nft";
import ARnftThreejs from "@webarkit/arnft-threejs";

let width = window.innerWidth;
let height = window.innerHeight;
ARnft.init(
  width,
  height,
  [["/DataNFT/pinball"]],
  [["pinball"]],
  "/configs/config.json",
  0
)
  .then((nft) => {
    document.addEventListener("containerEvent", function (ev) {
      let canvas = document.getElementById("canvas");
      let fov = (0.8 * 180) / Math.PI;
      let ratio = width / height;
      let config = {
        renderer: {
          alpha: true,
          antialias: true,
          context: null,
          precision: "mediump",
          premultipliedAlpha: true,
          stencil: true,
          depth: true,
          logarithmicDepthBuffer: true,
        },
        camera: {
          fov: fov,
          ratio: ratio,
          near: 0.01,
          far: 1000,
        },
      };

      let sceneThreejs = new ARnftThreejs.SceneRendererTJS(
        config,
        canvas,
        nft.uuid,
        true
      );

      sceneThreejs.initRenderer();

      let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);

      let imgConfig = { w: 1, h: 1, ws: 1, hs: 1 };
      nftAddTJS.addImage(
        "https://cdn.culture.ru/c/641257.jpg",
        "pinball",
        0xbbbbff,
        180,
        imgConfig,
        false
      );

      const tick = () => {
        sceneThreejs.draw();
        window.requestAnimationFrame(tick);
      };
      tick();
    });
  })
  .catch((error) => {
    console.log(error);
  });
```</div>

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions