For http://aframe.io/, how can I render text without having to create an image?
EDIT: A text component has landed in A-Frame master branch. This will roll out in 0.5.0. The component will have support for fonts, alignments, anchors, baselines, shaders, etc. <a-entity text="value: HELLO"></a-entity> https://aframe.io/docs/master/components/text.html
You can use some of the community components:
https://github.com/bryik/aframe-bmfont-text-component - Text drawn using signed distance field fonts (bitmap fonts that look great regardless of zoom level).
https://npmjs.com/package/aframe-text-geometry-component - Text geometries.
https://github.com/maxkrieger/aframe-textwrap-component - Draw component focused on text wrapping.
https://github.com/scenevr/htmltexture-component - HTML canvas as a texture.
I recommend the Bitmap Font Text Component which is performant and looks visually good:
<html>
<head>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity bmfont-text="text: HELLO!; color: #333" position="0 0 -5"></a-entity>
</a-scene>
</body>
</html>
Related
I am trying to set up my three.js according to tutorials I find on Youtube. I use Visual Studio Code and I copy the script exactly but for whatever reason when I check the live server it always shows me a blank white space when it's supposed to be black.
i've also noticed when I set up the scene, camera and renderer my THREE.Scene() and THREE.PerspectiveCamera() etc. are never the color green but instead blue. All the tutorials show them as green. I've done 5 tutorials so far and so far the exact same issue for all of them.
Here's an example of a tutorial I've used: https://www.youtube.com/watch?v=8jP4xpga6yY (Skip to 2:52 to see what I referring to in terms of the "green" script)
Am I missing something? Do i need to download an extension or something?
any input helps - thanks!
This is my main.js file
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
This is my index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Basic 3D World</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
<script src="./mains.js"></script>
</body>
</html>
I copied code verbatim and instead of getting a black background that shows I'm ready to render my objects I get blank white space when accessing the Live Server. Also notice when I input THREE as I am typing instead of the script turning green it turns blue.
this is what all the tutorials show
this is what my code looks like - notice how thee THREE sections are blue instead of green
I've tested your code and I ended up with a black background, so in this case I want you to check the followings the things:
Check the name of your .JS file.
Check your pathing, make sure that you use the exact file name when you start linking your files with each other.
Check the structure of your map and your files, make sure that you've put the right files in the right folders. Take a look at this this question about this, for more information.
Check your console log (F12 Button) for any errors.
So in your case, make sure that main.js is written like that and not like mains.js as you wrote in your code.
Make sure that main.js is in the same directory as index.html .
I'm using AR.js to create an AR scene. Everything works fine with Markers, but when I use Location-based AR, the object appears in one place and doesn't move when the device is rotated.
<html>
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.0.6/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin: 0px; overflow: hidden;">
<a-scene gps-camera-debug embedded arjs="sourceType: webcam; debugUIEnabled: false;" vr-mode-ui="enabled: false">
<a-camera gps-camera rotation-reader>
<a-box color="yellow" gps-entity-place="latitude: <lat>; longitude: <long>" scale="2 2 2" />
</a-camera>
</a-scene>
</body>
</html>
After I accept access to the camera and to location services, a yellow square appears over the camera display. However, moving the camera up, down, left, or right, doesn't move or rotate the object. The yellow square appears to be stuck on screen in one position.
The GPS location I'm using is exactly the same as the one reported by the gps-camera-debug. If I put in a different Lat & Long, then the yellow square doesn't appear at all.
Same results in Firefox v70 and an iPhone 6 with IOS 12.3.1. The messages in Firefox console are...
A-Frame Version: 0.9.2 (Date 2019-05-06, Commit #f57a1fa) index.js:92:8
three Version (https://github.com/supermedium/three.js): ^0.102.2 index.js:93:8
WebVR Polyfill Version: ^0.10.10 index.js:95:8
Successfully compiled asm.js code (total compilation time 81ms) aframe-ar.js
THREE.WebGLRenderer 103dev three.js:22620:10
gps-camera-entity-added aframe-ar.js:9031:17
Use of the orientation sensor is deprecated. aframe-ar.js:8785:15
AR.js 2.0.6 - trackingBackend: artoolkit aframe-ar.js:7121:10
The Components object is deprecated. It will soon be removed. 02
gps-camera-ready aframe-ar.js:8749:25
Allocated videoFrameSize 1228800 aframe-ar.js:2:23009
Pattern detection mode set to 1. aframe-ar.js:2:23009
Pattern ratio size set to 0.500000.
Any ideas what I'm missing?
The box shouldn't be a child item of the camera
<a-camera gps-camera rotation-reader>
</a-camera>
<a-box color="yellow" gps-entity-place="latitude: <lat>; longitude: <long>" scale="2 2 2" />
There could be a race while the gps is trying to position the box, and at the same time it's applying the camera transform. A wild guess, but still - tried it, and it works with the above code on android chrome.
I am trying to rotate a box around its center while keeping the rest of the models fixated. Here is my code -
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls#1.0.0/dist/aframe-orbit-controls.min.js"></script>
<script src="https://unpkg.com/aframe-supercraft-loader#1.1.3/dist/aframe-supercraft-loader.js"></script>
</head>
<body>
<a-scene>
<a-entity id="super" supercraft-loader="name: better-reaction" ></a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 5 15">
<a-box position="0 1.6 -21" color="red"></a-box>
</a-entity>
</a-scene>
</body>
and here is the codepen: https://codepen.io/nirajupadhyay11/pen/RBBpbd
However, the entire model rotates on dragging the mouse, instead of just the box.
The result I am after is keeping the box and the model fixated at their respective positions but when the mouse is dragged, the box should rotate around it's center.
I am trying to get this to work so that, in my game that I am developing, I can have a 3d gun model point to different directions based on mouse drag. Their are other 3d models in the game such as trees and rocks but they should remain in their position when the mouse is dragged.
Here is one example of what I am trying to achieve - https://codepen.io/jordizle/pen/haIdo
Could you please help me with this?
Thanks,
Niraj
The orbit controls are basically a camera rotating around on an orbit. Hence the name.
If you want the scene "still" and only one object rotating, you can't rotate the whole camera. You need to rotate the object alone.
A simple way to achieve what you want would be checking where the mouse is dragged on the window
when the mouse is pressed, get the position
on mousemove check how much the position has changed. Rotate the object accordingly to the changes.
when its released, stop listening for the mousemove.
I have built a responsive website and it encounters problem while rendering in portrait orientation on iPad
i.e It doesn't correctly fit in.
I have tried adjusting the viewport meta's parameter values but that also affects the whole rendering, including on mobile.
I used the following viewport meta in my website.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
I had a similar issue just now, on a site that is 1550px wide on desktop but only 880px on mobile.
Things were working great with
<meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" />
combined with
<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />
(mobile.css readjust some element widths to fit nicely into the 880px mobile layout.)
Things looked good until I tested it on an iPad in the iOS Simulator. In portrait things looked alright, but in landscape orientation some elements (specifically those with width: 100%) adjusted to the viewport width, while some didn't (that one element with width: 1550px). This meant that when scrolling right (or zooming out) to view the entire 1550px element, the elements with width: 100% were left dangling from the left side, only about half as wide as they should be.
The solution was far from obvious, but here's how I solved it:
base.css
body{
width: 100%;
min-width: 1550px;
}
mobile.css
body{
min-width: 100%;
}
This explicitly sets the miniumum width of the body element to 1550px for all devices wider than 880px, including tablets that take the viewport meta tag into account.
When viewed on a mobile device with a width less than 880px, the width of the body element is reset to simply 100%, i.e. the viewport width.
Hope this will help someone out there struggling with different layouts for different devices.
I have a menu made up of images and on a:hover I want to add a background image rather than simply doing image replacements (all in CSS, no JavaScript).
However, if I simply change the background image, while transparency and horizontal alignment are fine, it's just at the wrong vertical placement. No matter what I try the background image goes to the very bottom of the image and you see about a text height of background image below the main menu image.
Any ideas on how to fix this?
In it's simplest form it can be repeated as follows:
<html>
<head>
<style>a:hover{background:url('over.png');}</style>
</head>
<body>
<img src="item.png" style="border:0; " />
</body>
</html>
item.png is showing about 10 pixels of the top of its image at the bottom of over.png
Thanks.
Adding background-position: x y; still only shows the over.png at the bottom of the image and crops it to the height of one character.
Below shows the two images and what comes out on the right
It'd be easier to debug if you gave us a screenshot and some code. But it sounds like you might just need to position the background image within the element using background-position. You can use pixels, percentages or just top,bottom,left,right to place a background image wherever you want it within an element. http://www.w3schools.com/css/pr_background-position.asp. You might also want to look into image sprites for rollover effects. You would place the original and rollover images onto one file and simple change the background-position on hover.