Controls are ways to control a viewpoint in respond to user interaction. In <three-canvas>, you can use three controls: three-orbit-controls, three-fly-controls and three-firstperson-controls.
There are two ways to use controls. To use a three-controls element directly, it should be located in a three-camera element.
<three-canvas width="200" height="200" antialias="true" clear-color="#000000" default-light="true">
<three-camera position="0,0,8" look-at="0,0,0">
<three-controls type="orbit" center="0,0,0"></three-controls>
</three-camera>
<three-sphere radius="1" color="#ffffff" map="../images/earth.jpg"></three-sphere>
</three-canvas>
Adding a controls attribute to a three-camera element is another way to use controls.
<three-canvas width="200" height="200" antialias="true" clear-color="#000000" default-light="true">
<three-camera position="0,0,8" look-at="0,0,0" controls="orbit"></three-camera>
<three-sphere radius="1" color="#ffffff" map="../images/earth.jpg"></three-sphere>
</three-canvas>