Hello,
I want to display the popup text object on the corner or edge of a cube like this. How can I detect the left corner or edge of the target image of the cube?
Using one of the faces as an image target, I’d suggest setting a position/rotation offset to get your content placed and oriented as desired.
Using A-Frame: Image Targets Flyer | 8th Wall | 8th Wall as a starting point, you could do something like this (play around with the position and rotation values to get the desired placement:
<xrextras-named-image-target name="my-image-target-name">
<!-- Add a child entity that can be positioned/rotated independently of the image target. -->
<a-entity
gltf-model="#my-glb"
position="0.5 0.5 0"
rotation="0 45 0"
></a-entity>
</xrextras-named-image-target>
Thank you Tony.
I just test it with this code, but issue occurred like this.
%ccore:a-node:error %cFailure loading node: %c color: red color: inherit color: red Error: [xrextras-hold-drag] Couldn’t find camera with id ‘camera’
<!-- Copyright (c) 2022 8th Wall, Inc. -->
<!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->
<a-scene
xrextras-gesture-detector
landing-page
xrextras-loading
xrextras-runtime-error
renderer="colorManagement:true; webgl2: true;"
xrweb="disableWorldTracking: true">
<a-assets>
<a-asset-item id="jelly-glb" src="assets/jellyfish-model.glb"></a-asset-item>
<!-- <a-asset-item id="people-glb" src="./assets/models/people.glb"></a-asset-item> -->
<a-asset-item id="people-glb" src="./assets/models/MOCAP_PEOPLE.glb"></a-asset-item>
<a-asset-item id="pride-glb" src="./assets/models/MOCAP_PRIDE.glb"></a-asset-item>
<img id="jelly-thumb" src="assets/video-thumbnail.jpg">
<img id="sotc-thumb-1" src="assets/img/1-thumb.png">
<img id="sotc-1" src="assets/img/1.png">
<img id="sotc-2" src="assets/img/2.png">
<img id="sotc-3" src="assets/img/3.png">
<img id="sotc-4" src="assets/img/4.png">
<video
id="jelly-video"
autoplay
muted
crossorigin="anonymous"
loop="true"
src="assets/jellyfish-video.mp4">
</video>
<video
id="welcome-video"
autoplay
muted
crossorigin="anonymous"
loop="true"
src="assets/video/welcome.mp4">
</video>
</a-assets>
<a-camera
position="0 4 10"
raycaster="objects: .cantap"
cursor="fuse: false; rayOrigin: mouse;">
</a-camera>
<a-light type="directional" intensity="0.5" position="1 1 1"></a-light>
<a-light type="ambient" intensity="0.7"></a-light>
<xrextras-named-image-target name="sotc-target1">
<a-entity
xrextras-play-video="video: #welcome-video; thumb: #sotc-thumb-1; canstop: true"
geometry="primitive: plane; height: 1; width: 1;"
></a-entity>
</xrextras-named-image-target>
<xrextras-named-image-target name="sotc-target2">
<a-entity
id="people-model"
gltf-model="#people-glb"
class="cantap"
scale="1 1 1"
animation-mixer="clip: Animation; loop: repeat"
xrextras-hold-drag
xrextras-two-finger-rotate
xrextras-pinch-scale
shadow="receive: false">
</a-entity>
<!-- <a-entity gltf-model="#people-glb" position="0.5 0.5 0" scale="1 1 1" xrextras-spin="speed: 15000; direction: reverse;"></a-entity> -->
</xrextras-named-image-target>
<!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
<xrextras-named-image-target name="model-target">
<!-- Add a child entity that can be rotated independently of the image target. -->
<a-entity xrextras-one-finger-rotate gltf-model="#jelly-glb"></a-entity>
</xrextras-named-image-target>
</a-scene>
how can I solve this?
Add an id attribute to your a-camera?
<a-camera
id="camera"
I’d also suggest removing the xrextras-hold-drag component - that was meant to drag an entity along the ground - and that is what is looking for the camera and ground entities