I'm trying to load a single .JSON model exporter from Blender to A-frame
I already try using this loader
https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders
but the model don't show up.
Here's what I'm trying:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="components/json-model.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="model" src="models/stockcar.json"></a-asset-item>
</a-assets>
<a-entity json-model="src:#model" scale="0.5 0.5 0.5"></a-entity>
<a-camera position="0 0 20"></a-camera>
<a-light type="point" color="#3d8be6" position="-10 0 0" look-at="#car" intensity="5"></a-light>
<a-light type="hemisphere" color="#33b522" position="-10 0 0" intensity="1"></a-light>
</a-scene>
</body>
</html>
and this is what the console is showing
A-Frame Version: 0.5.0 (Date 10-02-2017, Commit #110055d)
index.js:74three Version: ^0.83.0
index.js:75WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
json-model.js:7 Uncaught SyntaxError: Unexpected token <
three.js:19590THREE.WebGLRenderer 83
http://127.0.0.1:57153/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
Any help would be greatly appreciated
Firstly, you have an extra "/" at the end of your asset-item opening tag :
<a-asset-item id="model" src="models/stockcar.json"/></a-asset-item>
Secondly, to use the asset you have to state the asset's id in the json-model "src" attribute:
<a-entity json-model="src:#model" scale="0.5 0.5 0.5"></a-entity>
Related
I am using 8th wall web to detect image target and place model when the target is found. However when the image target is not in view of the camera, the model disappears. I want the model to stay even if the image target is not in view. Such like extended tracking provided in this example: https://www.youtube.com/watch?v=WjwyBLBhfXU
head.html
<!-- Use "8thwall:" meta tags to hook into 8th Wall's build process and developer tools. -->
<meta name="8thwall:renderer" content="aframe:1.2.0">
<meta name="8thwall:package" content="#8thwall.xrextras">
<!-- Other external scripts and meta tags can also be added. -->
<meta name="apple-mobile-web-app-capable" content="yes">
body.html
<!-- Copyright (c) 2021 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
xrextras-almost-there
xrextras-loading
xrextras-runtime-error
renderer="colorManagement:true"
xrweb="disableWorldTracking: false">
<a-assets>
<a-asset-item id="jelly-glb" src="assets/jellyfish-model.glb"></a-asset-item>
<img id="jelly-thumb" src="assets/video-thumbnail.jpg">
<video
id="jelly-video"
autoplay
muted
crossorigin="anonymous"
loop="true"
src="assets/jellyfish-video.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>
<!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
<xrextras-named-image-target name="video-target">
<a-entity
xrextras-play-video="video: #jelly-video; thumb: #jelly-thumb; canstop: true"
geometry="primitive: plane; height: 1; width: 0.79;"
></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>
1/ Add in the app.js the following component :
AFRAME.registerComponent('keepvisibleonlost', {
init() {
let el = this.el
el.sceneEl.addEventListener('xrimagelost', function(){
el.object3D.visible = true
})
},
})
2/ Add this new component to your image target in the html :
<xrextras-named-image-target name="video-target" keepvisibleonlost>
i´m having a problem trying to load my nft marke, that´s what i did:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
<a-nft
type="nft"
url="nftmarkers/pinball"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
<a-box position='0 0.5 0' ></a-box>
</a-nft>
<a-camera></a-camera>
</a-scene>
</body>
</html>
and that´s the error that it returns to me:
432abd3a-f330-4cc8-8c03-faa918143656:76 Error in loading marker on Worker 404
The problem was my server sending the page as result and not the content. I fixed sending the web app to firebase.
I'm trying to load a gltf model to an a-frame , but it isn't loading. Here's the code:
<html>
<head>
<title>Tree model</title>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets id="#tree" src="tree-assets/tree01.gltf">
</a-assets>
<a-entity gltf-model="#tree"></a-entity>
</a-scene>
</body>
</html>
When you give an item an id you don't need to give it a hash tag. Also, try giving the model a position, they default to position 0 0 0, which sometimes you're unable to see as its inside of the camera. Also try using the latest version of A-frame
Try this:
<html>
<head>
<title>Tree model</title>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets id="tree" src="tree-assets/tree01.gltf"></a-assets>
<a-entity gltf-model="#tree" position="0 2 -2"></a-entity>
</a-scene>
</body>
</html>
Hope this helped :)
I have created 360 vr image with a few hotspots using a-frame.
Now I am trying to add the zoom fade transition like google street view for the hotspot changing image, but I've looking all over internet and tried a dozen times failing, so I need your help.
(**P.s. I am not a code developer, which means I am super newbie, so u might need to treat me like a idiot/baby to guide me.)
document.querySelector('#here1').addEventListener('click', function () {
document.querySelector('#pano').setAttribute('src','#pano1');
document.querySelector('#here1').setAttribute('visible','false');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kempas Residence</title>
<meta name="description" content="360° Image - A-Frame" />
<script src="https://aframe.io/aframe/dist/aframe-master.min.js"></script>
</head>
<body>
<a-scene cursor="rayOrigin: mouse">
<a-assets>
<audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<img id="pano1" src="https://cdn.glitch.com/6128c6fd-5c0c-424e-823f-27840db2dfcb%2Fpano2.jpg?v=1590040717497"/>
<img id="pano2" src="https://cdn.glitch.com/6128c6fd-5c0c-424e-823f-27840db2dfcb%2Fpano1.jpg?v=1590040608692"/>
</a-assets>
<a-sky src="#pano2" id="pano" rotation="0 -85 0"></a-sky>
<a-camera id="camera" drag-look-controls reverse-mouse-drag="true" visible="false" zoom="1">
<a-cursor id="cursor">
<a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
</a-cursor>
</a-camera>
<a-octahedron id="here1" position="23 4 -0.95" scale="-0.5 1 -0.5" opacity="1" animation="property: position; dir: alternate; from: 23 4 -0.95; to: 23 5 -0.95; dur: 750; loop: true" color="#00E4FF"></a-octahedron>
</a-scene>
</body>
I have worked with Polymer 1.x for a while and I want to start a project from scratch with Polymer 2.0 but I get many errors. I am building a PWA as I did before, therefor I included a service worker and a manifest.json file. The errors I get are, I think, most of incompatibility between versions since they claim some classes not defined or undefined "window" object (like in the second error)
For versions I followed this guide (point: Upgrade an existing project)
https://www.polymer-project.org/2.0/docs/about_20#polymer-1-compatibility-layer
First error:
platinum-sw-register.html:111
Uncaught ReferenceError: HTMLImports is not defined at platinum-sw-register.html:111
and
Uncaught TypeError: Cannot read property 'nativeMethods' of undefined
at pa (style-util.js:243)
at p.u (style-properties.js:499)
at k.T (scoping-shim.js:299)
at k.styleElement (scoping-shim.js:243)
at Object.styleElement (scoping-shim.js:52)
at HTMLElement.connectedCallback (element-mixin.html:636)
at HTMLElement.connectedCallback (legacy-element-mixin.html:81)
I have the following index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>AppTest</title>
<link rel="import" href="bower_components/app-layout/app-layout.html"/>
<link rel="import" href="bower_components/platinum-sw/platinum-sw-elements.html"/>
<link rel="manifest" href="manifest.json"/>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- <script src="bower_components/web-animations-js/web-animations.min.js" async></script> -->
<link rel="import" href="bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html">
</head>
<body>
<platinum-sw-register
auto-register
skip-waiting
clients-claim
reload-on-install
href="sw-import.js">
<platinum-sw-cache
default-cache-strategy="networkFirst">
</platinum-sw-cache>
</platinum-sw-register>
<app-header reveals>
<app-toolbar>
<div main-title>My app</div>
</app-toolbar>
</app-header>
<app-drawer id="drawer" swipe-open></app-drawer>
</body>
<script>
</script>
</html>
and my bower.json
{
"name": "polymer-2-carousel",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^2.0.0-rc.3",
"platinum-sw": "PolymerElements/platinum-sw#2.0-preview",
"app-layout": "PolymerElements/app-layout#2.0-preview"
}
}
As you can see the application is a skeleton very simple (just a test to start with) so there should not be much to get wrong or to investigate to find the cause of the error but I do not understand what is the problem and how to fix it. Any help would be appreciate.
I found this problem too, so I have to change these lines below in bower-components/platinum-sw/platinum-sw-register.html file:
value: document._currentScript ? document._currentScript.baseURI :
(HTMLImports.importForElement ? HTMLImports.importForElement(document.currentScript).baseURI :
(document.currentScript ? document.currentScript.baseURI : './'))
To:
value: document._currentScript ? document._currentScript.baseURI :
(document.currentScript ? document.currentScript.baseURI : './')
I hope that helps.