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
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 () {
}
});
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.
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?
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.
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'];