how to export aframe plane to glb object - aframe

I know that three.js can export an object to glb.
What I'm trying to do is to export a aframe plane to a glb file.
I thought aframe included three.js so I tried something like this:
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<title>Demo</title>
</head>
<body>
<a-scene
embedded
vr-mode-ui="enabled: false;"
background="color: #24CAFF;"
renderer="colorManagement: true;"
inspector=""
keyboard-shortcuts=""
screenshot=""
device-orientation-permission-ui=""
>
<a-plane
id="plane"
position="0 0 0"
rotation="0 0 0"
width="10"
height="10"
material="src: texturefile.jpg; repeat: 16 16">
></a-plane>
</a-scene>
<script>
var gltfExporter = new THREE.GLTFExporter();
gltfExporter.parse(document.querySelector('#plane').getObject3D('mesh').el, function (result) {
console.log(result);
};
</script>
</body>
</html>
I can't get the GLTF exporter from three JS.
I tried new GLTFExporter();
Just GLTFExporter() and THREE.GLTFExporter() without the new keyword. (to check if there is already an instance available)
none of these work?
So how can I export this plane to a GLB file?
kind regards

I thought aframe included three.js
a-frame uses a fork of three.js - super-three. It's a bit behind (to keep things stable), and it has some minor differences (utility functions, some loaders).
Another thing worth mentioning - the three.js build is limited to a number of core features - the rest is supposed to be included if you need them.
So - if you browse the threejs examples and see the one exporting gltf, you should check the source. A line like this:
import { GLTFExporter } from './jsm/exporters/GLTFExporter.js';
indicates, that the GLTFExporter is imported from elsewhere. jsm has modules, js has js objects.
So, in your case a simple script import:
<script src="https://threejs.org/examples/js/exporters/GLTFExporter.js"></script>
should be sufficient, to create the exporter and use it:
const exporter = new THREE.GLTFExporter();
exporter.parse(obj, callback, error, options)
You can check out a simple example of using it with a-frame here.

Related

How to run A-Frame code from another file to prevent clutter?

Using A-Frame creates a lot of clutter. Is their a way to access the code from another file? If not then what do you recommend for preventing cluster? My code is public # https://repl.it/#ColbzDaBoss1/A-Frame-Test
Thanks :)
Colby Bianco
Use components: https://aframe.io/docs/0.9.0/introduction/writing-a-component.html
<script src="my-component.js"></script>
<a-scene>
<a-entity my-component></a-entity>
</a-scene>
component file:
AFRAME.registerComponent('my-component', {
init: function () {
}
});

Webpack-React with server-side-rendering: linking to css file in server template with hash name

I'm preparing a starter for react from scratch, here is the code: https://github.com/antondc/react-starter
I managed to set up bundling for client and server, with css modules and less, and now I'm with server side rendering. I'm doing that with a js template:
// src/server/views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDEX.EJS</title>
<link rel="stylesheet" type="text/css" href="assets/index.css">
</head>
<body>
<div id="app"></div>
<script src="/assets/bundle.js"></script>
</body>
</html>
As you see, the link to the css file is harcoded there. But in my Webpack configuration I have this file name hashed, because I want to prevent caching from browsers when I update the code on development.
I am wondering how can I link the css file there. Now in the template I have href="assets/index.css, but the css file is in /dist/assets/d47e.css.
It would be great if would be possible to do something like href="assets/*.css, but is not possible, so what is the common approach for a problem like this one?
Thanks!
It depends.
Step 1: Get the current asset name
To get the current name of the generated webpack css/js files, you can use the assets-webpack-plugin. This will (with default config) generate an assets.json file in your output folder with essentially this structure:
{
"bundle_name": {
"asset_kind": "/public/path/to/asset"
}
}
Step 2a: Your html is rendered from a template (pug/jade/what ever)
// in your render code
const assets = require('<webpack-output-folder>/assets.json');
// ...
res.render('template', {
scripts: [{src: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.js}` }],
links: [{href: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.css}` rel: 'stylesheet' }],
});
// in your template (example for pug)
// ...
each link in links
link(rel=link.rel href=link.href)
// ...
each script in scripts
script(src=script.src)
// ...
Step 2b: Your html is static
You need to update the html (using a script) with the information from the asset.json file. This script needs to be run after webpack. Something like
const assets = require('<webpack-output-folder>/assets.json');
const fs = require('fs');
const css = /assets\/[a-z0-9]*\.css/i;
const js = /assets\/[a-z0-9]*\.js/i;
fs.readFile('<yourhtml>.html', (err, data) => {
// ... (error handling)
const updatedCss = data.replace(css, assets.myEntryPointName.css);
const updatedJs = updatedCss.replace(js, assets.myEntryPointName.js);
fs.writeFile('<yourhtml>.html', updated, (err) => {
// ... (error handling)
});
});
You can use HTMLWebpackPlugin to generate an HTML file that will have your JS and CSS output inserted.

a-asset-item loaded event (A-Frame 0.5.0)

