Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
3d-nft-viewer
Advanced tools
Readme
The 3D NFT Viewer is used to display an interactive ThreeJS view of 3D models which have been minted as an NFT on the DeSo blockchain.
3D NFTs are essentials 3D model files which have been uploaded to a permanent decentralized storage network.
Metadata about the 3D model including the URL are stored in a Post transaction on the DeSo blockchain and minted to create a Non Fungible Token which can be bought and sold like any other NFT.
This repo contains front and back end code which can be used separately or in combination as in the demo.
npm install 3d-nft-viewer
In the example below nftPostHashHex is the token that identifies the individual NFT You will see this during the minting process and on any DeSo node that displays your NFT.
https://docs.deso.org/for-developers/backend/blockchain-data/basics/data-types#postentryresponse
var express = require('express');
var router = express.Router();
var D3DNFT = require('3d-nft-viewer');
router.post('/:nftPostHashHex', (req, res) => {
const nftPostHashHex = req.params.nftPostHashHex;
let nftReader = new D3DNFT.NFTReader({
nodeEndpoint: 'https://node.deso.org/api/v0/', // DeSo API Endpoint (any node can be used)
readerPublicKey: '<Your DeSo Public Key>',
modelStorageDir: 'public/models/' // public directory to serve the model files
});
nftReader.retrieveNFT(nftPostHashHex)
.then((responseJson)=>{
res.send(responseJson);
}).catch((responseJson)=>{
console.log(responseJson);
console.log('retrieveNFT error');
res.send(responseJson);
});
});
module.exports = router;
<head>
<title>3D NFT Viewer</title>
<link rel='stylesheet' href='/css/styles.css' />
</head>
<body>
<div class="container">
<img class="nft-preview" src="https://images.deso.org/746201e0167a8176c3c0ca2b141b4ed2c92442a1d16a55ab999a558e8a831a28.gif"/>
</div>
<p class="nft-viewer" data-nft="0b88277db8b3ddac74537b3f5b10897865e0fea5edcc47c86547a36fd5cf6693">Loading...</p>
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/three"
}
}
</script>
<script type="module">
// Find the latest version by visiting https://cdn.skypack.dev/three.
import * as THREE from 'three';
import { OrbitControls } from 'https://unpkg.com/three@0.139.1/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.139.1/examples/jsm/loaders/GLTFLoader.js';
import { XRControllerModelFactory } from '/js/webxr/XRControllerModelFactory.js';
import { VRButton } from '/js/D3D_VRButton.js';
import { D3DNFTViewer } from '/js/3dviewer.js'
//initialize NFT viewer front end
let nftViewer = new D3DNFTViewer({
three: THREE,
GLTFLoader: GLTFLoader,
OrbitControls: OrbitControls,
XRControllerModelFactory: XRControllerModelFactory,
VRButton: VRButton,
ctrClass: 'nft-viewer', // class of div which has posthashhex attribute
nftDataAttr: 'data-nft', // Name of attribute of of div.ctrClass which contains posthashhex
nftsRoute: 'nfts', // Back end route to initialize NFTs
modelsRoute: 'models', // Back end route to load models
linkText: 'View in 3D',
previewCtrCls: 'container', //container element in which to create the preview
skyboxes: true
});
nftViewer.initNFTs();
</script>
</body>
</html>
FAQs
Display 3D NFTs using ThreeJS to render model stored on arweave and minted on DeSo
The npm package 3d-nft-viewer receives a total of 48 weekly downloads. As such, 3d-nft-viewer popularity was classified as not popular.
We found that 3d-nft-viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.