效果圖
three插件實作3D拖拽，旋轉 代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>GIS-符合變換</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<!--引入可視化平移變換控件OrbitControls.js-->
<script src="js/TransformControls.js"></script>
<!--引入拖拽控件OrbitControls.js-->
<script src="js/DragControls.js"></script>
<script>
var scene=new THREE.Scene();//建立場景
/*
* -fov 可視角度
- aspect 實際視窗的縱橫比
- near 近處的裁面的距離
- far 遠處的裁面的距離
*/
var camera=new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 500);//建立透視錄影機
camera.position.z = 10;//相機的高度
camera.position.y = 10;
camera.position.x = 10;
camera.lookAt(scene.position);
var renderer=new THREE.WebGLRenderer({
});//建立渲染器
renderer.setSize(window.innerWidth,window.innerHeight);//設定寬高
document.body.appendChild(renderer.domElement);//在body上渲染
/*建立立方體
* width — X軸方向上的長.
height — Y軸方向上的高.
depth — Z軸方向上的寬.
widthSegments — 可選項，x軸方向的切割面，預設是1.
heightSegments — 可選項，y軸上的切割面，預設是1.
depthSegments — 可選項，z軸上的切割面，預設是1.
* */
var box=new THREE.BoxGeometry(3,3,3);
/*
*MeshBasicMaterial是一種非常簡單的材質，這種材質不考慮場景中光照的影響。
*使用這種材質的網格會被渲染成簡單的平面多邊形，而且也可以顯示幾何體的線框。
*
*
* */
var material=new THREE.MeshBasicMaterial({
color: 0xff0000,
flatShading: THREE.SmoothShading
});
var cube = new THREE.Mesh(box, material );
//cube.translateX(1);//沿着x軸正方向平移距離100
scene.add( cube );//建立的立方體添加到場景中
//border = new THREE.BoxHelper( cube,0x0dc3b4 );//設定邊框，這個邊框不會旋轉
//scene.add( border );
//edges = new THREE.EdgesHelper( cube, 0x1535f7 );//設定邊框，可以旋轉
//scene.add( edges );
/*附加修飾項*/
/* 建立網格
*/
var axis=new THREE.AxesHelper(50);//即建立出的坐标軸的相對長度
scene.add(axis);
/*
* 添加可視化變換控件
* 添加拖拽控件
* */
var transformControl = new THREE.TransformControls( camera,renderer.domElement );
scene.add( transformControl );
var dragcontrols = new THREE.DragControls(scene.children,camera,renderer.domElement );
//拖拽控件對象設定滑鼠事件
dragcontrols.addEventListener( 'hoveron', function ( event ) {
//控件對象transformControl與選中的對象object綁定
transformControl.attach( event.object );
} );
transformControl.setMode('translate');
transformControl.setMode('rotate');
/*建立地面*/
var Ground= new THREE.BoxGeometry(20, 0.1, 20);
var Ground_material = new THREE.MeshPhongMaterial({
color: 0xa0adaf,
flatShading: THREE.SmoothShading
});
var ground = new THREE.Mesh(Ground, Ground_material);
ground.scale.multiplyScalar(3);
ground.castShadow = false;
ground.receiveShadow = true;
scene.add(ground);
/*設定光*/
var ambient = new THREE.AmbientLight(0x404040);// 環境光，基礎光源，它的顔色會被加載到整個場景和所有對象的目前顔色上
scene.add(ambient);
var directional_light = new THREE.DirectionalLight(0xffffff);//設定燈光顔色
directional_light.position.set(13, 20, 15);//設定燈的位置
directional_light.name = 'Directiona lLight';
scene.add(directional_light);
/*add controls*/
/*
OrbitControls(object: Camera,domElement: HTMLDOMElement)
object: 控制的相機
domElement： 預設是整個文檔上。可選的，指定在特定的元素(例如畫布)上工作
* */
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', renderer);
controls.enablePan=true;
controls.keyPanSpeed=1.0;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );//調用渲染器
}
animate();
</script>
</body>
</html>
![vue3-巧用指令[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)