three.js轨道控制器OrbitControls.js

学习交流欢迎加群：789723098，博主会将一些demo整理共享

轨道控制器OrbitControls.js是一个相当神奇的控件，用它可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移，缩放，下面介绍轨道控制器的代码实现方式：

//添加轨道控制器
//新建一个轨道控制器
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.target = new THREE.Vector3(0, 0, 0);//控制焦点
orbitControls.autoRotate = false;//将自动旋转关闭
clock = new THREE.Clock();//用于更新轨道控制器

新建一个轨道控制器后，就要让它实时工作和更新，一般写在渲染和动画的函数里面：

elta = clock.getDelta();//获取时间差
orbitControls.update(delta);//更新时间

实际上轨道控制器还有很多属性可以设置，但在本例中没有应用到，详细的用法可参考官方文档：点击打开链接。

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

下面结合实际例子，实现一个场景的轨道控制。（这个例子的静态版本在我的另一篇文章：点击打开链接），加了轨道控制器后，其效果如下图所示：

下面是示例程序代码的呈现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>threejs-basic-geometry</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/Detector.js"></script>
<script type="text/javascript" src="js/controls/OrbitControls.js"></script>
<script type="text/javascript">//检测webgl的支持情况if(!Detector.webgl) {Detector.addGetWebGLMessage();}var container;var camera, scene, renderer;//用于轨道控制器var orbitControls, clock, delta;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( 0x606060 );scene.add( ambientLight );//平行光源var directionalLight = new THREE.DirectionalLight( 0xffffff );directionalLight.position.set( 1, 0.75, 0.5 ).normalize();scene.add( directionalLight );plane();cube();sphere();cylinder();}//创建一个平面function plane(){var planeGeo = new THREE.PlaneGeometry(100,100,10,10);//创建平面var planeMat = new THREE.MeshLambertMaterial({  //创建材料color:0x666666,wireframe:false});var planeMesh = new THREE.Mesh(planeGeo, planeMat);//创建网格模型planeMesh.position.set(0, 0, -20);//设置平面的坐标planeMesh.rotation.x = -0.5 * Math.PI;//将平面绕X轴逆时针旋转90度scene.add(planeMesh);//将平面添加到场景中}//创建一个立方体function cube(){var cubeGeo = new THREE.CubeGeometry(20, 20, 20, 5, 5, 5);//创建立方体var cubeMat = new THREE.MeshLambertMaterial({//创建材料color:0x003300,wireframe:false});var cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型cubeMesh.position.set(20, 10, 0);//设置立方体的坐标scene.add(cubeMesh);//将立方体添加到场景中}//创建一个球function sphere(){var sphereGeo = new THREE.SphereGeometry(16, 40, 40);//创建球体var sphereMat = new THREE.MeshLambertMaterial({//创建材料color:0x0000FF,wireframe:false});var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);//创建球体网格模型sphereMesh.position.set(-25, 16, 0);//设置球的坐标scene.add(sphereMesh);//将球体添加到场景}//创建圆柱体function cylinder(){//创建圆柱体var cylinderGeo = new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40);var cylinderMat = new THREE.MeshLambertMaterial({//创建材料color:0xFF6600,wireframe:false});//创建圆柱体网格模型var cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMat);cylinderMesh.position.set(0, 20, -40);//设置圆柱坐标scene.add(cylinderMesh);//向场景添加圆柱体}//渲染function render(){delta = clock.getDelta();orbitControls.update(delta);requestAnimationFrame(render);renderer.render(scene, camera);}</script></body>
</html>

three.js轨道控制器OrbitControls.js相关推荐

Three.js漫游相机控制器/three.js第三人称视角漫游/three.js第一人称视角漫游
Three.js三维可视化引擎没有实现第三人称漫游控制器,第一人称实现的也很一般,大部分满足不了需求,需要自己手动去写一个.以下是模仿其它平台写的第三人称视角漫游,也可以简便的改写成第一人称. 下面是 ...
three.js使用OrbitControls.js控制几何体旋转、平移、缩放
附带一个可用的OrbitControls.js http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js ...
Three.js搭配OrbitControls.js实现flyTo()
需求:较为简单,对3D场景进行OrbitControls自带的拖动缩放功能.在自写一个点击具体3D物体拉近相机的功能,也就是flyTo(). flyTo()是一个动画过程,(想要线上了解效果的可以参考 ...
Three.js实战--修改OrbitControls的按键
Three.js实战--修改OrbitControls的按键在Three场景中我们经常会用到OrbitControls的控制方式,但这种控制方式下,鼠标左键为旋转视角,鼠标中键为拉伸视角,鼠标右键为 ...
jscc控制器说明书_如何从JS调用控制器，以便控制器可以执行其请求映射？
我想要一个JavaScript文件调用JavaSpring MVC控制器,然后控制器将执行其请求映射函数.如何从JS调用控制器,以便控制器可以执行其请求映射? 我不确定是否也可以将一个变量传递给控制器 ...
相机跟随之轨道控制器
效果长按鼠标右键,旋转视角. 鼠标滚轮,缩放视角. 长按鼠标中键,平移视角. 如果你对这个模型感觉很熟悉,你肯定没看错,这是 threejs 中的 examples https://threejs. ...
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:引用养殖场模型进行展示,轨道控制器设置,模型沿着路线运动,使用OutlinePass给模型添加边框,自定义样式显示标签,点击模型 ...
[开源] Gio.js -- 一个基于 Three.js 的 Web3D 地球数据可视化库
在这里和大家分享一个和小伙伴们一起开发的开源库 Gio.js .Gio.js 是一个基于 Three.js 的 web 3D 地球数据可视化的开源组件库.使用 Gio.js 的网页应用开发者,可以快速 ...
Gio.js -- 一个基于 Three.js 的 Web3D 地球数据可视化库（一）
Gio.js 开始使用安装使用基础元素简介表面国家连接线背景光晕海洋性能监控配置通过构造函数配置通过API配置配置参数表功能设计型API 设置初始国家高亮被提及国家 ...

three.js轨道控制器OrbitControls.js

学习交流欢迎加群：789723098，博主会将一些demo整理共享

three.js轨道控制器OrbitControls.js相关推荐

最新文章

热门文章