Skip to content

Commit 2f8155f

Browse files
mrdoobmrdoob
committed
Added PaintViveController.
1 parent d76059e commit 2f8155f

File tree

2 files changed

+121
-18
lines changed

2 files changed

+121
-18
lines changed

‎examples/js/vr/PaintViveController.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/**
2+
* @author mrdoob / http://mrdoob.com
3+
*/
4+
5+
THREE.PaintViveController = function ( id ) {
6+
7+
THREE.ViveController.call( this, id );
8+
9+
var PI2 = Math.PI * 2;
10+
11+
var MODES = { COLOR: 0, SIZE: 1 };
12+
var mode = MODES.COLOR;
13+
14+
var color = new THREE.Color( 1, 1, 1 );
15+
var size = 1.0;
16+
17+
//
18+
19+
function generateHueTexture() {
20+
21+
var canvas = document.createElement( 'canvas' );
22+
canvas.width = 256;
23+
canvas.height = 256;
24+
25+
var context = canvas.getContext( '2d' );
26+
var imageData = context.getImageData( 0, 0, 256, 256 );
27+
var data = imageData.data;
28+
29+
for ( var i = 0, j = 0; i < data.length; i += 4, j ++ ) {
30+
31+
var x = ( ( j % 256 ) / 256 ) - 0.5;
32+
var y = ( Math.floor( j / 256 ) / 256 ) - 0.5;
33+
34+
color.setHSL( Math.atan2( y, x ) / PI2, 1,( 0.5 - Math.sqrt( x * x + y * y ) ) * 2.0 );
35+
36+
data[ i + 0 ] = color.r * 256;
37+
data[ i + 1 ] = color.g * 256;
38+
data[ i + 2 ] = color.b * 256;
39+
data[ i + 3 ] = 256;
40+
41+
}
42+
43+
context.putImageData( imageData, 0, 0 );
44+
45+
return new THREE.CanvasTexture( canvas );
46+
47+
}
48+
49+
var geometry = new THREE.CircleGeometry( 1, 32 );
50+
var material = new THREE.MeshBasicMaterial( { map: generateHueTexture() } );
51+
var mesh = new THREE.Mesh( geometry, material );
52+
mesh.position.set( 0, 0.005, 0.0495 );
53+
mesh.rotation.x = - 1.45;
54+
mesh.scale.setScalar( 0.02 );
55+
this.add( mesh )
56+
57+
var geometry = new THREE.IcosahedronGeometry( 0.1, 2 );
58+
var material = new THREE.MeshBasicMaterial();
59+
material.color = color;
60+
var ball = new THREE.Mesh( geometry, material );
61+
mesh.add( ball );
62+
63+
function onAxisChanged( event ) {
64+
65+
if ( this.getButtonState( 'thumbpad' ) === false ) return;
66+
67+
var x = event.axes[ 0 ] / 2.0;
68+
var y = - event.axes[ 1 ] / 2.0;
69+
70+
if ( mode === MODES.COLOR ) {
71+
color.setHSL( Math.atan2( y, x ) / PI2, 1, ( 0.5 - Math.sqrt( x * x + y * y ) ) * 2.0 );
72+
ball.position.x = event.axes[ 0 ];
73+
ball.position.y = event.axes[ 1 ];
74+
}
75+
76+
if ( mode === MODES.SIZE ) {
77+
size = y + 1;
78+
}
79+
80+
}
81+
82+
function onGripsDown( event ) {
83+
84+
if ( mode === MODES.COLOR ) {
85+
mode = MODES.SIZE;
86+
mesh.visible = false;
87+
return;
88+
}
89+
90+
if ( mode === MODES.SIZE ) {
91+
mode = MODES.COLOR;
92+
mesh.visible = true;
93+
return;
94+
}
95+
96+
}
97+
98+
this.getColor = function () { return color; };
99+
this.getSize = function () { return size; };
100+
101+
this.addEventListener( 'axischanged', onAxisChanged );
102+
this.addEventListener( 'gripsdown', onGripsDown );
103+
104+
};
105+
106+
THREE.PaintViveController.prototype = Object.create( THREE.ViveController.prototype );
107+
THREE.PaintViveController.prototype.constructor = THREE.PaintViveController;

‎examples/webvr_vive_paint.html

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<script src="js/controls/VRControls.js"></script>
2525
<script src="js/effects/VREffect.js"></script>
2626
<script src="js/vr/ViveController.js"></script>
27+
<script src="js/vr/PaintViveController.js"></script>
2728
<script src="js/vr/WebVR.js"></script>
2829

2930
<script src="js/loaders/OBJLoader.js"></script>
@@ -54,8 +55,6 @@
5455
var vector3 = new THREE.Vector3();
5556
var vector4 = new THREE.Vector3();
5657

57-
var color = new THREE.Color( 0, 0, 0 );
58-
5958
var point4 = new THREE.Vector3();
6059
var point5 = new THREE.Vector3();
6160

@@ -148,13 +147,13 @@
148147

149148
// controllers
150149

151-
controller1 = new THREE.ViveController( 0 );
150+
controller1 = new THREE.PaintViveController( 0 );
152151
controller1.standingMatrix = controls.getStandingMatrix();
153152
controller1.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
154153
controller1.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
155154
scene.add( controller1 );
156155

157-
controller2 = new THREE.ViveController( 1 );
156+
controller2 = new THREE.PaintViveController( 1 );
158157
controller2.standingMatrix = controls.getStandingMatrix();
159158
controller2.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
160159
controller2.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
@@ -182,10 +181,9 @@
182181
pivot.rotation.x = Math.PI / 5.5;
183182
controller.add( pivot );
184183

185-
var range = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.03, 3 ), new THREE.MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
186-
pivot.add( range );
187-
188184
controller1.add( controller.clone() );
185+
186+
pivot.material = pivot.material.clone();
189187
controller2.add( controller.clone() );
190188

191189
} );
@@ -265,7 +263,9 @@
265263

266264
}
267265

268-
function stroke( point1, point2, matrix1, matrix2 ) {
266+
function stroke( controller, point1, point2, matrix1, matrix2 ) {
267+
268+
var color = controller.getColor();
269269

270270
var shape = shapes[ 'tube' ];
271271

@@ -373,14 +373,16 @@
373373

374374
}
375375

376-
function handleController( controller, id ) {
376+
function handleController( controller ) {
377377

378378
controller.update();
379379

380380
var pivot = controller.getObjectByName( 'pivot' );
381381

382382
if ( pivot ) {
383383

384+
pivot.material.color.copy( controller.getColor() );
385+
384386
var matrix = pivot.matrixWorld;
385387

386388
var point1 = controller.userData.points[ 0 ];
@@ -392,15 +394,9 @@
392394
point1.setFromMatrixPosition( matrix );
393395
matrix1.lookAt( point2, point1, up );
394396

395-
if ( controller.getButtonState( 'thumbpad' ) ) {
396-
397-
color.setHex( Math.random() * 0xffffff );
398-
399-
}
400-
401397
if ( controller.getButtonState( 'trigger' ) ) {
402398

403-
stroke( point1, point2, matrix1, matrix2 );
399+
stroke( controller, point1, point2, matrix1, matrix2 );
404400

405401
}
406402

@@ -415,8 +411,8 @@
415411

416412
controls.update();
417413

418-
handleController( controller1, 0 );
419-
handleController( controller2, 1 );
414+
handleController( controller1 );
415+
handleController( controller2 );
420416

421417
effect.render( scene, camera );
422418

0 commit comments

Comments
 (0)