[WebGL] Three.js - GUI 관련 텍스트입력 TextEdit 슬라이드 등등(canvas, css3d 다른것들도 응용링크)

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

 

출처: https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

 

 

1. Basic Usage

With very little code, dat.GUI creates an interface that you can use to modify variables.

<script type="text/javascript" src="dat.gui.js"></script>
<script type="text/javascript">
    
var FizzyText = function() {
  this.message = 'dat.gui';
  this.speed = 0.8;
  this.displayOutline = false;
  this.explode = function() { ... };
  // Define render logic ...
};

window.onload = function() {
  var text = new FizzyText();
  var gui = new dat.GUI();
  gui.add(text, 'message');
  gui.add(text, 'speed', -5, 5);
  gui.add(text, 'displayOutline');
  gui.add(text, 'explode');
};
    
</script>

• The property must be public, i.e. defined by this.prop = value
• dat.GUI determines controller type based on a property's initial value
• Press H to show/hide all GUI's.

2. Constraining Input

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://www.sw-engineering-candies.com/blog-1/three-simpledatgui-a-simple-user-interface-for-webgl-with-the-look-feel-of-dat-gui

 

 

For simple WebGL applications based on THREE.js the Google's Chrome Experiment DAT.GUI is a good choice to render a minimal user interface, but there is no simple and reliable way to render DAT.GUI inside the WebGL scene. Oculus Rift Applications need to render the user interface inside the scene to display for both eyes and they need two mouse cursors. 

 

At the moment I know no support of a simple GUI in THREE.js. This was my motivation to develop a simple GUI based on THREE.js, which should be as good as reasonable API compatible with DAT.GUI and has the same Look & Feel. The following article describes THREE.SimpleDatGui the result of these experiments. THREE.SimpleDatGui in standard WebGL and/or in Oculus Rift WebGL applications. 

 

 

CONTENTS

1. 1 Expected Results
2. 2 Implementation
3. 3 Tested Configurations
4. 4 Features
5. 5 Credits
6. 6 Find Code on GitHub

Expected Results

The First Demo of THREE.SimpleDatGui shows the use in an Oculus Rift WebGL Application 

The THREE.SimpleDatGui can be used as simple graphical user interface which is rendered within the THREE.js scene so that it can be displayed in Oculus Rift mode for both eyes.  For this also a mouse pointer has to be rendered for both eyes and the standard mouse pointer of the browser has to be hidden. 

 

Just open http://webgl-examples.appspot.com/simple-webgl-gui-oculus-rift/THREE.SimpleDatGuiOculusRiftDemo.html and you should see something like this (adjust the resolution of your browser 50-67%):

 

 

To get the sensor data a Oculus Rift Sensor Connector is needed. The Oculus Rift Sensor Connector provides sensor data at http://localhost:8444 and the access from THREE.OculusRiftControls.js happens with JSONP. The performance of this integration is not as fast as some other implementations based on web sockets, but is works without additional browser plug-in. 

 

Execute the following five steps to run with Oculus Rift Sensor Data:

