enter image description here
The White Mesh bellow Clips through the roof and the further you move the object, the worse it gets.
Piotr Adam Milewski answered this question, from another person and gave this solution:
https://stackoverflow.com/a/63143382/18310645
But i don't understand a thing about coding so i don't know how to implement it in my code, can someone help me?
Here is my code:
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden">
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="0.2 0.2 0.2"
gltf-model="https://cdn.glitch.global/0653babd-a1b3-490a-9927-4d95dd7c9ffa/Capela%20das%20Penhas.glb?v=1645748288220"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
If Your model looks properly in the gltf-viewer, but with ar.js You're experiencing clipping like this:
it is very likely, that you need to use a logarithmicDepthBuffer in your renderer.
Luckily, it's very easy - just add the renderer component to the <a-scene> element with the desired property:
<a-scene embedded arjs renderer="logarithmicDepthBuffer: true">
Which should result in a more desired image:
Check out both proper and clipping models here
Why is it happening? The model looks small, but actually it's huge just rescaled (100times, from what sketchfab exporter gave me). Also the marker makes it even more rescaled (marker determines the unit size. The <marker> content is rescaled from 1m to whatever the print size).
If we'd lose the scaling, the model would be so huge, the clipping parts would be so far away, that determining their precise distance from the camera would be wasteful. So you need to switch to a logarithmic depth buffer, which is designed to have better precision for greater distances.
Model by Boooooop
Related
I have some simple XAML using Win2D:
<canvas:CanvasControl
Width="270"
Height="480"
x:Name="MainCanvas"
ClearColor="CornflowerBlue"
Draw="MainCanvas_Draw"
CreateResources="MainCanvas_CreateResources"/>
In the MainCanvas_CreateResources(CanvasControl, CanvasCreateResourcesEventArgs) method I would like to test the bounds of a CanvasBitmap and, if necessary, rotate it. To do this I need to call,CanvasBitmap.GetBounds. But that takes a CanvasDrawingSession. Once I am in CanvasControl's Draw event I'm OK because CanvasDrawEventArgs has a DrawingSession property. But while I am setting up resources how do I find out the bounds of a CanvasBitmap, or if that's not possible what stucture would I use to find the bounds of the underlying bitmap?
You can use the CanvasBitmap.Size or CanvasBitmap.Bounds properties.
I have an SVG file with a network diagram (rectangle with arrows connecting the rectangles). It is much larger that the browser's viewport. The logical starting point when reading the diagram is at a rectangle near the center of the diagram. I would like the initial view to be centered on this particular rectangle so the user doesn't have to hunt it down.
I am aware of the HTML anchor tag that allows you to open a webpage at a particular location. It is my understanding the tag within the SVG file does not work the same way. Is there another way of controlling the initial position of the browser to start at an element of an SVG file? I don't mind having to embed the SVG code within an html file if there is a solution that would require that.
The solution that seems to work with Google Chrome, Firefox and Android WebView is to use window.scroll(x,y) in JavaScript. For example:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="5000" height="5000">
<rect id="rect1" x="3000" y="3000" width="200" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
<script type="text/javascript">
var rect1 = document.getElementById("rect1");
var x = 3100 - window.innerWidth/2;
var y = 3050 - window.innerHeight/2;
window.scroll(x,y);
</script>
</svg>
I have just simple rectangle button realized as image content and i wanna to show it on screen without any tracking and without using screen anchors.
You can see i have no translation and rotation, but screen is still empty.
<object id="button1">
<title><![CDATA[Button 'images']]></title>
<assets3d>
<model><![CDATA[html/resources/0cde94934f9b4dab0998a3d73b2865ba/0cde94934f9b4dab0998a3d73b2865ba.zip]]></model>
<transform>
<translation>
<x>0.0</x>
<y>0.0</y>
<z>0.0000000000</z>
</translation>
<rotation type="eulerdeg">
<x>0.0000000000</x>
<y>0.0000000000</y>
<z>0.0000000000</z>
</rotation>
<scale>
<x>0.0</x>
<y>0.0</y>
<z>0.0</z>
</scale>
</transform>
<properties>
<coordinatesystemid>0</coordinatesystemid>
<screenanchor flags="4">0</screenanchor>
</properties>
</assets3d>
<viewparameters/>
</object>
You can use Dummy-Tracking: http://helpdesk.metaio.com/questions/7548/explanation-on-dummy-tracking
In general the best place to ask questions about AREL or the metaio SDK is http://helpdesk.metaio.com
There you should get an answer quickly.
I think that the problem is here:
<scale>
<x>0.0</x>
<y>0.0</y>
<z>0.0</z>
</scale>
The 0.0 is not a neutral scaling value.Your scaling transformation results in an object with no dimension. As it is shown on http://www.advancedmetaio.com/explaining-the-arel-xml-structure-part-2-transformations/, if you don't want to apply any scaling transformation your scaling values should be (1, 1, 1) :
<scale>
<x>1.0</x>
<y>1.0</y>
<z>1.0</z>
</scale>
I have been searching for an uncomplicated solution to how an image (png) can be zoomed in and out without affecting the rest of the website, but found none.
Have any of you used such a tool or know a way to do this using jQuery or javascript? I am very new to jQuery, so don't know what events I should look at. This functionality should work on both android tablets and iPad.
Looked at JQuery Mobile Pinch Zoom Image Only and the links provided but apparently those are for the ones using PhoneGap.
Thanks for any help.
I did not find a solution either so I implemented it myself (using vanilla JS and canvas but portable to css3) : https://github.com/rombdn/img-touch-canvas
Example : http://www.rombdn.com/img-touch-canvas/demo (better with a touch device but works on desktop with +/- and mouse drag)
<html>
<body>
<div style="width: your_image_width; height: your_image_height">
<canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>
</div>
<script src="img-touch-canvas.js"></script>
<script>
var gesturableImg = new ImgTouchCanvas({
canvas: document.getElementById('mycanvas'),
path: "your image url"
});
</script>
</body>
</html>
I would place the image in a "viewport" layer that is used to maintain the flow of your page. The "viewport" element would have it's overflow CSS property set to hidden to achieve this goal.
You can then use JavaScript to detect multiple touches and then scale the image as necessary. I have yet to use this frameworks but it seems very cool and could help make this easier on you: https://github.com/HotStudio/touchy
You can also detect multiple touches without a framework by watching the event.touches array inside an event handler for touchmove. For each touch occurring simultaneously there will be another index in the event.touches array.
Using Touchy seems pretty easy (untested):
var handleTouchyPinch = function (e, $target, data) {
$target.css({'webkitTransform':'scale(' + data.scale + ',' + data.scale + ')'});
};
$('#my_div').bind('touchy-pinch', handleTouchyPinch);
I'm creating a blog (via tumblr) and I'd like my page titles to automatically scale to fill the available space horizontally, and perhaps to push the content down a little at the same time.
(by scale, I mean the changing the font size, and perhaps word spacing)
The page titles will all be four words long, so there will probably be between 16 and 40 characters.
I know very little about html, and I'd be extremely grateful to anyone who could help me out. Cheers!
Notice : It's not a pure html/css solution .. I don't think it possible to do it with only html and css so It uses javascript intensively. Also I'm using jquery to do it but it could be easily reproduced with any of the javascript libraries out there. (I'm using a javascript library mainly for two reasons : 1st is the cross-browser compatibility that those libraries brings, as well as the well-tought shortcuts/utility functions and the 2nd reason is the high quantity of plugins that those libraries have to handle most of the situations or to bring free eye-candy to websites)
Hi I didn't find any 'out-of-the-box' solution for this, but it's something I always liked in iphone development and that I missed back in web dev so I decided to give it a try
Here is my solution, it's not perfect but it kinda works :p . I tough it would be not too difficult but I took me some time, anyway I think I might use it some day ... or some knowledge I acquired in the process ...
It has inspirations from this question where they depict a solution based on a loop where they increase/decrease the text size until it fits. But I was not satisfied with a loop for each text to resize and I was sure it could be calculated directly instead of trial-error'ed !
It has also inspirations from here for the window resize handling.
Now stop the chatting, here is the code :
<script type="text/javascript">
var timer_is_on=0;
jQuery.event.add(window, "load", loadFrame);
jQuery.event.add(window, "resize", resizeFrame);
function loadFrame() {
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
$sc[0].orig_width=$sc.width();
//console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
});
resizeFrame()
}
function resizeFrame()
{
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
var wc = $(this).width();
var scale = 0
if (wc > $sc[0].orig_width) {
scale = wc / $sc[0].orig_width;
} else {
scale = - $sc[0].orig_width / wc;
}
//console.log("applying scale : "+scale+" for "+$sc[0])
$sc.css("font-size",scale+"em")
});
}
</script>
</head>
<body>
<div id="container">
<div class="sc_container">
<div class='sc'>SOME SUPER TITLE !</div>
</div>
<div class="sc_container">
<div class='sc'>ANOTHER ONE !</div>
</div>
<div class="sc_container">
<div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
</div>
<div> And some normal content</div>
</div>
And here is a test page
It's not really robust .. it doesn't work well when the window is less than 400 px wide, and I only tested it on safari,firefox,chrome on mac.
A little tricky part is that I wanted it to work with multiple texts and so the $(".sc_container").each loop that runs on all the objects with css class ".sc_container".
A last trick is that I use the power of the css 'em' unit : for example '3em' mean 3 times the original text size, so here I can use this to scale from the original text size to the desired text size .. that's why I save the original text width on the DOM objects themselves : $sc[0].orig_width=$sc.width(); and reused it for computations later on resize, otherwise it was messed up after multiple resizes.
What do you guys think about it ?