Generative project in three.js - creation page not working

Support
,
1

Hi everybody, here’s my first post.
I’m fabiello, doing some cryptoart since 2020.
We would like to mint a collaboration on Highlight, a generative project done in three.js. The resulting Nft would be a 3D object animated (with the option to download it as .glb file)
It works testing it locally using the hl-gen.js.
But it doesnt work in the creation page or HighlightStudio, I get:
“Token details
Waiting for data…”

I added this code to generate a preview image:
function capturePreview() {
renderer.render(scene, camera);
const previewImageURL = renderer.domElement.toDataURL(‘image/png’);
hl.token.capturePreview(previewImageURL);
}

Is Highlight gallery able to display 3d objects and let user interact with them (rotating, zooming, moving) , as I can do in a browser page?

Thanks any help appreciated

2

Hello there!
Highlight is able to display interact-able 3D objects! It renders your code in an iframe which usually contains a canvas element where you display your 2D/3D artwork.

the hl.token.capturePreview(previewImageURL); is not the correct syntax. the capturePreview function does not take any arguments. You can set it on the creation page, whether you wish to capture the whole screen or an element in your page. The code then takes a screenshot of that area and uses that as a preview image.

As for the HL studio showing “Token details Waiting for data…”, be sure to include the hl-studio script.

I suggest you take a quick look at the FAQs here:

Good luck!

1 Like
3

yes it is :slight_smile:
Actually I can get it work using a CDN for three.js libraries,
but when I try to upload them in my project and use importmap in my html, it doesnt work I get 404 error

<script type="importmap">
    {
        "imports": {
            "three": "./libs/three/build/three.module.min.js",
            "three/addons/OrbitControls": "./libs/three/examples/jsm/controls/OrbitControls.js",
            "three/addons/MTLLoader": "./libs/three/examples/jsm/loaders/MTLLoader.js",
            "three/addons/OBJLoader": "./libs/three/examples/jsm/loaders/OBJLoader.js",
            "three/addons/GLTFExporter": "./libs/three/examples/jsm/exporters/GLTFExporter.js"
        }
    }
</script>

Is it an expected behaviour? I tried path, /path, ./path, …/path but nothing seems to work.

4

Ok, I found out that GLTFExporter was requiring utils/TextureUtils.js
adding it to my project solved the problem to locally load three.js.

this works:

“imports”: {
“three”: “./libs/three/build/three.module.min.js”,
“three/addons/”: “./libs/three/examples/jsm/”
}