How do I rotate a 3d model in A-Frame by moving or dragging the mouse? - rotation

Based on this How do I rotate a box in A-Frame by moving or dragging the mouse?
how i can do it with a 3d model? i need rotate a 3d model/object in a view
i have tried this code, but doesn't works
<html>
<head>
<title>Rotation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
</head>
<body>
<script type="text/javascript">
AFRAME.registerComponent('drag-rotate-component',{
schema : { speed : {default:1}},
init : function(){
this.ifMouseDown = false;
this.x_cord = 0;
this.y_cord = 0;
document.addEventListener('mousedown',this.OnDocumentMouseDown.bind(this));
document.addEventListener('mouseup',this.OnDocumentMouseUp.bind(this));
document.addEventListener('mousemove',this.OnDocumentMouseMove.bind(this));
},
OnDocumentMouseDown : function(event){
this.ifMouseDown = true;
this.x_cord = event.clientX;
this.y_cord = event.clientY;
},
OnDocumentMouseUp : function(){
this.ifMouseDown = false;
},
OnDocumentMouseMove : function(event)
{
if(this.ifMouseDown)
{
var temp_x = event.clientX-this.x_cord;
var temp_y = event.clientY-this.y_cord;
if(Math.abs(temp_y)<Math.abs(temp_x))
{
this.el.object3D.rotateY(temp_x*this.data.speed/1000);
}
else
{
this.el.object3D.rotateX(temp_y*this.data.speed/1000);
}
this.x_cord = event.clientX;
this.y_cord = event.clientY;
}
}
});
</script>
<a-scene>
<a-assets>
<a-asset-item id="man" src="./assets/models/man/man.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#man" rotation="0 45 0"></a-model>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 -0.5 1">
<a-camera look-controls="enabled:false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
Thanks in advance!
Also have tried this, but not luck
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title - Demo 3D Model</title>
<meta name="description" content="Inlabs demo - 3D Model">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="man" src="./assets/models/man/man.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#man" rotation="0 45 0"></a-model>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 -0.5 1">
<a-camera drag-rotate-component look-controls="enabled:false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>


Attach the drag-rotate-component to the model not the camera.
<a-collada-model drag-rotate-component>
Also, you don't need to add -component to the component name.


EDIT: sorry, my bad, this is not correct as it doesn't answer the question.
I think you simply forgot to append the name of the component drag-rotate-component as an attribute to the camera entity. See this pen.
<a-camera drag-rotate-component look-controls="enabled:false"></a-camera>

Related

Is there any callback function in Aframe <a-animation>

When I create an element of a-animation,I want to know the exact time when the animation finished.I know the "dur" or "begin" can calculate the approximate time,but is there any callback function when I use the a-animation element!

You can listen to the animationend event on the a-animation element. Like so:
sphereAnimation.addEventListener('animationend', function () {
sphere.setAttribute('color', '#88ff99');
});
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<a-scene>
<a-plane color="#EFED5E" rotation="45 0 0" scale="3 3 3" position="0 0 -3"></a-plane>
<a-sphere id="sphere" color="#EF2D5E" position="0 0 -3">
<a-animation
id="sphereAnimation"
attribute="position"
to="0 2 -3"
direction="alternate"
repeat="3"
easing="ease-in-out">
</a-animation>
</a-sphere>
</a-scene>

The 'a-animation' tag is depricated in favour of animation="". You need to attach the event handler for the animationcomplete event to the object which is being animated. Here's what worked for me.
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
function sphereEventListener(){
aSphere.addEventListener('animationcomplete', function(){
console.log("Do something interesting here...");
});
};
</script>
</head>
<body onload="sphereEventListener()">
<a-scene>
<a-sphere
animation="dur: 1000; property: position; to: 5 0 -10"
id="aSphere"
position="-5 0 -10"
>
</a-sphere>
<a-sky color="black"></a-sky>
</a-scene>
</body>

Adding a D3.js Liquid Fill gauge in a Leaflet popup

