问题描述
我是AR.js的新手，我一直在尝试将NFT标记与Three.js和自定义图像一起使用来弹出模型。它在localhost上运行良好，但是当我在github页面上上传时，ar-nft.js中出现404“ onError”。我尝试将ar-nft的链接更改为https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-nft.js，但仍然给出错误。我假设描述符URL在服务器上找不到数据nft文件。如果是这样，我不确定如何链接它。
整个项目位于https://github.com/pillipillow/ARjs-with-Threejs
下面的代码来自https://github.com/pillipillow/ARjs-with-Threejs/blob/main/nft-tracking.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
<title>Viewport</title>
<link rel ="stylesheet" href="css/main.css">
</head>
<body>
<script src = "libs/threeJS/three.min.js"></script>
<script src = "https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-nft.js"></script>
<script>THREEx.artoolkitContext.baseURL = "libs/arJS/"</script>
<script type= "module">
import { GLTFLoader } from './libs/jsm/GLTFLoader.js';
var scene,camera,renderer,clock;
var artoolkitSource,artoolkitContext;
var markerRoot;
var model;
init();
update();
function init()
{
// Scene
scene = new THREE.Scene();
// Camera
camera = new THREE.Camera();
scene.add(camera);
// Renderer
renderer = new THREE.Webglrenderer({
antialias: true,alpha: true,});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(new THREE.Color('lightgrey'),0)
renderer.setSize( window.innerWidth,window.innerHeight );
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
document.body.appendChild( renderer.domElement );
clock = new THREE.Clock();
// artoolkitSource
artoolkitSource = new THREEx.artoolkitSource({
sourceType : 'webcam',sourceWidth: 1280,sourceHeight: 720,displayWidth : 1280,displayHeight: 720
})
function onResize(){
artoolkitSource.onResizeElement()
artoolkitSource.copyElementSizeto(renderer.domElement)
if( artoolkitContext.arController !== null ){
artoolkitSource.copyElementSizeto(artoolkitContext.arController.canvas)
}
}
artoolkitSource.init(function onReady(){
// use a resize to fullscreen mobile devices
setTimeout(function() {
onResize();
},1000);
})
// handle resize
window.addEventListener('resize',function(){
onResize();
})
window.addEventListener('arjs-nft-loaded',function(ev){
console.log(ev);
})
// artoolkitContext
artoolkitContext = new THREEx.artoolkitContext({
cameraParametersUrl: "libs/arJS/data/camera_para.dat",detectionMode: "color",});
// copy projection matrix to camera when initialization complete
artoolkitContext.init( function onCompleted(){
camera.projectionMatrix.copy( artoolkitContext.getProjectionMatrix() );
});
// Ar Marker
markerRoot = new THREE.Group();
scene.add(markerRoot);
var markerControls = new THREEx.ArMarkerControls(artoolkitContext,markerRoot,{
type: "nft",descriptorsUrl: "assets/datanFT/coloring3d-bear-small",smooth: true,smoothCount : 10,smoothTolerance : 0.01,smoothThreshold : 5
})
var texture = new THREE.TextureLoader().load("assets/images/bird-render.png");
var alphaTexture = new THREE.TextureLoader().load("assets/images/bird-alpha.png")
texture.flipY = false;
alphaTexture.flipY = false;
var material = new THREE.MeshBasicMaterial({
map : texture,alphaMap : alphaTexture,alphaTest : 0.5,transparent : false,side: THREE.DoubleSide});
var videoTexture = new THREE.VideoTexture(artoolkitSource.domElement);
videoTexture.flipY = false;
var videoMaterial = new THREE.MeshBasicMaterial({map : videoTexture});
// Place the model
const loader = new GLTFLoader();
loader.load(
"assets/models/bird.glb",function(gltf)
{
model = gltf.scene.children[0];
model.name = "Bird";
model.scale.set(30,30,30);
model.position.set(130,130,-130);
model.traverse((o) => {
if (o.isMesh) o.material = material;
});
markerRoot.add(model);
},// called while loading is progressing
function ( xhr )
{
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},// called when loading has errors
function ( error )
{
console.log( 'An error happened' );
}
)
/*var geometry = new THREE.BoxGeometry(30,30);
var material = new THREE.MeshBasicMaterial({color : 0xFF0000});
var mesh = new THREE.Mesh(geometry,material);
mesh.position.set(150,150,-150);
markerRoot.add(mesh);*/
}
function update()
{
requestAnimationFrame(update);
if(markerRoot.visible)
{
//model.rotation.z += 0.01;
}
// update artoolkit on every frame
if ( artoolkitSource.ready !== false )
{
artoolkitContext.update( artoolkitSource.domElement );
}
renderer.render(scene,camera);
}
</script>
</body>
</html>
解决方法
尝试NFT-Marker-Creator。安装程序可能如下所示：
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">
</script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>