Select option values and text

Questions
1

Hello,

I´m adding a select box with gui.add. At the moment the option value="" is the same as the option text.

Example: <option value="house">house</option>

Now I want that the <option value="" and option text have different inputs. It should be like that:

Example: <option value="house">Object3</option>

I want to get the option text inputs from the const assetnames and the option value inputs from the const assetvalues .

And the param inputs I want to get from the const paramsname and const paramsvalue .

I´ve made the following JSFiddle.

Thanks for help.

2

When you share a live example, please make sure it actually works. In your demo, the browser console is full of runtime errors and you only see a black screen.

Just copy/pasting code without adjusting paths is not the idea of creating a fiddle.

Anyway, I suggest you study how the GUI of the following three.js example is configured. You will see in the code, that the select boxes have different key/value pairs.

https://threejs.org/examples/#webgl_depth_texture

1 Like
3

Yes, i´ve edited the JSFiddle and the initial post with a better example: JSFiddle

Also I´ve looked at your posted example but I think it completely has another structure.

Isn´t there a more easier solution to implement it in that piece of code:

			const gui = new GUI( { width: 300 } );
			gui.add( paramsvalue, 'asset', assetvalues ).onChange( function ( value ) {

				if ( vrmlScene ) {

					vrmlScene.traverse( function ( object ) {

						if ( object.material ) object.material.dispose();
						if ( object.material && object.material.map ) object.material.map.dispose();
						if ( object.geometry ) object.geometry.dispose();

					} );

					scene.remove( vrmlScene );

				}

				loadAsset( value );

			} );