Skip to content

Commit 85dc438

Browse files
author
潘卓然-中地数码台式机
committed
增加threejs的基本示例（点击，加载，移动等操作）以及图片说明
1 parent 9ae5c82 commit 85dc438

17 files changed

Lines changed: 2642 additions & 1645 deletions

File tree

‎config/config-mapboxgl.js‎

Lines changed: 1913 additions & 1615 deletions
Large diffs are not rendered by default.

‎demo/mapbox/example/dataview/threebox/basic.htm‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
3+
<head>
4+
<title>Threebox Basic Example</title>
5+
<script include="threebox" src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
6+
<style>
7+
body,
8+
html {
9+
width: 100%;
10+
height: 100%;
11+
margin: 0;
12+
}
13+
14+
#map {
15+
width: 100%;
16+
height: 100%;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<div id='map' class='map'></div>
23+
24+
<script>
25+
//mapbox服务数据的访问令牌，若使用mapbox提供的样式必须要设置令牌
26+
mapboxgl.accessToken =
27+
'pk.eyJ1Ijoid29ya2luZ2RvZyIsImEiOiJjamQyZmszenczMHRoMzRuczVzaGthbGhnIn0.HTkYTE-R82N3azqscSyHkA';
28+
29+
var origin = [114, 30.7353, 1000];
30+
31+
var map = new mapboxgl.Map({
32+
container: 'map',
33+
style: 'mapbox://styles/mapbox/light-v9',
34+
center: origin,
35+
zoom: 13,
36+
pitch: 60,
37+
heading: 41,
38+
hash: true
39+
});
40+
41+
map.on('style.load', function () {
42+
map.addLayer({
43+
id: 'custom_layer',
44+
type: 'custom',
45+
onAdd: function (map, gl) {
46+
console.log("基本模型已经加载")
47+
console.log(gl)
48+
window.threebox = new Threebox(map, gl);
49+
threebox.setupDefaultLights();
50+
51+
// initialize geometry and material of our cube object
52+
var geometry = new THREE.BoxGeometry(2000, 2000, 2000);
53+
54+
var redMaterial = new THREE.MeshPhongMaterial({
55+
color: 0x660000,
56+
side: THREE.DoubleSide
57+
});
58+
59+
cube = new THREE.Mesh(geometry, redMaterial);
60+
61+
threebox.addAtCoordinate(cube, origin);
62+
},
63+
64+
render: function (gl, matrix) {
65+
threebox.update(true);
66+
}
67+
});
68+
});
69+
</script>
70+
</body>

‎demo/mapbox/example/dataview/threebox/cube.htm‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!doctype html>
2+
3+
<head>
4+
<title>Threebox Basic Example</title>
5+
<script include="threebox" src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
6+
<style>
7+
body,
8+
html {
9+
width: 100%;
10+
height: 100%;
11+
margin: 0;
12+
}
13+
14+
#map {
15+
width: 100%;
16+
height: 100%;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<div id='map' class='map'></div>
23+
24+
<script>
25+
//mapbox服务数据的访问令牌，若使用mapbox提供的样式必须要设置令牌
26+
mapboxgl.accessToken =
27+
'pk.eyJ1Ijoid29ya2luZ2RvZyIsImEiOiJjamQyZmszenczMHRoMzRuczVzaGthbGhnIn0.HTkYTE-R82N3azqscSyHkA';
28+
var origin = [-122.4340, 37.7353, 1000];
29+
var map = new mapboxgl.Map({
30+
container: 'map',
31+
style: 'mapbox://styles/mapbox/light-v9',
32+
center: origin,
33+
zoom: 15.95,
34+
pitch: 60,
35+
heading: 41,
36+
hash: true
37+
});
38+
39+
map.on('load', function () {
40+
map.addLayer({
41+
id: 'custom_layer',
42+
type: 'custom',
43+
onAdd: function (map, gl) {
44+
onAdd(map, gl);
45+
},
46+
render: function (gl, matrix) {
47+
threebox.update(Date.now(), 'mbx');
48+
}
49+
});
50+
});
51+
52+
function onAdd(map, mbxContext) {
53+
window.threebox = new Threebox(map, mbxContext);
54+
threebox.setupDefaultLights();
55+
56+
// initialize geometry and material of our cube object
57+
var geometry = new THREE.BoxGeometry(2000, 2000, 2000);
58+
59+
var redMaterial = new THREE.MeshPhongMaterial({
60+
color: 0x660000,
61+
side: THREE.DoubleSide
62+
});
63+
64+
cube = new THREE.Mesh(geometry, redMaterial);
65+
cube.userData.name = "Red cube";
66+
67+
threebox.addAtCoordinate(
68+
cube,
69+
origin, {
70+
preScale: 1
71+
}
72+
);
73+
74+
function budge() {
75+
origin[0] += 0.001;
76+
threebox.moveToCoordinate(cube, origin)
77+
requestAnimationFrame(budge)
78+
}
79+
80+
budge()
81+
}
82+
</script>
83+
</body>

