Caveat: The following was empirically determined.
If you are writing an app in Aframe, just be aware that you do not need to include a three.js lib in your html since AFrame ships with it's own version of three.js and the non-Aframe portions of your app can use this version of three.js as well. As a matter of fact, not only do you not need it, you should definitely not include it.
If you include your own version of three.js then AFrame will use that over the one it was built with. While most of the time this won't cause problems, it can lead to unpredictable results. For Instance, I was mixing Aframe-master.js v0.5, which assumes three.js v84 and also src'ing in three.js v85 and I received the following error messages:
Uncaught Error: `Entity.setObject3D` was called with an object that was not an instance of THREE.Object3D.
at HTMLElement.value (aframe-master.js:72729)
at aframe-master.js:66470
at aframe-master.js:48132
at ObjectLoader.parse (Three.js:32979)
at Three.js:32938
at XMLHttpRequest.<anonymous> (Three.js:29098)
After much research, I determined this is because in three.js v85 they dropped the blendCharacter object but aframe-master v0.5 is built against three.js v84 which still does have it and assumes it's there.
I was running mixed versions fine for a while, so it's a subtle error. If you do get a situation, you will most definitely get some other error. I'm just documenting this because I spent half a day trying to figure this out and maybe I can spare someone else the trouble.
If using AFrame, do not include three.js in your html:
<!doctype html>
<html lang="en">
<head>
<title>A-frame controller test</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="lib/aframe-master.js"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="lib/Three.js"></script> <!-- remove this -->
<script src="lib/grab.js"></script>
<script src="js/main.js"></script>
<a-scene>
Look on the console and make sure Aframe and three.WebGlRenderer are using the same version:
Bad (mixed three.js 0.84 and 0.85):
A-Frame Version: 0.5.0 (Date 03-05-2017, Commit #31d05b0)
aframe-master.js:76936 three Version: ^0.84.0
aframe-master.js:76937 WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
THREE.WebGLRenderer 85dev
Good (three.js v.84 everywhere):
A-Frame Version: 0.5.0 (Date 03-05-2017, Commit #31d05b0)
aframe-master.js:76936three Version: ^0.84.0
aframe-master.js:76937WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
aframe-master.js:24581 THREE.WebGLRenderer 84
Related
I created a minimal polymer-2-application using the cli tool. Without any changes, just running polymer serve, the initial load time for the first visit is 4s on Fast3G. It remains 4s also after polymer build.
On top are loading times for any html import for shell, polymer elements, firebase, ...
Do I just have to accept the load time of 4s+ and use a loader in index.html, server-side rendering & amp or some other workarounds or am I missing something?
I know that I can speed up the load of the second visit with service-worker but the first-time visitor will always have to be patient?
Here the code (no changes from polymer-cli)
index.html:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymer_min.</title>
<meta name="description" content="testing minimal loading time for Polymer app">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/polymer_min-app/polymer_min-app.html
</head>
<body>
<polymer_min-app></polymer_min-app>
</body>
</html>
Polymer_min-app
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="polymer_min-app">
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]]!</h2>
</template>
<script>
class Polymer_minApp extends Polymer.Element {
static get is() { return 'polymer_min-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'polymer_min-app'
}
};
}
}
window.customElements.define(Polymer_minApp.is, Polymer_minApp);
</script>
</dom-module>
By default Polymer loads its dependencies arbitrarily as seperate files which results in couple of seconds load time - notice the "waterfall" in the network tab of your Dev Tools. For example, one of our tools makes 100+ requests at startup to load dependencies like elements.
Not using a service worker, server side rendering, client side caching, or alike will result in comparable load times on subsequential page loads.
Bundling your app will not effect that unless you load the index file from the build-directory. Dependencies (e.g. from bower_comonents) will be baked into your app elements in the src subfolder of your build, which leads to less requests with uglified code - which mean you send less bytes over the wire. Out tool mentioned above looses about 50% of its weight by bundling, making only 15 requests on load.
Sample image https://imgur.com/a/g9UPM
Independently of bundling you should at least take care of caching by configuring your server, or maybe use a service worker. When running NodeJS you might have a look at https://github.com/Polymer/prpl-server-node.
I am trying to understand how viewport and initial-scaling works. I read this, this and this and tried the following experiment, which I can reproduce on a samsung galaxy s4 using firefox version 43.0.
If I open a webpage on the galaxy s4 containing this code:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=300px, initial-scale=2.0"/>
</head>
<body>
<div style='background-color:red;width:100%'>Adam 8</div>
</body>
</html>
then I get the following result:
This makes sense to me, because the div has a width of 300 CSS pixel, the galaxy s4 has 640 device pixel, and initial-scale=2 should force my phone to use 600 device pixel to represent the 300 CSS pixel div-container, which gives a blank space of 40 device pixel (however, the blank space does look wider then 40 device pixel to me but I will ignore it for now).
Then, I changed the initial-scale from 2 to 1:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=300px, initial-scale=1.0"/>
</head>
<body>
<div style='background-color:red;width:100%'>Adam 9</div>
</body>
</html>
Since initial-scale=1, I assumed that my phone only uses 300 device pixel to represent the red bar. However, I get this:
Why is the redbar now 640 device pixel long instead of 300 device pixel?
In your second example, your viewport meta tag is over-constrained. The browser will limit the minimum zoom level such that you can't zoom out to see beyond the extents of the content. In your case, the content is ~300px and the screen size is 640px so the minimum-zoom level would be ~2.1. However, you specified initial-scale=1.0 so there's no way to realize that. In this case, the browser chose to honor the initial-scale by extending the content-width to allow the specified scale.
The first case is a little more puzzling to me as the same thing should be happening to a lesser extent. Here's a picture of how it looks in Chrome on my Nexus 4 which has the same screen height.
In general, the viewport meta tag isn't specified and the behavior in these kinds of cases will vary by browser. I would avoid setting the initial-scale at all and let the browser do that automatically. Typically they will try to zoom out to fit all the content on the screen.
I am trying to put processing sketches with multiple .pde files(tabs or classes) on my website, but it does not seem to be working. You should be able to click and make balls appear that bounce around the screen. However, it does not seem to be registering that there is a second .pde file, and therefore, the sketch does not work fully.
<!DOCTYPE html>
<html>
<head>
<script src="processing.min.js"></script>
<title>Projects</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="../css/projects.css"/>
</head>
<body>
<canvas data-processing-sources="ball/Ballbounces.pde" ></canvas>
<canvas data-processing-sources="ball/Ball.pde" ></canvas>
</body>
</html>
http://willhay.io/processing/
A regular one file sketch works fine, I think it has something to do with the fact that this sketch has a ball.pde class for the balls that are supposed to appear.
Figured it out, it was as simple as typing the other .pde file you wanted to load after the one you chose like so (with a space):
<canvas class="project" data-processing-sources="ball/Ballbounces.pde ball/Ball.pde" ></canvas>
Good evening,
I recently switched from EaselJS to Threejs, it's amazing!
I've tried to include a physic engine called Physijs and use it with tQuery with this tutorial but it's not working.
Head:
<!-- Physics engine -->
<script type="text/javascript" src="lib/tquery-bundle-require.js"></script>
<!-- <script type="text/javascript" src="lib/ammo.js"></script>-->
<script type="text/javascript" src="lib/physi.js"></script>
<script type="text/javascript" src="lib/tquery.physi.js"></script>
<!-- Game and GameCore namespace -->
<script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/game.static.js"></script>
Physijs version: latest form GitHub
Threejs version 59 (included in tQuery)
tquery.physi.js version: unknown, grabbed from the source-code of the tutorial, can't find it anywhere else)
init function called when the page's loading is complete:
var world = tQuery.createWorld().boilerplate({cameraControls: false}).start();
world.tCamera().position.set( 70, 40, 70 );
world.tCamera().lookAt( world.tScene().position );
world.tRenderer().shadowMapEnabled = true;
world.tRenderer().shadowMapSoft = true;
world.tRenderer().setClearColorHex( 0xffffff, 1 );
world.enablePhysics();
Error given by FireBug:
TypeError: world.enablePhysics is not a function
world.enablePhysics();
Does anyone know what I can do to fix this problem,?
Feel free to talk about alternative too! :)
Thanks!
I guess tQuery project died, because last commit was made on Jul 25 2013. So you will have to work out without Jeromeetienne tQuery tutorials and his tQuery project. It seems that Jeromeetienne has started new extension system for threejs, called threex.
While using Firefox (23.0.1) and jQuery Mobile (1.3.2), I get the following warning from my code: Empty string passed to getElementById(). The message appears in the console (Tools > Web Developer > Web Console). I would like to eliminate this warning.
I have seen a number of people ask similar questions, most notably: Best way to locate source of Warning: Empty string passed to getElementById() The answers seems to fairly consistently point to the use of '#', implying the user is at fault.
I have tried to produce what I feel is the bare minimum of valid code, and I've found this warning is still exhibited. I assume, from the other posts, that it is my code that is at fault. Can anyone show me how to fix this issue?
As per other users' comments, this warning does not appear in Chrome (version 29.0.1547.57)
Thanks in advance!
Minimum valid code that reproduces this issue:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="TestPage">
<div data-role="content" id="TestContent">
<p>This is a test</p>
</div>
</div>
</body>
</html>
In my case it was caused because I forgot to specify a value for the 'for' attribute of a label:
Missing id
<label for="">Stuff:</label>
fixed
<label for="someID">Stuff:</label>
EDIT: Removing the for attribute also prevents that warning
<label>Stuff:</label>
As indicated in a deleted answer and in the comments, this was a bug in Mobile jQuery and it's now fixed. Compare the behavior of 1.3.2 vs 1.4.5 (the current version):
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /-->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<!--script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script-->
</head>
<body>
<div data-role="page" id="TestPage">
<div data-role="content" id="TestContent">
<p>This is a test</p>
</div>
</div>
</body>
</html>
After going through your jsfiddle I still didn't get where the the function document.getElementById() is being called. I used to also face this problem, but since you are using jquery-mobile its better to use $(#id) as selector just check whether this reference document.getElementById() or $('#id') is being called before the DOM is ready..