1. Get the project: 
   Fork project on GitHub (https://github.com/MarkusSprunck/oculus-rift-sensor-connector.git) and/or download the zip (https://github.com/MarkusSprunck/oculus-rift-sensor-connector).
   
   
2. Connect your Oculus Rift DK2 to your computer: 
   Use the Oculus Configuration Utility to set the Rift Display Mode to Extended Desktop to the HMD.
   
   
3. Start ./target/OculusRiftSensorConnector.jar: 
   You may use OculusRiftSensorConnector.cmd on Windows. The compiled version expects Java 8 runtime, but it should work also with elder Java versions (maybe you have to change some lines).
   
   
4. Open ./client/THREE.SimpleDatGuiOculusRiftDemo.html: 
   Chrome Options for Local Development - The Google Chrome browser will not load local file by default due to security reason. When you fork the project and open from file system, start with the command line option --allow-file-access-from-files to load the textures. See alsohttp://www.chrome-allow-file-access-from-file.com/
   
   
5. Activate Connection to Oculus Rift: 
   Oculus Control is not active by default, because most visitors will not have the Oculus Rift hardware connected when opening. In this case you may use the standard trackbar control to move the scene. To connect to Oculus Rift, just open folder Advanced Options and check Oculus Control Active.

The Second Demo shows THREE.SimpleDatGui in a Standard WebGL Application

It demonstrates the rendering of the GUI inside the scene. This example also work properly on mobile devices (iOS). Just open the following link with Chrome or Firefox: http://webgl-examples.appspot.com/simple-webgl-gui/THREE.SimpleDatGuiDemo.html and you should see something like this:

 

 

 

When you render the GUI inside the scene parts of the scene may be rendered before the user interface. 

 

 

Use the trackball of your mouse to zoom in the demo applications and the right mouse button to rotate the scene.

Implementation

All the rendering is done in WebGL with THREE.js and without any other additional 3rd party library. The needed includes in your THREE.js application will be:

• THREE.SimpleDatGui.js and
• Helvetiker_regular.typeface.js - is part of THREE.js distribution, under the path ".\examples\fonts\"

When SimpleDatGui is used in Oculus Rift applications more components are necessary: 

• THREE.OculusRiftMouse - renders two mouse cursors (the mouse icons are in the folder '.\textures\')
• THREE.OculusRiftControls - optional to get sensor data from Oculus Rift

Tested Configurations

THREE.SimpleDatGuiOculusRiftDemo.html has been tested with the following browsers on Windows 7 with Oculus Rift:

• Chrome 43 (~60 FPS)
• Firefox 38 (~60 FPS)
• Internet Explorer 11 (~30 FPS, definitely to slow for Oculus Rift mode, but good enough for non Oculus Rift)

THREE.SimpleDatGui has been tested additionally on iOS 8.3 with iPad 2 with the following configurations:

• Safari (~50 FPS)
• Chrome (~50 FPS)

Features

Implemented Controls

• Button - executes a callback function
• Text-Input - edit a string 
• Value-Input - edit numbers & slider support
• CheckBox - change a boolean value
• ComboBox - select a single value from an array of values

Missing Features

• ColorPicker control 
• Save & restore of values 
• Copy & paste support in text and value controls
• Slider accepts mouse drag (not only mouse click)  [implemented in version 11]

 

Credits

Equirectangular Pictures

The tree scenes in this demo are licensed under the Creative Commons Attribution-Share Alike 2.0 Generic license. Many thanks to the author Alexandre Duret-Lutz (https://www.flickr.com/people/24183489@N00) from Paris, France for sharing them.

• http://commons.wikimedia.org/wiki/File:Place_Dauphine,_Paris_November_2011.jpg
• http://commons.wikimedia.org/wiki/File:Place_de_la_Concorde,_Paris_March_2007.jpg
• http://commons.wikimedia.org/wiki/File:Parc_de_Belleville,_Paris_June_2007.jpg

Libraries

• Ricardo Cabello for three.js (see https://github.com/mrdoob)
• Daniel Kwiecinski for hashmap.js

Find Code on GitHub

• https://github.com/MarkusSprunck/webgl-examples

 

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

기타관련링크:

 

three css 연동

- https://codepen.io/AdamEDGE/pen/RRjEwz

 

three.js css 텍스트 가져오기

- https://jsfiddle.net/trusktr/jc6j1wmf/

 

Handling Keyboard Input with JavaScript:

http://blog.mrroa.com/2014/06/05/handling-keyboard-input-with-javascript/

 

 

Three, CSS3D Mix TextInput

https://codepen.io/trusktr/pen/RjzKJx?depth=everything&order=popularity&page=28&q=webgl&show_forks=false

 

Three, CSS3D Mix TextInput

https://codepen.io/trusktr/pen/OzJJJN?editors=0010

 

Three, Html Page Mix 

https://github.com/jeromeetienne/threex.htmlmixer

http://jeromeetienne.github.io/threex.htmlmixer/examples/demo.html#default

 

Three GUI 데모

https://stemkoski.github.io/MathBox/dat-gui-demo.html

 

캔버스 텍스트 입력 소스 다운로드:

https://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input

 

캔버스 텍스트 입력기:

https://codepen.io/jdnichollsc/pen/waVMdB?editors=001

 

three dat,gui 예제:

https://codepen.io/webhacck/pen/QyxVpw

 

three dat.gui 예제:

https://jsfiddle.net/greggman/x41s2qhm/

 

 

 

 

=================================

=================================

=================================