aframe - A-Frame Web AR自拍相机“试戴眼镜”交换模型
问题描述
我试图创建一个简单的 web-AR,用户可以通过按下按钮试戴不同的眼镜。
这是我的 body.html
<div id="nextbutton" style="display: none; z-index: 30">
<h2>Next 3D Model</h2>
</div>
<a-scene
next-button
xrextras-almost-there
xrextras-loading
xrextras-runtime-error
xrextras-pause-on-hidden
renderer="maxCanvasWidth: 960; maxCanvasHeight: 960"
xrface="mirroredDisplay: true; meshGeometry: eyes, face, mouth; cameraDirection: front; allowedDevices: any;">
<a-assets>
<a-asset-item id="glassesModel" class="cantap" src="./assets/Models/stereo-glasses.glb"></a-asset-item>
<a-asset-item id="glasses2Model" class="cantap" src="./assets/Models/stereo-glasses2.glb"></a-asset-item>
</a-assets>
<xrextras-capture-button></xrextras-capture-button>
<xrextras-capture-preview></xrextras-capture-preview>
<a-camera look-controls="enabled: false"
wasd-controls="enabled: false"
position="0 1.6 0"
raycaster="objects: .cantap"
cursor="
fuse: false;
rayOrigin: mouse;"></a-camera>
<xrextras-faceanchor>
<xrextras-face-attachment point="noseBridge">
<a-entity id="model" gltf-model="#glassesModel" scale="1.1 1.1 1.1" position="0 0.05 0">
<a-plane
position="0.25 -0.01 0"
height="0.25"
width="0.4"
side="back"
depth-write="false"
color="#7611B6"
opacity="0.5"
roughness="0.25"
></a-plane>
<a-plane
position="-0.25 -0.01 0"
height="0.25" width="0.4"
side="back"
depth-write="false"
color="#FFC828"
opacity="0.5"
roughness="0.25"
></a-plane>
</a-entity>
</xrextras-face-attachment>
</xrextras-faceanchor>
<a-light type="directional" target="#face" position="0 1.8 3" intensity="0.8"></a-light>
<a-light type="ambient" intensity="0.8"></a-light>
</a-scene>
现在,a-entity“#glassesModel”已修复,我只是不知道如何将它与模型列表中的另一个交换 - “#glasses2Model”。
以下是必须激活不同眼镜交换的按钮的代码。
const nextButtonComponent = () => ({
init: function() {
const modelList = ["glassesModel", "glasses2Model"]
const model = document.getElementById('model')
const nextButton = document.getElementById('nextbutton')
nextButton.style.display = 'block'
let idx = 1 // Start with the 2nd model as 1st is already in the scene on page load
const nextModel = () => {
// Need to remove gltf-component first due to AFrame regression: https://github.com/aframevr/aframe/issues/4341
model.removeAttribute('gltf-model')
// Switch to next model in the list
model.setAttribute('gltf-model', `#${modelList[idx]}`)
idx = (idx + 1) % modelList.length
}
nextButton.onclick = nextModel // Switch to the next model when the button is pressed.
}
})
export {nextButtonComponent}
解决方案
多亏了 A-Frame discord 频道的好人,我才能让它工作。我将.cantap
类添加到错误的元素中。而不是<a-asset-item>
元素,它应该被分配给<a-entity>
:。
<a-entity
id="model"
gltf-model="#glassesModel"
class="cantap"
scale="1.1 1.1 1.1"
position="0 0.05 0">
这样<a-camera>
就知道哪些对象是可替换的。
<a-camera
id="camera"
look-controls="enabled: false"
wasd-controls="enabled: false"
position="0 1.6 0"
raycaster="objects: .cantap"
cursor=" fuse: false;
rayOrigin: mouse;"></a-camera>
所有这些都与next-button
JS 很好地结合在一起。
const nextButtonComponent = () => ({
init: function() {
const modelList = ["glassesModel", "glasses2Model", "duckModel", "foxModel"]
const model = document.getElementById('model')
const nextButton = document.getElementById('nextbutton')
nextButton.style.display = 'block'
let idx = 1 // Start with the 2nd model as 1st is already in the scene on page load
const nextModel = () => {
// Need to remove gltf-component first due to AFrame regression: https://github.com/aframevr/aframe/issues/4341
model.removeAttribute('gltf-model')
// Switch to next model in the list
model.setAttribute('gltf-model', `#${modelList[idx]}`)
idx = (idx + 1) % modelList.length
}
nextButton.onclick = nextModel // Switch to the next model when the button is pressed.
}
})
export {nextButtonComponent}
推荐阅读
- javascript - 输入不是有效的 Base-64 字符串,因为它包含使用 jsPDF-autotable、jspdf 和 smtjs 的非 base 64 字符
- flutter - Flutter 上从静态路由到动态路由的优势
- python - 没有名为“watchdog.observers”的模块;“看门狗”不是一个包
- r - 将一些观察移动到不同的行
- php - 如何使用 mysite.com 隐藏此网址
- php - Symfony 5.1.3 清除缓存时的问题:尝试从命名空间加载类“MappingDriverChain”
- php - api 平台,修复 iri 转换器
- javascript - 如何创建一个函数,该函数将函数作为其参数之一作出反应
- kubernetes - 如何在扩展另一个节点之前告诉 Kubernetes 完整的整个节点?
- css - 在悬停状态下加载新的相同图像