学习交流欢迎加群: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>