three.js ObjectControls.js

three.js-object-controls Control object rotation, scale。
控制物體的旋轉和縮放。
適合的場景是物體在座標原點，繞Y軸左右旋轉，繞X軸上下旋轉，所以相機必須在Z軸上。
比較類似orbitcontrols，但是功能更弱。合適演示地球。

使用方法

載入js檔案

<script src="three.min.js"></script>
<script src="ObjectControls.js"></script>

建立camera、renderer、mesh。

• camera
• renderer element
• the mesh to move

var controls = new THREE.ObjectControls(camera, renderer.domElement, myMesh);

github地址
演示地址

配置

可配置的選項

• 旋轉速度
• 縮放速度
• 縮放的級別
• 上下旋轉的角度

controls.setZoomlevel(0.5, 2); // 縮放級別
controls.setZoomSpeed(1); // 縮放速度
controls.setRotationSpeed(1); //旋轉速度
controls.setAngle(-0.5,0.5)// 上下旋轉角度 我還沒寫
 

我為什麼有這樣的需求？

我想做個地球，用plane做背景，還有其他的元素。我只轉動地球，這樣就要求其他的不能轉動。所以就控制地球了。
上面的程式碼基本可以完成我的工作，但是上下旋轉的時候背景就出了問題，於是我加了一行程式碼plane.lookAt(camera.position);讓背景始終朝向相機。

還有其他的問題，我沒有去測試，比如移動端、瀏覽器的相容性。先湊合用吧，有需要再更新。

GitHub上有這個外掛

在這個基礎上修改的，threeJS-object-controls。發現原作者的程式碼不能工作，和自己期望的也不太一樣，就簡單的修改了一下。