I'm trying to add a D3.js liquid fill gauge (http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) in a Leaflet popup without succeeding.
Here is my code:
var map = L.map('map').setView([47.261491,-1.549244], 16);
var dataCenterIcon = L.icon({
iconUrl: 'images/datacenter-icon.png',
iconSize: [20, 20] // size of the icon
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
d3.json("data/datacentersSigma.json",function (data){L.geoJson(data,{
pointToLayer: function (feature,latlng){return L.marker(latlng,{icon:dataCenterIcon});},
onEachFeature : function (feature, layer) {
var div = $('<div class="popupGraph" style="width: 200px; height:200px;"><svg id="gauge"/></svg></div>')[0];
var popup = L.popup().setContent(div);
layer.bindPopup(popup);
// var svg = d3.select(div).select("svg").attr("width", 200).attr("height", 200);
// svg.append("rect").attr("width", 150).attr("height", 150).style("fill", "lightBlue");
loadLiquidFillGauge("gauge",55);
}}).addTo(map);});
d3.json("data/trajetsFibreDCSigma.json",function (data){
L.geoJson(data, {
style: function(feature){return {color : feature.properties.stroke};}
}).addTo(map);
});
<!DOCTYPE html>
<html>
<head>
<title>Yepee</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script src="js/d3.js"></script>
<script src="js/liquidFillGauge.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
<!-- <svg id="gauge"/>-->
<script src="js/yepee.js" type="text/javascript"></script>
</body>
</html>
When I'm trying to display my map, I can't even see the markers and I've got this error:
TypeError: d3_window(...) is null
I can also load a liquid fill gauge on a svg element which isn't on my map.
I've tried to add just a simple svg square in the popup by following an example (http://jsfiddle.net/2XfVc/132/) and it worked.
The goal is to put that gauge in the leaflet popup and despite searching for a long time, I can't find what the problem is.
Thank you in advance for your answers.

You're trying to initialize the gauge when the actual SVG element isn't added to the DOM yet. Once the popup opens, the content gets added to the DOM, that's when you should initialize the gauge.
// Have same content for all your popups
var content = '<svg id="gauge" width="100" height="100"></svg>'
// Set markers with popup, include content and set value as option
new L.Marker([0, -45]).bindPopup(content, {'value': 33}).addTo(map)
new L.Marker([0, 45]).bindPopup(content, {'value': 66}).addTo(map)
// Catch popup open event
map.on('popupopen', function (e) {
// Initialize the gauge with current popup option's value
loadLiquidFillGauge('gauge', e.popup.options.value);
})
Demo on Plunker: http://embed.plnkr.co/2hMjBt/preview

Steema teechart html5 Javazript change view area

How can I change the view area for a graph.
I have this example below se code an image
The left axes goes from 0 to 10 because there is data from 0 to 10 , but I still would like to show only 4 to 9, almost like its zoomed.
Is it possible ?
<title>Graf TEST </title>
</head>
<script src="http://127.0.0.1/charts/js/teechart.js" type="text/javascript"> </script>
<script src="http://127.0.0.1/charts/js/teechart-extras.js" type="text/javascript"></script>
<script language="JavaScript">
function draw() {
var Chart1=new Tee.Chart("canvas");
Chart1.title.text="test";
Chart1.applyTheme("minimal");
Chart1.palette.colors[0] ="green";
Chart1.addSeries(new Tee.Line([]) );
var Series1 = Chart1.series.items[0];
Series1.marks.style="value";
Series1.marks.visible=true;
Series1.colorEach="no";
Series1.format.stroke.size=3;
Series1.pointer.visible=true;
Series1.data.values[0]=6;
Series1.data.labels[0] ="Okt";
Series1.data.values[1]=9;
Series1.data.labels[1] ="Nov";
Series1.data.values[2]=10;
Series1.data.labels[2] ="Dec";
Series1.data.values[3]=0;
Series1.data.labels[3] ="Jan";
Chart1.draw();Chart1.toImage("img");canvas.style.display="none";
}
</script>
<p>
<BODY onload="draw()">
<img id="img"><canvas id="canvas" width="800" height="400"></canvas>
</html>

You should do that manually setting axis minimum and maximum values, for example:
Chart1.axes.left.setMinMax(4,9);

GeoServer Request not working

I am trying to add map into my web page. Shapefiles are uploaded/published in GeoServer. When request is made, not map is displayed in webpage. Following is code.
<html>
<head>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://localhost:8080/geoserver/New_York_Roads/wms",
{ layers: 'basic' }
);
map.addLayers([wms]);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 600px; height: 300px">
</div>
</body>
</html>

change this line:
map.addLayers([wms]);
to this:
map.addLayer(wms);
more info here

jqplot - uncaught exception - No data

my json file looks like
{"items":[
{"date":"2012-03-12","scoreMin":"9","scoreMax":"25","scoreAverage":"20.39","scoreSTD":"3.86","scoreCount":"133","count20":"73","count25":"46"},
{"date":"2012-03-13","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-14","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-15","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-09-15","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-16","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-17","scoreMin":"5","scoreMax":"24","scoreAverage":"18.59","scoreSTD":"5.67","scoreCount":"99","count20":"45","count25":"0"},
{"date":"2012-09-18","scoreMin":"5","scoreMax":"24","scoreAverage":"18.64","scoreSTD":"5.67","scoreCount":"100","count20":"46","count25":"0"}
]}
and my script is
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<script language="javascript" type="text/javascript" src="jqplot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
alert('Document ready');
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData[i] =("['" + data.date + "'," + data.scoreAverage + "]");
});
alert( 'Fetched ' + objArrayData.length + ' items!');
console.log('object Data ' + objArrayData);
objArray = ("[" + objArrayData + "]");
console.log('object Array' + objArray);
var plot = $.jqplot('chartCanvas', [objArray], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%#m/%y'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
I am getting uncaught exception- No data error
Before plotting the chart, I am printing the array and there are all the values that I need.
What is missing? Where am I doing wrong?
Thanks for your help.

I don't understand why you are feeding data to the objArrayData array in the way you are doing here. The data doesn't become an array just because there are square brackets surrounding them (it will only appear pretty and satisfying and confusing in the cosole.log).
Use array.push() instead of the way you are doing it here.
And also make sure you make the data.scoreAverage a number before parsing it to the array.
You can do it using parseFloat() function.
So finally you can feed the data to the array like this.
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
Here's the modified working code.
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<script language="javascript" type="text/javascript" src="../jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
});
console.log('object Data ' + objArrayData);
var plot = $.jqplot('chartCanvas', [objArrayData], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%Y-%m-%d'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
Hope this helps.
PS: Make sure you learn about arrays a little more.

Resources