this is all of my code i am getting all the three.js source from my node_modules directory i installed through yarn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello World</title>
<link rel="stylesheet" href="css/main.css">
</head>
<script src="node_modules/three/build/three.js"></script>
<body>
</body>
<script>
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHieght, 0.1, 1000);
camera.position.z = 10;
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#CCC");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshLambertMaterial({color: 0xFFCC00});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
let light = new THREE.PointLight(0xffffff, 1, 500);
light.position.set(10,0,25);
renderer.render(scene, camera);
console.log("compiled")
</script>
</html>
I am getting no errors, and boxGeometry is not being displayed i do see the light grey canvas that i set for the render view nothing I've tried works
I am running this on MacOs 11.0.1 through Chrome
There is a typo in your code. innerHieght should be innerHeight. Besides, it's necessary to add the point light to your scene.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor("#CCC");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({
color: 0xFFCC00
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const light = new THREE.PointLight(0xffffff, 1, 500);
light.position.set(10, 0, 25);
scene.add(light);
renderer.render(scene, camera);
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.123/build/three.js"></script>
Related
I wrote this thing in my HTML file
<script type="module" src="script.js"></script>
And this is the Javascript
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.SphereGeometry(1, 100, 100);
const material = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.8, metalness: 1});
const ball = new THREE.Mesh(geometry, material);
scene.add(ball);
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 10);
scene.add(light);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
ball.rotation.x += 0.01;
ball.rotation.y += 0.01;
ball.rotation.z += 0.01;
renderer.render(scene, camera);
};
animate();
Also the error in the browser console is this
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
I tried many times reinstalling the module, even asking chatGPT for help but it also doesn't work. I BET NO ONE CAN FIX THIS
You are missing an import map in your code. Add the following above your <script> tag.
<script async src="https://unpkg.com/es-module-shims#1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three#0.148/build/three.module.js"
}
}
</script>
This will load three.js from a CDN (unpkg). However, you can replace the URL with a path to your locally hosted three.js version.
I am new to mapbox.
I need to use the supercluster project of mapbox in order to plot 6 millions of gps in a map.
i tried to use the demo in localhost but i only get an empty map !?
this is my code in index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Supercluster Leaflet demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<link rel="stylesheet" href="cluster.css" />
<style>
html, body, #map {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
<script src="https://unpkg.com/supercluster#3.0.2/dist/supercluster.min.js">
var index = supercluster({
radius: 40,
maxZoom: 16
});
index.load(GeoObs.features);
index.getClusters([-180, -85, 180, 85], 2);
</script>
</body>
</html>
Note : GeoObs is my geojson file
what is wrong ?
FWIW here is a self-contained example of how to use supercluster, without a Web Worker. It is also simply based on the repo demo.
var map = L.map('map').setView([0, 0], 0);
// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
pointToLayer: createClusterIcon
}).addTo(map);
// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);
function update() {
if (!ready) return;
var bounds = map.getBounds();
var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
var zoom = map.getZoom();
var clusters = index.getClusters(bbox, zoom);
markers.clearLayers();
markers.addData(clusters);
}
// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
var clusterId = e.layer.feature.properties.cluster_id;
var center = e.latlng;
var expansionZoom;
if (clusterId) {
expansionZoom = index.getClusterExpansionZoom(clusterId);
map.flyTo(center, expansionZoom);
}
});
// Retrieve Points data.
var placesUrl = 'https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/test/fixtures/places.json';
var index;
var ready = false;
jQuery.getJSON(placesUrl, function(geojson) {
// Initialize the supercluster index.
index = supercluster({
radius: 60,
extent: 256,
maxZoom: 18
}).load(geojson.features); // Expects an array of Features.
ready = true;
update();
});
function createClusterIcon(feature, latlng) {
if (!feature.properties.cluster) return L.marker(latlng);
var count = feature.properties.point_count;
var size =
count < 100 ? 'small' :
count < 1000 ? 'medium' : 'large';
var icon = L.divIcon({
html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
className: 'marker-cluster marker-cluster-' + size,
iconSize: L.point(40, 40)
});
return L.marker(latlng, {
icon: icon
});
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/supercluster#4.0.1/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="map" style="height: 180px"></div>
var map = L.map('map').setView([0, 0], 0);
// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
pointToLayer: createClusterIcon
}).addTo(map);
// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);
function update() {
if (!ready) return;
var bounds = map.getBounds();
var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
var zoom = map.getZoom();
var clusters = index.getClusters(bbox, zoom);
markers.clearLayers();
markers.addData(clusters);
}
// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
var clusterId = e.layer.feature.properties.cluster_id;
var center = e.latlng;
var expansionZoom;
if (clusterId) {
expansionZoom = index.getClusterExpansionZoom(clusterId);
map.flyTo(center, expansionZoom);
}
});
// Retrieve Points data.
var placesUrl = 'https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/test/fixtures/places.json';
var index;
var ready = false;
jQuery.getJSON(placesUrl, function(geojson) {
// Initialize the supercluster index.
index = supercluster({
radius: 60,
extent: 256,
maxZoom: 18
}).load(geojson.features); // Expects an array of Features.
ready = true;
update();
});
function createClusterIcon(feature, latlng) {
if (!feature.properties.cluster) return L.marker(latlng);
var count = feature.properties.point_count;
var size =
count < 100 ? 'small' :
count < 1000 ? 'medium' : 'large';
var icon = L.divIcon({
html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
className: 'marker-cluster marker-cluster-' + size,
iconSize: L.point(40, 40)
});
return L.marker(latlng, {
icon: icon
});
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/supercluster#4.0.1/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="map" style="height: 180px"></div>
var map = L.map('map').setView([0, 0], 0);
// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
pointToLayer: createClusterIcon
}).addTo(map);
// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);
function update() {
if (!ready) return;
var bounds = map.getBounds();
var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
var zoom = map.getZoom();
var clusters = index.getClusters(bbox, zoom);
markers.clearLayers();
markers.addData(clusters);
}
// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
var clusterId = e.layer.feature.properties.cluster_id;
var center = e.latlng;
var expansionZoom;
if (clusterId) {
expansionZoom = index.getClusterExpansionZoom(clusterId);
map.flyTo(center, expansionZoom);
}
});
// Retrieve Points data.
var placesUrl = 'https://dev.infrapedia.com/api/assets/map/facilities.points.json';
var index;
var ready = false;
jQuery.getJSON(placesUrl, function(geojson) {
// Initialize the supercluster index.
index = supercluster({
radius: 60,
extent: 256,
maxZoom: 18
}).load(geojson.features); // Expects an array of Features.
ready = true;
update();
});
function createClusterIcon(feature, latlng) {
if (!feature.properties.cluster) return L.marker(latlng);
var count = feature.properties.point_count;
var size =
count < 100 ? 'small' :
count < 1000 ? 'medium' : 'large';
var icon = L.divIcon({
html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
className: 'marker-cluster marker-cluster-' + size,
iconSize: L.point(40, 40)
});
return L.marker(latlng, {
icon: icon
});
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/supercluster#4.0.1/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="map" style="height: 180px"></div>
I Solved my issue.
to use the supercluster project you need :
1) download and install : node and npm
2) with npm install supercluster: npm i supercluster
then you will get a folder named node_modules in which you will find supercluster folder under it copy the folder named dist (node_modules>supercluster>dist)
3) download from github the project supercluster here you will get a folder named supercluster-master past in it the folder dist copied in step 2)
Now you can test it by selecting index.html into your browser (supercluster-master>demo>index.html)
if you want to test another JSON or GEOJSON file just:
1) put this file under fixtures folder
(supercluster-master>test>fixtures)
then
2) open worker.js (supercluster-master>demo>worker.js) and change the first variable of the geojson function to point on that file
example :
getJSON('../test/fixtures/myFile.geojson', function (geojson) {
Alternatively
you can use the super-cluster algorithme directley in mapbox gl js mapBox gl js example or with jupyter version;mapbox-jupyter mapbox-jupyter example
Leaflet zooms so now and than too much on clicking a cluster.
A small part of 1 marker is shown on the right and a small part from the other marker is shown on the left side of the map.
My workaround is counting markers in scope and re-adjust the zoomlevel when the counter = 0.
Shouldn't that be in the zoomcalculation of leaflet?
The zoom correction:
mcg.on('clusterclick', function () {
if (markersInScope == 0) {
var zoom = map.getZoom();
map.setZoom(zoom - 1);
}
});
You could try adjusting the zoom to fit the bounds of the mcg and add some padding
mcg.on('clusterclick', function () {
map.fitBounds(mcg.getBounds().pad(0.5));
}
});
If you add the markers to a featureGroup, the bounds for the group will available to you:
Here is a sample file from Leaflet:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<button onclick="geojsonLayerBounds();">Show GeoJSON layer bounds</button>
<button onclick="featureGroupBounds();">Show feature group bounds</button>
<script src="geojson-sample.js"></script>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
rectangle,
featureGroup;
var map = new L.Map('map', {
center: new L.LatLng(0.78, 102.37),
zoom: 7,
layers: [osm]
});
var geojson = L.geoJson(geojsonSample, {
style: function (feature) {
return {color: feature.properties.color};
},
onEachFeature: function (feature, layer) {
var popupText = 'geometry type: ' + feature.geometry.type;
if (feature.properties.color) {
popupText += '<br/>color: ' + feature.properties.color
}
layer.bindPopup(popupText);
}
});
geojson.addLayer(new L.Marker(new L.LatLng(2.745530718801952, 105.194091796875)))
var eye1 = new L.Marker(new L.LatLng(-0.7250783020332547, 101.8212890625));
var eye2 = new L.Marker(new L.LatLng(-0.7360637370492077, 103.2275390625));
var nose = new L.Marker(new L.LatLng(-1.3292264529974207, 102.5463867187));
var mouth = new L.Polyline([
new L.LatLng(-1.3841426927920029, 101.7333984375),
new L.LatLng(-1.6037944300589726, 101.964111328125),
new L.LatLng(-1.6806671337507222, 102.249755859375),
new L.LatLng(-1.7355743631421197, 102.67822265625),
new L.LatLng(-1.5928123762763, 103.0078125),
new L.LatLng(-1.3292264529974207, 103.3154296875)
]);
map.addLayer(eye1).addLayer(eye2).addLayer(nose).addLayer(mouth);
featureGroup = new L.FeatureGroup([eye1, eye2, nose, mouth]);
map.addLayer(geojson);
map.addLayer(featureGroup);
function geojsonLayerBounds() {
if (rectangle) {
rectangle.setBounds(geojson.getBounds());
} else {
rectangle = new L.Rectangle(geojson.getBounds());
map.addLayer(rectangle);
}
}
function featureGroupBounds() {
if (rectangle) {
rectangle.setBounds(featureGroup.getBounds());
} else {
rectangle = new L.Rectangle(featureGroup.getBounds());
map.addLayer(rectangle);
}
}
</script>
</body>
</html>
Can I adapt the visble data in the chart to the Yaxis when I drag the chart across the x axis?
In the actual example I can drag the chart across the X Axis, but the chart doesnt adapted to the Y Axes. The y min, and the y max options are the same and calculate for all the chart.
http://plnkr.co/edit/Yulri34tqD80vLFHHGsD?p=preview
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Real-time updates</title>
<link href="http://www.flotcharts.org/flot/examples/examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.navigate.js"></script>
<script type="text/javascript">
$(function() {
// We use an inline data source in the example, usually data would
// be fetched from a server
var data = [],
totalPoints = 300;
var xx = 0;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) { y = 0; } else if (y > 100) { y = 100; }
data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]]); ++xx;
}
return res;
}
// Set up the control widget
var updateInterval = 500;
var plot = $.plot("#placeholder", [ getRandomData() ], {
series: {
shadowSize: 0 // Drawing is faster without shadows
},
yaxis: {min: 0,max: 100},
xaxis: {
min: 100,max: 200,
zoomRange: [0, 300],
panRange: [0, 300]
},
yaxis: {
zoomRange: [0, 100], //minimo valor del y data, máximo valor
panRange: [0, 100]
},
crosshair: {
mode: "xy"
},
zoom: { interactive: true},
pan: {interactive: true,cursor: "crosshair"}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
});
</script>
</head>
<body>
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
</body>
</html>
Take a look at
Flot charts - changing the y axis on the fly
You could get the min and max values and set the plot like that:
plot.getOptions().yaxes[0].min = 0;
plot.getOptions().yaxes[0].max = yourMAXNOW;
How do I make the rendering using the following three.js code scale as the browser window scales, i.e. the text becomes smaller as the browser window becomes smaller?
Or, can you suggest an alternative approach? I tried using an iframe (with appropriate styling code to make the iframe scale as the browser window scales) which references a web page with the three.js rendering. That approach worked for desktop browsers but did not work for an iPhone.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="helvetiker_bold.typeface.js"></script>
<script type="text/javascript">
var camera, renderer;
function init3d() {
var container = document.getElementById('3d');
camera = new THREE.PerspectiveCamera( 45, 747 / 531, 1, 2400 );
camera.position.set( 0, 300, 900 );
var scene = new THREE.Scene();
camera.lookAt( scene.position );
var ambient = new THREE.AmbientLight( 0x606060 );
scene.add( ambient );
var spotLight = new THREE.SpotLight( 0xffffcc );
spotLight.position.set( -1000, 2400, 2400 );
scene.add( spotLight );
var textGeo = new THREE.TextGeometry( "HELLO", {
size: 100,
height: 20,
curveSegments: 12,
font: "helvetiker",
weight: "bold",
style: "normal",
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
});
textGeo.computeBoundingBox();
var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
var textMaterial = new THREE.MeshPhongMaterial( { color: 0x80a0c0, specular: 0xffffff } );
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.x = centerOffset;
mesh.position.y = -10;
var text = new THREE.Object3D();
text.add( mesh );
scene.add( text );
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setClearColor( 0x204060 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = document.getElementById("3d").offsetWidth /document.getElementById("3d").offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize( document.getElementById("3d").offsetWidth, document.getElementById("3d").offsetHeight );
}
window.addEventListener ? window.addEventListener("load",init3d,false) : window.attachEvent && window.attachEvent("onload",init3d);
</script>
</head>
<body style="background-color:#339966">
<div style="max-width:747px; max-height:531px; width:100%">
<div id="3d" style="width:100%"></div>
</div>
</body>
</html>