2022-06-15 来源：华纳网 责任编辑：谷雨 人气：
核心提示：知识点： OrbitControls进行鼠标控制

知识点：

OrbitControls进行鼠标控制
 


 

本课内容：

大家好，欢迎来到谷雨课堂，

 

在以前的课程中，

我们使用Three.js创建了一个会自己旋转的立方体，

这个立方体，

我们无法与他进行互动，

 

他们我们如何用鼠标来控制这个立方体呢，

我们本节就来实现这个功能

 

首先，

我们引入一个JS文件

  •  
<script type="text/javascript" src="js/controls/OrbitControls.js"></script>

 

然后，

创建一个轨道控制器

  •  
  •  
  •  
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);        orbitControls.target = new THREE.Vector3(0, 0, 0);//控制焦点        orbitControls.autoRotate = false;//将自动旋转关闭

 

最后，

在render中进行设置

  •  
orbitControls.update();

 

我们就可以实现视频中的效果了，

 

以下是全部的源代码

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Three.js demo</title><style>body{font-family: Monospace;background: #f0f0f0;margin: 0px;overflow: hidden;        }</style></head><body><script type="text/javascript" src="../build/three.js"></script><script type="text/javascript" src="js/controls/OrbitControls.js"></script><script type="text/javascript">
var container;var camera, scene, renderer;//用于轨道控制器var orbitControls, clock, delta;
var planeMesh;
    main();    render();
//主函数function main(){//添加一个div元素        container = document.createElement('div')document.body.appendChild(container);        scene = new THREE.Scene();//创建一个新场景
//添加一个透视相机        camera = new THREE.PerspectiveCamera(30,window.innerWidth/window.innerHeight, 1, 1000);
        camera.position.set(100, 300, 100);//设置相机位置        camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点
//渲染//antialias:true增加抗锯齿效果        renderer = new THREE.WebGLRenderer({antialias:true});        renderer.setClearColor(new THREE.Color(0x000000));//设置窗口背景颜色为黑        renderer.setSize(window.innerWidth, window.innerHeight);//设置窗口尺寸//将renderer关联到container，这个过程类似于获取canvas元素        container.appendChild(renderer.domElement);
//添加轨道控制器//新建一个轨道控制器        orbitControls = new THREE.OrbitControls(camera, renderer.domElement);        orbitControls.target = new THREE.Vector3(0, 0, 0);//控制焦点        orbitControls.autoRotate = false;//将自动旋转关闭        clock = new THREE.Clock();//用于更新轨道控制器
//给场景添加光源//自然光var ambientLight = new THREE.AmbientLight( 0xff0000 );        scene.add( ambientLight );
//平行光源var directionalLight = new THREE.DirectionalLight( 0x0000ff );        directionalLight.position.set( 1, 0.75, 0.5 ).normalize();        scene.add( directionalLight );
        cube();    }



//创建立方体function cube(){
//创建立方体var geo = new THREE.BoxGeometry(15, 15 ,40 );
//创建材料var mat = new THREE.MeshLambertMaterial({color:0x0000FF,wireframe:false        });
//创建网格模型        mesh = new THREE.Mesh(geo, mat);
//设置坐标        mesh.position.set(0, 20, -40);
//向场景        scene.add(mesh);    }
//渲染function render(){        delta = clock.getDelta();        orbitControls.update(delta);        requestAnimationFrame(render);    mesh.rotation.x += 0.005 * Math.PI;    mesh.rotation.z += 0.005 * Math.PI;        renderer.render(scene, camera);    }</script>
</body></html>

 

操控 效果
按住鼠标左键并移动 摄像机围绕场景中心旋转
转动鼠标滑轮或按住中键并移动 放大和缩小
按住鼠标右键并移动 在场景中平移
上、下、左、右方向键 在场景中平移

 

完整的源代码可以登录【华纳网】下载。

 

https://www.worldwarner.com/






 





免责声明：本文仅代表作者个人观点，与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
精彩推荐