我正在尝试构建应用程序，但未加载图像 NFT 标记。我已经生成并将所有标记保存在项目结构根目录中的标记文件夹中。我正在使用这些库 - https://ar-js-org.github.io/AR.js-Docs/image-tracking/#create-image-descriptors
我正在尝试让应用程序根据所选问题检测标记，并在相机检测到标记时显示相应的 3d 模型。但它根本没有加载标记。
我尝试添加日志，但没有任何帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AR Web App</title>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
#initial-state-toynama {
position: absolute;
background-color: pink;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
}
#toynama-title {
font-size: 48px;
margin-bottom: 24px;
}
#question {
font-size: 36px;
text-align: center;
margin-bottom: 24px;
}
#find-magnet {
background-color: orange;
border: none;
font-size: 24px;
padding: 12px 24px;
cursor: pointer;
}
#go-back {
position: fixed;
bottom: 16px;
right: 16px;
background-color: orange;
border: none;
font-size: 24px;
padding: 12px 24px;
cursor: pointer;
z-index: 1;
}
</style>
<script>
// Log any errors when loading A-Frame and AR.js
window.addEventListener('error', function (event) {
console.error('Error loading script:', event.target.src);
}, true);
AFRAME.registerComponent('nft-debug', {
init: function () {
console.log('nft-debug init');
this.el.sceneEl.addEventListener('arjs-nft-loaded', (event) => {
console.log('NFT marker loaded:', event.detail.markerIndex);
});
this.el.sceneEl.addEventListener('arjs-nft-found', (event) => {
console.log('NFT marker found:', event.detail.markerIndex);
showMessage('NFT marker found!');
});
this.el.sceneEl.addEventListener('arjs-nft-lost', (event) => {
console.warn('NFT marker lost:', event.detail.markerIndex);
showMessage('NFT marker lost. Try again.');
});
},
});
</script>
</head>
<body>
<div id="initial-state-toynama">
<div id="toynama-title">TOYNAMA</div>
<div id="question"></div>
<button id="find-magnet">Find the magnet</button>
</div>
<button id="go-back" style="display: none;">Go back to flash cards</button>
<a-scene id="ar-scene"
style="display: none;"
nft-debug vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: true;">
<a-entity nft-debug camera></a-entity>
<a-nft></a-nft>
</a-scene>
<script>
const questions = [{ text: "Which frosty mountain pass connects Tawang to the rest of India?", marker: "file1", model: "animation1" },
{ text: "Which palace is also known as the City of Palaces in South India?", marker: "file2", model: "animation2" },
{ text: "Which magical waterways are famous for their enchanting houseboats?", marker: "file3", model: "animation3" },
{ text: "Which Buddhist monument has a big, round dome and is famous in Madhya Pradesh?", marker: "file4", model: "animation4" },
{ text: "Which stunning railway station in Mumbai looks like a royal palace?", marker: "file5", model: "animation5" },
{ text: "Which floating lake in Manipur has cute and unique floating islands?", marker: "file6", model: "animation6" },
{ text: "Which waterfall in Meghalaya is the tallest plunge waterfall in India?", marker: "file7", model: "animation7" },
{ text: "Which picturesque village in Mizoram offers a breathtaking view of the hills?", marker: "file8", model: "animation8" },
{ text: "Which ancient ruins in Assam tell a story of a bygone kingdom?", marker: "file9", model: "animation9" },
{ text: "Which magnificent temple in Odisha is shaped like a giant chariot?", marker: "file10", model: "animation10" },
{ text: "Which beautiful temple in Amritsar is covered in shiny gold?", marker: "file11", model: "animation11" },
{ text: "Which national park in Assam is home to the one-horned rhinoceros?", marker: "file12", model: "animation12" },
{ text: "Which Palace of Winds in Jaipur has a honeycomb-like structure?", marker: "file13", model: "animation13" },
{ text: "Which beautiful glacial lake in Sikkim changes colors with the seasons?", marker: "file14", model: "animation14" },
{ text: "Which colorful temple in Madurai is dedicated to a goddess with a parrot?", marker: "file15", model: "animation15" },
{ text: "Which monument in Hyderabad has four tall minarets touching the sky?", marker: "file16", model: "animation16" },
{ text: "Which rock-cut site in Tripura has a million carvings of gods and goddesses?", marker: "file17", model: "animation17" },
{ text: "Which white marble wonder in Agra is one of the Seven Wonders of the World?", marker: "file18", model: "animation18" },
{ text: "Which beautiful valley in Uttarakhand is filled with colorful flowers?", marker: "file19", model: "animation19" },
{ text: "Which busy bridge in Kolkata connects two sides of the Hooghly River?", marker: "file20", model: "animation20" },
{ text: "Which old jail in Andaman and Nicobar Islands is also known as Black Waters?", marker: "file21", model: "animation21" },
{ text: "Which seaside fortress in Gujarat was once ruled by the Portuguese?", marker: "file22", model: "animation22" },
{ text: "Which sacred temple in Bihar marks the place where Buddha found enlightenment?", marker: "file23", model: "animation23" },
{ text: "Which shimmering lake in Kashmir is surrounded by snow-capped mountains?", marker: "file24", model: "animation24" },
{ text: "Which cascading waterfall in Meghalaya creates a beautiful pool of green water?", marker: "file25", model: "animation25" },
{ text: "Which quirky garden in Chandigarh is made from recycled materials?", marker: "file26", model: "animation26" },
{ text: "Which historic fort in Delhi was once home to Mughal emperors?", marker: "file27", model: "animation27" },
{ text: "Which peaceful stupa in Leh is famous for its beautiful view of the mountains?", marker: "file28", model: "animation28" },
{ text: "Which international township in Pondicherry promotes human unity and peace?", marker: "file29", model: "animation29" },
{ text: "Which horseshoe-shaped waterfall in Chhattisgarh is called the Niagara Falls of India?", marker: "file30", model: "animation30" },
{ text: "Which 17th-century fort in Goa has a beautiful view of the Arabian Sea?", marker: "file31", model: "animation31" },
{ text: "Which vast, white desert in Gujarat is famous for its amazing salt flats?", marker: "file32", model: "animation32" },
{ text: "Which national park in Haryana is a birdwatcher's paradise?", marker: "file33", model: "animation33" },
{ text: "Which charming train in Shimla takes you on a scenic journey through the mountains?", marker: "file34", model: "animation34" },
{ text: "Which sacred temple in Jharkhand is an important pilgrimage site for Jains?", marker: "file35", model: "animation35" },
{ text: "Which famous temple in Andhra Pradesh is dedicated to Lord Venkateswara?", marker: "file36", model: "animation36" }
];
const initialStateToynama = document.getElementById('initial-state-toynama');
const questionElement = document.getElementById('question');
const findMagnetBtn = document.getElementById('find-magnet');
const goBackBtn = document.getElementById('go-back');
const scene = document.querySelector('a-scene');
function getRandomQuestion() {
return questions[Math.floor(Math.random() * questions.length)];
}
function setQuestion() {
const randomQuestion = getRandomQuestion();
questionElement.textContent = randomQuestion.text;
questionElement.dataset.marker = randomQuestion.marker;
questionElement.dataset.model = randomQuestion.model;
}
async function loadNFTModel(marker, model) {
console.log(`Marker: ${marker}`);
console.log(`Model: ${model}`);
console.log('Loading NFT model...');
clearNFTModel();
const nft = document.createElement('a-nft');
console.log(`Creating a-nft element for marker: ${marker}`);
nft.setAttribute('type', 'nft');
nft.setAttribute('url', `./markers/${marker}.fset`);
nft.setAttribute('smooth', 'true');
nft.setAttribute('smoothCount', '10');
nft.setAttribute('smoothTolerance', '.01');
nft.setAttribute('smoothThreshold', '5');
const entity = document.createElement('a-entity');
console.log(`Creating a-entity for model: ${model}`);
entity.setAttribute('gltf-model', `./animations/${model}.gltf`);
entity.setAttribute('scale', '1 1 1');
entity.setAttribute('position', '0 0 0');
console.log('Appending entity to a-nft');
nft.appendChild(entity);
console.log('Appending a-nft to the scene');
scene.appendChild(nft);
console.log('Showing ar-scene');
document.getElementById("ar-scene").style.display = "block";
}
function clearNFTModel() {
console.log('Clearing NFT model...');
const nft = scene.querySelector('a-nft');
if (nft) {
scene.removeChild(nft);
}
document.getElementById("ar-scene").style.display = "none";
}
function showFlashCard() {
initialStateToynama.style.display = 'flex';
goBackBtn.style.display = 'none';
setQuestion();
}
function hideFlashCard() {
initialStateToynama.style.display = 'none';
goBackBtn.style.display = 'block';
}
findMagnetBtn.addEventListener('click', () => {
console.log('Marker:', questionElement.dataset.marker);
console.log('Model:', questionElement.dataset.model);
hideFlashCard();
loadNFTModel(questionElement.dataset.marker, questionElement.dataset.model);
});
goBackBtn.addEventListener('click', () => {
clearNFTModel();
showFlashCard();
});
setQuestion();
function showMessage(message) {
const messageElement = document.createElement('div');
messageElement.textContent = message;
messageElement.style.position = 'fixed';
messageElement.style.top = '16px';
messageElement.style.right = '16px';
messageElement.style.backgroundColor = 'white';
messageElement.style.border = '2px solid black';
messageElement.style.padding = '8px';
messageElement.style.zIndex = '1';
document.body.appendChild(messageElement);
setTimeout(() => {
document.body.removeChild(messageElement);
}, 3000);
}
</script>
</body>
</html>