I have the following assets:
<a-assets>
<a-asset-item id="model-obj" src="the-source..."></a-asset-item>
<a-asset-item id="model-mtl" src="another-source..."></a-asset-item>
</a-assets>
And after the scene is loaded I attached the following event listener which is never called and I don't know why (although the model loads and is shown in the scene):
document.querySelector('#model-obj').addEventListener('loaded', function() {
console.log('loaded');
});
According to the docs it should work (https://aframe.io/docs/0.5.0/core/asset-management-system.html#lt-a-asset-item-gt).
That's odd. This code works for me (but I'm using a glTF model):
<a-assets>
<a-asset-item id="duck" src="duck/duck.gltf"></a-asset-item>
</a-assets>
and
document.getElementById('duck').addEventListener('loaded', function() {
alert('ok')
})
A few pointers:
Is your script running after you've defined the element?
Does the network inspector show you an unsuccessful load (HTTP 404, 500, etc.)?
Any JS errors on your page in the console?

ScalaJS with React: can't find React at runtime

I want to bootstrap a simple project with ScalaJS and React.
It builds with fastOptJS, then I open my index.html with Chrome and I get this error at runtime:
Apparently, React's runtime is not available in the browser. In the documentation it doesn't mention any separate import of React, just the configuration of build.sbt.
I really can't understand what I'm doing wrong.
This is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Scala.js Tutorial</title>
</head>
<body>
<!-- Include Scala.js compiled code -->
<script type="text/javascript" src="./target/scala-2.12/hello-fastopt.js"></script>
<!-- Run tutorial.webapp.TutorialApp -->
<script type="text/javascript">
web.TutorialApp().main();
</script>
</body>
</html>
This is my TutorialApp.scala
package web
import japgolly.scalajs.react._
import org.scalajs.dom
import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.vdom.prefix_<^._
object TutorialApp extends JSApp {
#JSExport
def main(): Unit = {
println("Hello world!")
val App =
ReactComponentB[Unit]("App")
.render(_ => <.div("Hello!"))
.build
ReactDOM.render(App(), dom.document.body)
}
}
You either need it globally (via <script> tags in index.html) or using webjars.
If you want to use webjars/jsDependencies you can look at https://github.com/tastejs/todomvc/blob/gh-pages/examples/scalajs-react/build.sbt:
jsDependencies ++= Seq(
"org.webjars.bower" % "react" % "15.2.1" / "react-with-addons.js" minified "react-with-addons.min.js" commonJSName "React",
"org.webjars.bower" % "react" % "15.2.1" / "react-dom.js" minified "react-dom.min.js" dependsOn "react-with-addons.js" commonJSName "ReactDOM"
)
Also note that in their index.html they have added
<script src="generated/todomvc-jsdeps.js"></script>
to make sure the JS dependencies are loaded on the page too. You'll need to change the name of *-jsdeps.js depending on your project name.

R Syntax Highlighting for Confluence

Is there a way to get R syntax highlighting in confluence? I've tried General configuration > configure code macro > add new language, but I have no clue how to upload a custom brush syntax for R..has anyone already done this or is there a way I can get it for R ?
For adding a syntax-highlighting "brush" javascript file I found the following process to work nicely.
get yourself the latest Syntaxhighlighter from:
http://alexgorbatchev.com/SyntaxHighlighter/
e.g. 3.0.83 as of 2016-05
unpack it and create an index.html file that uses it like:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Include required JS files -->
<script type="text/javascript" src="js/shCore.js"></script>
<!--
At least one brush, here we choose JS. You need to include a brush for every
language you want to highlight
-->
<script type="text/javascript" src="css/shBrushRule.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- You also need to add some content to highlight, but that is covered elsewhere. -->
<pre class="brush: R">
add your R code here
</pre>
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
</html>
in the
<pre></pre>
you might want to add some R code. To create an R brush you might want to go from some of the brushes in the css folder:
shBrushAS3.js shBrushDelphi.js shBrushPerl.js shBrushSass.js
shBrushAppleScript.js shBrushDiff.js shBrushPhp.js shBrushScala.js shBrushBash.js shBrushErlang.js shBrushPlain.js shBrushSql.js
shBrushCSharp.js shBrushGroovy.js shBrushPowerShell.js shBrushTcl.js
shBrushColdFusion.js shBrushJScript.js shBrushPython.js shBrushVb.js
shBrushCpp.js shBrushJava.js shBrushRuby.js shBrushXml.js
shBrushCss.js shBrushJavaFX.js shBrushRule.js
it just needs a few lines of code and regular expressions to setup the keywords and comment, variable and other rules. When you have created (or searched for it on the internet e.g https://gist.github.com/yihui/1804862) your shBrushR.js file and are happy with it you can upload it to confluence via General configuration > configure code macro > add new language (and hopefully add the resulting js file to this answer to make this a fully complete solution - sorry I don't know R myself so I can't help much with this part)
See the below R brush (taken from the link above) as an example:
/**
* Author: Yihui Xie
* URL: http://yihui.name/en/2010/09/syntaxhighlighter-brush-for-the-r-language
* License: GPL-2 | GPL-3
*/
SyntaxHighlighter.brushes.R = function()
{
var keywords = 'if else repeat while function for in next break TRUE FALSE NULL Inf NaN NA NA_integer_ NA_real_ NA_complex_ NA_character_';
var constants = 'LETTERS letters month.abb month.name pi';
this.regexList = [
{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments, css: 'comments' },
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' },
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' },
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' },
{ regex: new RegExp(this.getKeywords(constants), 'gm'), css: 'constants' },
{ regex: /[\w._]+[ \t]*(?=\()/gm, css: 'functions' },
];
};
SyntaxHighlighter.brushes.R.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.R.aliases = ['r', 's', 'splus'];

Resources