‎demo/mapbox/example/dataview/threebox/model.htm‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
3+
<head>
4+
<title>Add a GLTF object</title>
5+
<script include="threebox" src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
6+
7+
<style>
8+
body,
9+
html {
10+
width: 100%;
11+
height: 100%;
12+
margin: 0;
13+
}
14+
15+
#map {
16+
width: 100%;
17+
height: 100%;
18+
}
19+
</style>
20+
</head>
21+
22+
<body>
23+
<div id='map' class='map'></div>
24+
25+
<script>
26+
//mapbox服务数据的访问令牌，若使用mapbox提供的样式必须要设置令牌
27+
mapboxgl.accessToken =
28+
'pk.eyJ1Ijoid29ya2luZ2RvZyIsImEiOiJjamQyZmszenczMHRoMzRuczVzaGthbGhnIn0.HTkYTE-R82N3azqscSyHkA';
29+
30+
var origin = [-122.4340, 37.7353, 0];
31+
32+
var map = new mapboxgl.Map({
33+
container: 'map',
34+
style: 'mapbox://styles/mapbox/light-v9',
35+
center: origin,
36+
zoom: 18,
37+
pitch: 60,
38+
heading: 41,
39+
hash: true
40+
});
41+
42+
map.on('style.load', function () {
43+
44+
45+
map.addLayer({
46+
id: 'custom_layer',
47+
type: 'custom',
48+
onAdd: function (map, mbxContext) {
49+
50+
window.threebox = new Threebox(map, mbxContext);
51+
threebox.setupDefaultLights();
52+
53+
var loader = new THREE.GLTFLoader();
54+
55+
loader.load('../../data/model/threebox/34M_17.gltf', (function (gltf) {
56+
57+
// rotate object so it's sitting on its base
58+
gltf.scene.rotation.x = -Math.PI * 1.5
59+
60+
threebox.addAtCoordinate(gltf.scene, origin);
61+
62+
}).bind(this));
63+
64+
},
65+
render: function (gl, matrix) {
66+
threebox.update(true);
67+
68+
}
69+
});
70+
});
71+
</script>
72+
</body>

‎demo/mapbox/example/dataview/threebox/move.htm‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!doctype html>
2+
3+
<head>
4+
<title>Move cube on click event using .moveToCoordinate()</title>
5+
<script include="threebox" src="../../libs/zondyclient/include-mapboxgl-local.js"></script>
6+
<style>
7+
body,
8+
html {
9+
width: 100%;
10+
height: 100%;
11+
margin: 0;
12+
}
13+
14+
#map {
15+
width: 100%;
16+
height: 100%;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<div id='map' class='map'></div>
23+
24+
<script>
25+
//mapbox服务数据的访问令牌，若使用mapbox提供的样式必须要设置令牌
26+
mapboxgl.accessToken =
27+
'pk.eyJ1Ijoid29ya2luZ2RvZyIsImEiOiJjamQyZmszenczMHRoMzRuczVzaGthbGhnIn0.HTkYTE-R82N3azqscSyHkA';
28+
29+
var origin = [-122.4340, 37.7353, 1000];
30+
31+
var map = new mapboxgl.Map({
32+
container: 'map',
33+
style: 'mapbox://styles/mapbox/light-v9',
34+
center: origin,
35+
zoom: 15.95,
36+
pitch: 60,
37+
heading: 41,
38+
hash: true
39+
});
40+
41+
42+
map.on('style.load', function () {
43+
44+
map.addLayer({
45+
id: 'custom_layer',
46+
type: 'custom',
47+
onAdd: function (map, mbxContext) {
48+
49+
window.threebox = new Threebox(map, mbxContext);
50+
threebox.setupDefaultLights();
51+
52+
// initialize geometry and material of our cube object
53+
var geometry = new THREE.BoxGeometry(2000, 2000, 2000);
54+
55+
var redMaterial = new THREE.MeshPhongMaterial({
56+
color: 0x660000,
57+
side: THREE.DoubleSide
58+
});
59+
60+
cube = new THREE.Mesh(geometry, redMaterial);
61+
62+
threebox.addAtCoordinate(cube, origin);
63+
64+
// on click of the map, move the cube to that spot
65+
map.on('click', function (e) {
66+
67+
// convert screen pixels to lnglat, and format it as an array
68+
var lnglat = map.unproject(e.point);
69+
lnglat = [lnglat.lng, lnglat.lat, 1000];
70+
71+
threebox.moveToCoordinate(cube, lnglat)
72+
73+
})
74+
},
75+
76+
render: function (gl, matrix) {
77+
threebox.update(true);
78+
}
79+
});
80+
});
81+
</script>
82+
</body>

0 commit comments

Comments
 (0)