three.js学习笔记相机控件

Three.js 提供了几个camera(相机)的控件，你可以通过使用控件来控制相机的移动。当然你也可以通过调用camera(相机)的position属性来控制。

camera(相机)控件包括：轨迹球控件TrackballControls(最常用的控件,用鼠标控制相机移动和转动)

飞行控件FlyControls(飞行模拟器控件,用键盘和鼠标控制相机移动和旋转)

翻滚控件RollControls(翻滚控件是飞行控件的简化版,控制相机绕Z轴旋转)

第一人称控件FirstPersonControls(类似于第一人称视角的相机控件)

轨道空间OrbitControls(类似于轨道中的卫星,控制鼠标和键盘在场景中游走)

路径控件PathControls(控制相机在预定义的轨道上移动和旋转)

使用camera(相机)控件

1.实例化一个Control对象,以TrackballControls为例(TrackballControls,FlyControls,RollControls,FirstPersonControls,OrbitControls)

var controls = new THREE.TrackballControls(camera);

2.新建一个Three.js对象：THREE.Clock 调用getDelta函数返回两次调用之间经过的时间

var clock = new THREE.Clock();
function render(){
   var delta = clock.getDelta();
   controls .update(delta);
   requestAnimationFrame(render);
   renderer.render(scene, camera);
}

TrackballControls控制方式：

three.js学习笔记相机控件

具体control属性见API

完整代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>three.js</title>
</head>

<body>
<script type="text/javascript" src="js/Three/three.js"></script>
<script type="text/javascript" src="js/Three/controls/TrackballControls.js"></script>
<script>
var renderer, scene, camera, light, mesh, cylinder, plane;
var spotLight, sphereLightMesh;
var controls;
var invert = 1;
var phase = 0;

function init() {

renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.lookAt(new THREE.Vector3(20, 0, 20));
camera.position.set(-50, 20, -50);

light = new THREE.AmbientLight(0xDDDDDD);
scene.add(light);

spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10, 60, 20);
spotLight.castShadow = true;
scene.add(spotLight);

controls = new THREE.TrackballControls(camera);

document.body.appendChild(renderer.domElement);
creatCube();
render();
}

function creatCube() {
var geometry = new THREE.CubeGeometry(4, 4, 4);
var material = new THREE.MeshLambertMaterial({
color: 0xff0000
});
mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.position.set(10, 10, 0);
mesh.rotation.set(Math.PI / 4, 0, 0);
scene.add(mesh);

var geometry = new THREE.CylinderGeometry(2, 2, 8);
var material = new THREE.MeshLambertMaterial({
color: 0xff0000
});
cylinder = new THREE.Mesh(geometry, material);
cylinder.position.set(-5, 10, 10);
cylinder.rotation.set(Math.PI / 4, 0, 0);
cylinder.castShadow = true;
scene.add(cylinder);

var plane_geometry = new THREE.CubeGeometry(40, 1, 40);
var plane_material = new THREE.MeshLambertMaterial({
color: 0xffffff
});
plane = new THREE.Mesh(plane_geometry, plane_material);
plane.receiveShadow = true;
plane.position.set(10, 2, 10);
scene.add(plane);
}

function motionLight(light) {
if (phase > 2 * Math.PI) {
invert = invert * -1;
phase -= 2 * Math.PI;
} else {
phase += 0.03;
}
light.position.z = +(7 * (Math.sin(phase)));
light.position.x = +(14 * (Math.cos(phase)));
if (invert < 0) {
var pivot = 14;
light.position.x = (invert * (light.position.x - pivot)) + pivot;
}
}

var clock = new THREE.Clock();

function render() {

var delta = clock.getDelta();
controls.update(delta);

requestAnimationFrame(render);
renderer.render(scene, camera);
motionLight(spotLight);
}
init();
</script>
</body>

</html>

fork me on github blog: https://chenjy1225.github.io/

秒客网

three.js学习笔记相机控件

相关文章

three.js学习笔记 相机控件

相关文章

three.js学习笔记相机控件