Is there a limit to how far back something can be generated?

[csustan]

I'm making a very large cube with double-sided faces that people can walk into. I did this originally with the ARJS library and a large marker, but I'd rather implement ARnft's amazing ability to use images. I've hit a snag -- if I generate a cube and stretch it into a long bar, there seems to be a maximum back distance beyond the marker where the bar simply stops rendering. At first, I thought this was a Far Clipping Plane issue, but no matter how far back I push the Far Clipping Plane, the bar simply stops existing. I've added a spin to the bar so I can watch it hit this invisible barrier and vanish.

Does anyone know what I'm missing?

[csustan]

If it helps, here's my code:

<title>One-Ton Cube</title>

<a href="info.html" class="ui marker"
    target="_blank">
    Click here to learn more
</a>

<script src="js/third_party/three.js/three.js"></script>
<script src="js/ARnftThreejs.js"></script>
<script src="../dist/ARnft.js"></script>

<script>
    const entities = [
        { name: 'pinball', markerUrl: "examples/DataNFT/pinball" }
    ]
    let width = 640;
    let height = 480;
    ARnft.ARnft.initWithEntities(width, height, entities, 'config.json', true)
        .then((nft) => {

            const textureOpacity = 0.75;

            // Load the texture once
            const texture = new THREE.TextureLoader().load('./Data/CarbonTexture_01.png');

            // Create a single instance of MeshStandardMaterial
            const imageMaterial2 = new THREE.MeshStandardMaterial({
                map: texture, // Assign the texture
                transparent: true,
                opacity: textureOpacity,
                side: THREE.DoubleSide // Render both sides of the geometry
            });

        
            /*
            // Load the PNG image as a texture
            const textureLoader = new THREE.TextureLoader();
            const textureCube = textureLoader.load('Data/CarbonTexture_01.png');

            // Create a material using the texture
            var imageMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true, opacity: 0.70, side: THREE.DoubleSide  });
            */
            /*
            const loader = new THREE.CubeTextureLoader();
            loader.setPath('Data/');

            const textureCube = loader.load([
                'CarbonTexture_01.png', 'CarbonTexture_01.png',
                'CarbonTexture_01.png', 'CarbonTexture_01.png',
                'CarbonTexture_01.png', 'CarbonTexture_01.png'
            ]);
            
            const imageMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: textureCube, transparent: true, opacity: 0.70, side: THREE.DoubleSide });
            */

            let boxGeom = new THREE.BoxGeometry(1, 1, 1);
            //let cube = new THREE.Mesh(boxGeom, imageMaterial);
            let cube = new THREE.Mesh(boxGeom, imageMaterial2);
            //let cube = new THREE.Mesh(boxGeom, mat);
            cube.name = 'cube';
            //cube.position.z = -50; //90; //90 on the Z-Axis will place the cube on the marker, Zero will place the marker inside the cube.
            //cube.position.x = 800; //This will need to be a few feet off the ground.
            cube.position.set(0, 100, -50); //cube.position.set(x,y,z)
            cube.scale.set(1600.62, 100, 100);

            const displayGroup1 = new THREE.Group();
            displayGroup1.add(cube);
            let testEntities = ARnft.ARnft.getEntities();
            console.log("entities from getEntities static method: ", testEntities);

            document.addEventListener('containerEvent', function (ev) {

                let canvas = document.getElementById('canvas');
                let fov = 90;//was: 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": .01,//0.01,
                        "far": 20000 //was 1000
                    }
                }

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

                window.addEventListener('getMatrixGL_RH-' + nft.uuid + '-pinball', function () {
                    console.log('Current Position:');
                    console.log('cube.position.y: ' + cube.position.y);
                    console.log('cube.position.x: ' + cube.position.x);
                    console.log('cube.position.z: ' + cube.position.z);
                });

                let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
                nftAddTJS.add(displayGroup1, 'pinball', false);
                let names = nftAddTJS.getNames();
                console.log(names);

                const tick = () => {
                    //Animation
                    cube.rotation.y += .005;
                    sceneThreejs.draw();
                    window.requestAnimationFrame(tick)
                }
                tick();

            })
        }).catch((error) => {
            console.log(error);
        });            
</script>

[kalwalt]

I don't see anything wrong in your code, buy consider that a NFT Marker can be recognized until a certain distance, you can recreate the markers with more DPI, but not esagerate max 350, 400 DPI Is enough. I can not test your code because i am on holiday all the week...🙂

[csustan]

Thank you for the fast response! I'll keep playing with it. The plan is to print a three-foot tall marker, but testing it with a normal sized marker revealed the disappearing cube issue.
Enjoy your vacation!