效果图
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=)