Skip to content

Set scale of objects which have units of "scene" #369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joshnice wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Set scale of objects which have units of "scene" #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3ad0176
Added set scale functionality of scale with units of scene
joshnice Sep 6, 2022
7df9369
Added example
joshnice Sep 6, 2022
10f9fef
Dist folder commits
joshnice Sep 6, 2022
d49f0b5
Indentation
joshnice Sep 6, 2022
4eb220a
Clean up
joshnice Sep 6, 2022
d56241c
Added functionality to set function
joshnice Sep 6, 2022
a4d6b50
Updated example
joshnice Sep 6, 2022
661ed84
Updated dist files
joshnice Sep 6, 2022
72372ca
Moved setting scale outside of the else statement
joshnice Sep 21, 2022
6ef1d57
dist
joshnice Sep 21, 2022
2f2a248
Merge branch 'jscastro76:master' into Set-scale-scene-objects
joshnice Oct 7, 2022
808c18c
Merge branch 'jscastro76:master' into Set-scale-scene-objects
joshnice Nov 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion dist/threebox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1703,7 +1703,13 @@ AnimationManager.prototype = {
}

if (s) {
this.scale.set(s[0], s[1], s[2]);
if (this.userData.units === "scene" && typeof s === "number") {
const initialScale = this.userData.scale;
const newScale = s / initialScale;
obj.scale.set(newScale, newScale, newScale);
} else {
this.scale.set(s[0], s[1], s[2]);
}
options.scale = this.scale;
}

Expand Down Expand Up @@ -17901,6 +17907,11 @@ Objects.prototype = {
} else if (obj.fixedZoom) {
if (scale) obj.userData.mapScale = scale;
obj.setFixedZoom(obj.userData.mapScale); //apply fixed zoom
} else if (obj.userData.units === "scene" && typeof scale === "number") {
const initialScale = obj.userData.scale;
const newScale = scale / initialScale;
obj.scale.set(newScale, newScale, newScale);
tb.map.repaint = true;
} else obj.scale.set(1, 1, 1);
}

Expand Down
2 changes: 1 addition & 1 deletion dist/threebox.min.js
View file
Open in desktop

Large diffs are not rendered by default.

101 changes: 101 additions & 0 deletions examples/22-set-scale.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!doctype html>
<head>
<title>Threebox Object3D Example</title>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<script src="../dist/threebox.js" type="text/javascript"></script>
<link href="../dist/threebox.css" rel="stylesheet" />
<script src="config.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}

#map {
width: 100%;
height: 100%;
}

.scale-group {
position: absolute;
right: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id='map' class='map'></div>
<div class="scale-group">
<button onclick="setScale(25)">Set Scale 25</button>
<button onclick="setScale(50)">Set Scale 50</button>
</div>
</body>
<script>

if (!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");

mapboxgl.accessToken = config.accessToken;
var origin = [-122.4340, 37.7353, 0];

var globalModel;

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: origin,
zoom: 12.5,
pitch: 60,
bearing: 80,
antialias: true
});


// we can add Threebox to mapbox to add built-in mouseover/mouseout and click behaviors
window.tb = new Threebox(
map,
map.getCanvas().getContext('webgl'),
{
defaultLights: true,
}
);

map.on('style.load', function () {
map.addLayer({
id: 'custom_layer',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, mbxContext) {

var options = {
obj: './models/soldier.glb',
type: 'gltf',
scale: 25,
units: 'scene',
rotation: { x: 90, y: 0, z: 0 }, //default rotation
anchor: 'center'
}

tb.loadObj(options, function (model) {
let soldier = model.setCoords(origin);
globalModel = soldier;
tb.add(soldier);
})

},

render: function (gl, matrix) {
tb.update();
}
});

});

function setScale(scale) {
globalModel.setScale(scale);
// globalModel.set({ scale });
}

</script>
</html>
8 changes: 7 additions & 1 deletion src/animation/AnimationManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,13 @@ AnimationManager.prototype = {
}

if (s) {
this.scale.set(s[0], s[1], s[2]);
if (this.userData.units === "scene" && typeof s === "number") {
const initialScale = this.userData.scale;
const newScale = s / initialScale;
obj.scale.set(newScale, newScale, newScale);
} else {
this.scale.set(s[0], s[1], s[2]);
}
options.scale = this.scale;
}

Expand Down
5 changes: 5 additions & 0 deletions src/objects/objects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -781,6 +781,11 @@ Objects.prototype = {
} else if (obj.fixedZoom) {
if (scale) obj.userData.mapScale = scale;
obj.setFixedZoom(obj.userData.mapScale); //apply fixed zoom
} else if (obj.userData.units === "scene" && typeof scale === "number") {
const initialScale = obj.userData.scale;
const newScale = scale / initialScale;
obj.scale.set(newScale, newScale, newScale);
tb.map.repaint = true;
} else obj.scale.set(1, 1, 1);
}

Expand Down