I started an ASPNET MVC project and I tried to load a gltf object
GLTFLoader.js -> https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js
But my object isn't found... chrome console :
Project files:
I added something in web config:
<script src="~/Scripts/three.js"></script>
<script src="~/Scripts/OrbitControls.js"></script>
<script src="~/Scripts/GLTFLoader.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
test: 'xd'
}
});
</script>
<script>
var scene, renderer, camera;
var cube;
var controls;
function initialize() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.rotation.y = 45 / 180 * Math.PI;
camera.position.set(800, 100, 1000);
ambientLight = new THREE.AmbientLight(0x404040, 100);
scene.add(ambientLight)
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
$('#object').append(renderer.domElement);
let loader = new THREE.GLTFLoader();
loader.load('Cars/tutorial/scene.gltf', function (gltf) {
car = gltf.scene.children[0];
car.scale.set(0.5, 0.5, 0.5)
scene.add(gltf.scene);
renderer.render(scene, camera);
})
}
initialize();
</script>
Thanks!
Related
Hi i created invoice page and added to them jsPDF and html2canvas, but my solution generated blank pdf. How can I repair this? where is a bug ?
In my project used jspdf and html2canvas, can you help me with this?
Script:
$(document).ready(function() {
function generatePDF() {
window.scrollTo(0, 0);
var pdf = new jsPDF('p', 'pt', [1380, 2030]);
html2canvas($(".page-section")[0], {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var imgData = canvas.toDataURL("image/png", 1.0);
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addImage(imgData, 'PNG', 20, 20, (width - 10), (height));
}
});
setTimeout(function() {
pdf.save('sample.pdf');
var blob = pdf.output("blob");
var blobURL = URL.createObjectURL(blob);
var iframe = document.getElementById('sample-pdf');
iframe.src = blobURL;
var downloadLink = document.getElementById('pdf-download-link');
downloadLink.href = blobURL;
}, 0);
};
generatePDF();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://instamarketing.pl/cennik/js/jspdf.min.js"></script>
<script type="text/javascript" src="https://instamarketing.pl/cennik/js/html2canvas.js"></script>
<div class="page-section">
test
</div>
I have the following code,
basically I have two layers one osm laryer, one vector layers, first I add two feature nodes with id 1 and id 2 into the vector layer by single click at two random locations on the map using ol.interaction.draw, then switch to interaction drag by select 'Drag Point' (top left corner), the idea is when drag either one of the two nodes over the other node, the node being dragged shall turn into green node, I can do this by dragging node id 1 to to node id 2 easily, but when i try to drag node id 2 to node id 1, it demands much higher accuracy than vice versa. The only difference between two nodes is node id 1 is created before node id 2.
The problem I see here is in forEachFeatureAtPixel, it rarely detects(or the call back rarely return node id 1) feature node id 1 when dragging node id 2 over node id 1.
I have spent quite a while on this issue. Still cannot figure out why. Really appreciated any help.
Thanks
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Draw and Modify Features</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol-debug.js"></script>
</head>
<body>
<form class="form-inline">
<select id="type">
<option value="DrawPoint">Draw Point</option>
<option value="DragPoint">Drag Point</option>
</select>
</form>
<div id="map" class="map"></div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
var circle_style = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 2)'
})
})
});
var overlap_style = new ol.style.Style({
image: new ol.style.Circle({
radius: 8,
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 2)'
})
})
});
var features = new ol.Collection();
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector({
features: features
}),
style: circle_style
});
featureOverlay.setMap(map);
window.app = {};
var app = window.app;
/**
* #constructor
* #extends {ol.interaction.Pointer}
*/
app.Drag = function () {
ol.interaction.Pointer.call(this, {
handleDownEvent: app.Drag.prototype.handleDownEvent,
handleDragEvent: app.Drag.prototype.handleDragEvent,
handleMoveEvent: app.Drag.prototype.handleMoveEvent,
handleUpEvent: app.Drag.prototype.handleUpEvent
});
this.coordinate12_ = null;
this.cursor_ = 'pointer';
this.feature_ = null;
this.previousCursor_ = undefined;
};
ol.inherits(app.Drag, ol.interaction.Pointer);
app.Drag.prototype.handleDownEvent = function (evt) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature, layer) {
return feature;
});
if (feature) {
console.log("down: node_id: " + feature.getProperties()['id']);
this.coordinate12_ = evt.coordinate;
this.feature_ = feature;
}
return !!feature;
};
app.Drag.prototype.handleDragEvent = function (evt) {
var map = evt.map;
fs = featureOverlay.getSource().getFeatures();
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature, layer) {
return feature;
});
if (!(feature === undefined)) {
console.log("drag: node_id: " + feature.getProperties()['id']);
// console.log("this:" + this.feature_.getId()+ " o: " + feature.getId());
if (this.feature_.getProperties()['id'] != feature.getProperties()['id']) {
console.log("green: node_id: " + feature.getProperties()['id']);
this.feature_.setStyle(overlap_style);
} else {
this.feature_.setStyle(circle_style);
}
}
var deltaX = evt.coordinate[0] - this.coordinate12_[0];
var deltaY = evt.coordinate[1] - this.coordinate12_[1];
var geometry = /** #type {ol.geom.SimpleGeometry} */
(this.feature_.getGeometry());
geometry.translate(deltaX, deltaY);
this.coordinate12_[0] = evt.coordinate[0];
this.coordinate12_[1] = evt.coordinate[1];
};
app.Drag.prototype.handleMoveEvent = function (evt) {
if (this.cursor_) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature, layer) {
if (this.feature_ != null)
{
console.log("move forEachFeatureAtPixel: node_id: " + feature.getProperties()['id']);
}
return feature;
});
var element = evt.map.getTargetElement();
if (feature) {
if (this.feature_ != null)
{
console.log("move forEachFeatureAtPixel: node_id: " + feature.getProperties()['id']);
}
if (element.style.cursor != this.cursor_) {
this.previousCursor_ = element.style.cursor;
element.style.cursor = this.cursor_;
}
} else if (this.previousCursor_ !== undefined) {
element.style.cursor = this.previousCursor_;
this.previousCursor_ = undefined;
}
}
};
/**
* #param {ol.MapBrowserEvent} evt Map browser event.
* #return {boolean} `false` to stop the drag sequence.
*/
app.Drag.prototype.handleUpEvent = function (evt) {
this.coordinate12_ = null;
this.feature_ = null;
return false;
};
var draw = new ol.interaction.Draw({
features: features,
type: ('Point')
});
var drag = new app.Drag();
var id_count = 0;
draw.on('drawend', function(e) {
e.feature.setProperties({
'id': ++id_count
})
console.log(e.feature, e.feature.getProperties());
});
map.addInteraction(draw);
var typeSelect = document.getElementById('type');
typeSelect.value = 'DrawPoint';
typeSelect.onchange = function () {
if (typeSelect.value == 'DrawPoint')
{
map.removeInteraction(drag);
map.addInteraction(draw);
}else
{
map.removeInteraction(draw);
map.addInteraction(drag);
}
};
</script>
</body>
</html>
Prevent the feature(be it 1st or 2nd) which is being moved to get returned from map.forEachFeatureAtPixel method.
See the below working code snippet.
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Draw and Modify Features</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol-debug.js"></script>
</head>
<body>
<form class="form-inline">
<select id="type">
<option value="DrawPoint">Draw Point</option>
<option value="DragPoint">Drag Point</option>
</select>
</form>
<div id="map" class="map"></div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
var circle_style = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 2)'
})
})
});
var overlap_style = new ol.style.Style({
image: new ol.style.Circle({
radius: 8,
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 2)'
})
})
});
var features = new ol.Collection();
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector({
features: features
}),
style: circle_style
});
featureOverlay.setMap(map);
window.app = {};
var app = window.app;
/**
* #constructor
* #extends {ol.interaction.Pointer}
*/
var dragFeature;
app.Drag = function () {
ol.interaction.Pointer.call(this, {
handleDownEvent: app.Drag.prototype.handleDownEvent,
handleDragEvent: app.Drag.prototype.handleDragEvent,
handleMoveEvent: app.Drag.prototype.handleMoveEvent,
handleUpEvent: app.Drag.prototype.handleUpEvent
});
this.coordinate12_ = null;
this.cursor_ = 'pointer';
this.previousCursor_ = undefined;
};
ol.inherits(app.Drag, ol.interaction.Pointer);
app.Drag.prototype.handleDownEvent = function (evt) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature, layer) {
return feature;
});
if (feature) {
//console.log("down: node_id: " + feature.getProperties()['id']);
this.coordinate12_ = evt.coordinate;
//this.feature_ = feature;
dragFeature = feature;
}
return !!feature;
};
app.Drag.prototype.handleDragEvent = function (evt) {
var map = evt.map;
fs = featureOverlay.getSource().getFeatures();
// Filter the feature
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature, layer) {
if ( feature.getProperties()['id'] != dragFeature.getProperties()['id'] ) {
return feature;
}
});
if (!(feature === undefined)) {
console.log("------------------- drag: node_id: " + feature.getProperties()['id']);
// console.log("this:" + this.feature_.getId()+ " o: " + feature.getId());
if (dragFeature.getProperties()['id'] != feature.getProperties()['id']) {
console.log("green: node_id: " + feature.getProperties()['id']);
dragFeature.setStyle(overlap_style);
}
}
else {
dragFeature.setStyle(circle_style);
}
var deltaX = evt.coordinate[0] - this.coordinate12_[0];
var deltaY = evt.coordinate[1] - this.coordinate12_[1];
var geometry = /** #type {ol.geom.SimpleGeometry} */
(dragFeature.getGeometry());
geometry.translate(deltaX, deltaY);
this.coordinate12_[0] = evt.coordinate[0];
this.coordinate12_[1] = evt.coordinate[1];
};
app.Drag.prototype.handleMoveEvent = function (evt) {
if (this.cursor_) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature, layer) {
if (dragFeature != null)
{
//console.log("move forEachFeatureAtPixel: node_id: " + feature.getProperties()['id']);
}
return feature;
});
var element = evt.map.getTargetElement();
if (feature) {
if (dragFeature != null)
{
//console.log("move forEachFeatureAtPixel: node_id: " + feature.getProperties()['id']);
}
if (element.style.cursor != this.cursor_) {
this.previousCursor_ = element.style.cursor;
element.style.cursor = this.cursor_;
}
} else if (this.previousCursor_ !== undefined) {
element.style.cursor = this.previousCursor_;
this.previousCursor_ = undefined;
}
}
};
/**
* #param {ol.MapBrowserEvent} evt Map browser event.
* #return {boolean} `false` to stop the drag sequence.
*/
app.Drag.prototype.handleUpEvent = function (evt) {
this.coordinate12_ = null;
//this.feature_ = null;
dragFeature = null;
return false;
};
var draw = new ol.interaction.Draw({
features: features,
type: ('Point')
});
var drag = new app.Drag();
var id_count = 0;
draw.on('drawend', function(e) {
e.feature.setProperties({
'id': ++id_count
})
//console.log(e.feature, e.feature.getProperties());
});
map.addInteraction(draw);
var typeSelect = document.getElementById('type');
typeSelect.value = 'DrawPoint';
typeSelect.onchange = function () {
if (typeSelect.value == 'DrawPoint')
{
map.removeInteraction(drag);
map.addInteraction(draw);
}else
{
map.removeInteraction(draw);
map.addInteraction(drag);
}
};
</script>
</body>
</html>
I'm trying to create a Google Map that will draw out a race course from a list of lat & lng in my MVC model. I have successfully done this with markers but I need to do it with polylines to create a path of the course. Below is what I have but can't get the lines to show up.
Any suggestions?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(#Model.Courses.Latitude, #Model.Courses.Longitude),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
#foreach (var item in Model.CourseRatings.ValuesList)
{
<text>addMarker(#item.Item2, #item.Item3)</text>
}
var flightPath = new google.maps.Polyline({
path: function addMarker(x, y) { new google.maps.LatLng(x, y); },
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thank you!
For the path in your flightPath Polyline, supply it with an array of your points, rather than a reference to a function. Which should looks something like this:
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
Also consider using the snap to road api to smoother your polyline.
This worked for me but I'm going to try the smoothing you mentioned:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(#Model.Courses.Latitude, #Model.Courses.Longitude),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPathCoordinates =
[
#foreach (var item in Model.CourseRatings.ValuesList)
{
<text>new google.maps.LatLng(#item.Item2, #item.Item3),</text>
}
];
var flightPath = new google.maps.Polyline({
path: flightPathCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I tried to get a map image from a wms server using the following code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Playing with fis broker berlin</title>
<link rel="stylesheet" href="../../libs/ol3/css/ol.css"/>
<link rel="stylesheet" href="../../css/samples.css"/>
</head>
<body>
<div id="map" class="map"></div>
<script src="../../libs/ol3/js/ol.js"></script>
<script>
var imageSource = new ol.source.ImageWMS({
url: 'http://fbinter.stadt-berlin.de/fb/wms/senstadt/k_dtk50',
params: {
'LAYERS': '0',
'REQUEST': 'GetMap',
'STYLES': ['default'],
'SRS': 'EPSG:4326',
'BBOX': [13.079, 52.3284, 13.7701, 52.6877],
'WIDTH': '256',
'HEIGT': '256',
'FORMAT': 'jpeg'
}
})
imageSource.on('imageloaderror', function (event) {
var imageState = event.target.getState()
var request = event.image.n
console.log('imageloaderror, state = ' + imageState)
console.log('request: ' + request)
})
var imageLayer = new ol.layer.Image({
opacity: 0,
source: imageSource
})
var view = new ol.View({
center: [13.4297269, 52.4594867],
zoom: 10
})
var map = new ol.Map({
target: 'map',
layers: [imageLayer],
view: view
})
</script>
</body>
</html>
ol3 fails to show the image, because the wms sends backs a xml exception report instead of jpeg data meaning
crs is not permitted: EPSG:3857.
On the java console we see the message
Resource interpreted as Image but transferred with MIME type text/xml ...
I understand, that the image source is not set up correctly. This needs further investigaton by me. But My question is:
How can I catch the message crs is not permitted: EPSG:3857 and any other error messages from the wms server by the ol script?
You will need to use XHR to load the image and get the exception text, see this thread for some inspiration:
https://groups.google.com/d/msg/ol3-dev/39tX1fSeSc0/KGURE6NrexIJ
imageLoadFunction: function(image, src) {
progress('start');
var img = image.getImage();
if (typeof window.btoa == 'function') {
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
var uInt8Array = new Uint8Array(this.response);
var i = uInt8Array.length;
var binaryString = new Array(i);
while (i--) {
binaryString[i] = String.fromCharCode(uInt8Array[i]);
}
var data = binaryString.join('');
var type = xhr.getResponseHeader('content-type');
if (type.indexOf('image') === 0) {
img.src = 'data:' + type + ';base64,' + window.btoa(data);
} else {
error($.parseJSON(data));
}
} else {
error(this.statusText);
}
progress('end');
};
xhr.send();
} else {
img.onload = function() {
progress('end');
};
img.onerror = function() {
progress('end');
error();
};
img.src = src;
}
}
})
I have this fiddle
JS Fiddle
I want to limit the pinch zoom out of a canvas on iPad Safari. When i pinch out the canvas shrinks and becomes small. Is there any way i can limit the zoom out level on this particular device? I am using KineticJS.
Here's my code below of the fiddle
div id="container"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
function init() {
var lastDist = 0;
var startScale = 1;
function getDistance(p1, p2) {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
}
var image = new Image();
image.onload = function() {
kimage = new Kinetic.Image({
image: image,
x : 0,
y : 0
});
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
draggable: true,
dragBoundFunc: function(pos) {
var newX = 0;
if (pos.x < 0) {
newX = pos.x < stage.getWidth() - kimage.getWidth()
? stage.getWidth() - kimage.getWidth() : pos.x;
}
var newY = 0;
if (pos.y < 0) {
newY = pos.y < stage.getHeight() - kimage.getHeight()
? stage.getHeight() - kimage.getHeight() : pos.y;
}
return {
x: newX,
y: newY
};
}
});
stage.getContent().addEventListener('click', function(evt) {
var touch1 = evt.touches[0];
var touch2 = evt.touches[1];
if(touch1 && touch2) {
var dist = getDistance({
x: touch1.clientX,
y: touch1.clientY
}, {
x: touch2.clientX,
y: touch2.clientY
});
if(!lastDist) {
lastDist = dist;
}
var scale = stage.getScale().x * dist / lastDist;
stage.setScale(scale);
stage.draw();
lastDist = dist;
}
}, false);
stage.getContent().addEventListener('touchend', function() {
lastDist = 0;
}, false);
group.add(kimage);
layer.add(group);
stage.add(layer);
layer.draw();
}
image.src = 'http://www.ourclientwebsites.com/html5/images/1.jpg';
}
</script>
Add a viewport meta tag:<meta name="viewport" content="width=device-width, user-scalable=no">. This will prevent the page from zooming, while still allowing your app to grab the Javascript event.