49 |
ObjectControls
50 |
Object Controls are a lightweight attempt to make manipulating objects in three.js slightly easier. I'm open to suggestions, and would love to hear if / how you use it, so please hit me up on Twitter if you have any questions / concerns / comments / general hatred.
51 |
*View Project on Github
52 |
Controlling objects in three.js is already very easy, and you can see some great examples of how to do it yourself by looking at some three.js examples:
53 |
57 |
But if you want to not have to implement it yourself, these controls are a great place to start! To see what can be done with them, Check out some of the following projects:
58 |
59 | - cabbibo - For intersection with all objects
60 | - Growing Boy - For figuring out mouse position in 3D
61 | - Needs - For selecting balls / songs
62 | - DRAGONFISH - For determining where creature moves
63 |
64 |
There is also bunch more examples you can check out if you are more of a 'stare at the code' human being:
65 |
66 | - Drag - A basic Drag and Drop example
67 | - Highlight - The Most Basic example of highlighting different balls
68 | - HighlightGroup - Highlight groups of balls
69 | - Displace - Balls move away from your mouse when hit
70 | - Noises - make noises when you hit the objects
71 |
72 |
But lets talk about how to actually use the code!
73 |
Setup:
74 |
First off include the script:
75 |
<script src="PATH/TO/ObjectControls.js"></script>
76 |
77 |
Do all the thing that you would normally do with threejs, like setting up the renderer, scene and camera. Once you have done all this you can initialize the controls:
78 |
objectControls = new ObjectControls( camera );
79 |
80 |
The 'camera' is passed into the ObjectControls , as the 'Eye' of the raycast. You could pass in a different 'eye' if you want, but it probably won't make too much sense...
81 |
Within your 'animate' loop, make sure that you update the objectcontrols, like so:
82 |
objectControls.update();
83 |
84 |
This is all you have to do to set up the Object Controls. But so far they don't do anything, so lets see how we can change that!
85 |
How to use:
86 |
The object controls are used by adding meshes to them. All of the logic of what happens when the meshes are interacted with is added to the mesh, so it controls itself! Here's a basic example of how to add meshes to the object controls:
87 |
var mat = new THREE.MeshNormalMaterial();
88 | var geo = new THREE.IcosahedronGeometry( 10 , 1 );
89 | var mesh = new THREE.Mesh( geo , mat );
90 |
91 |
92 |
93 |
94 | mesh.hoverOver = function(){
95 |
96 | }
97 |
98 |
99 |
100 | mesh.hoverOut = function(){
101 |
102 | }
103 |
104 |
105 |
106 | mesh.select = function(){
107 |
108 | }
109 |
110 |
111 |
112 |
113 | mesh.deselect = function(){
114 |
115 | }
116 |
117 |
118 |
119 |
120 |
121 | mesh.update = function(){
122 |
123 | }
124 |
125 |
In addition to controling a mesh as shown above, you can also control an Object3D with child meshes. Then events are triggered on the Object3D whenever any of its child meshes are intersected. To enable, set recursive:true in the params passed to the ObjectControls constructor, as shown in the HighlightGroup example.
126 |
As usual, although the code is stable, this is still a work in progress, so if you see any problems, please please please let me know! Also, if there is something you want to see implemented, have any other suggestions, or use the code for anything I'd love to see how you used it, so hit me up on Twitter
127 |