Skip to content
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

ViewHelper: Make label text and style configurable. #28688

Merged
merged 6 commits into from
Jun 21, 2024
Merged

ViewHelper: Make label text and style configurable. #28688

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
89a772b
ViewHelper: Add options to the constructor
puxiao Jun 18, 2024
7cae6e2
Update ViewHelper.js
Mugen87 Jun 18, 2024
82ca339
add setLabels, setLabelStyle
puxiao Jun 19, 2024
3917dfa
add setLabels, setLabelStyle
puxiao Jun 19, 2024
115085e
update
puxiao Jun 19, 2024
5b45dad
Update ViewHelper.js
Mugen87 Jun 20, 2024
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
53 changes: 51 additions & 2 deletions examples/jsm/helpers/ViewHelper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ class ViewHelper extends Object3D {
const color3 = new Color( '#4488ff' );
const color4 = new Color( '#000000' );

const options = {};

const interactiveObjects = [];
const raycaster = new Raycaster();
const mouse = new Vector2();
Expand Down Expand Up @@ -166,6 +168,26 @@ class ViewHelper extends Object3D {

};

this.setLabels = function ( labelX, labelY, labelZ ) {

options.labelX = labelX;
options.labelY = labelY;
options.labelZ = labelZ;

updateLabels();

};

this.setLabelStyle = function ( font, color, radius ) {

options.font = font;
options.color = color;
options.radius = radius;

updateLabels();

};

this.update = function ( delta ) {

const step = delta * turnRate;
Expand Down Expand Up @@ -271,26 +293,53 @@ class ViewHelper extends Object3D {

}

function getSpriteMaterial( color ) {
function getSpriteMaterial( color, text ) {

const { font = '24px Arial', color: labelColor = '#000000', radius = 14 } = options;

const canvas = document.createElement( 'canvas' );
canvas.width = 64;
canvas.height = 64;

const context = canvas.getContext( '2d' );
context.beginPath();
context.arc( 32, 32, 14, 0, 2 * Math.PI );
context.arc( 32, 32, radius, 0, 2 * Math.PI );
context.closePath();
context.fillStyle = color.getStyle();
context.fill();

if ( text ) {

context.font = font;
context.textAlign = 'center';
context.fillStyle = labelColor;
context.fillText( text, 32, 41 );

}

const texture = new CanvasTexture( canvas );
texture.colorSpace = SRGBColorSpace;

return new SpriteMaterial( { map: texture, toneMapped: false } );

}

function updateLabels() {

posXAxisHelper.material.map.dispose();
posYAxisHelper.material.map.dispose();
posZAxisHelper.material.map.dispose();

posXAxisHelper.material.dispose();
posYAxisHelper.material.dispose();
posZAxisHelper.material.dispose();

posXAxisHelper.material = getSpriteMaterial( color1, options.labelX );
posYAxisHelper.material = getSpriteMaterial( color2, options.labelY );
posZAxisHelper.material = getSpriteMaterial( color3, options.labelZ );

}

}

}
Expand Down