一、FirstPersonControls

第一人称控制器，类似fps射击类游戏视角。

控制方法：

操控	效果
移动鼠标	向四周看
上、下、左、右方向键	向前、后、左、右移动视角
W	向前移动
A	向左移动
D	向右移动
S	向后移动
R	向上移动
F	向下移动

使用：

 import {FirstPersonControls} from '../../libs/contorls/FirstPersonControls'let controls = new FirstPersonControls(camera);controls.lookSpeed = 0.2; //鼠标移动查看的速度controls.movementSpeed = 30; //相机移动速度controls.noFly = true;controls.constrainVertical = true; //约束垂直controls.verticalMin = 1.0;controls.verticalMax = 2.0;controls.lon = 0; //进入初始视角x轴的角度controls.lat = 0; //初始视角进入后y轴的角度

示例

import '../../stylus/index.styl'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import {FirstPersonControls} from '../../libs/contorls/FirstPersonControls'
import {initTrackballControls, initThree, initStats} from "../../util/util"function init() {let stats = initStats();let {camera, scene, renderer} = initThree();camera.far = 5000;camera.position.set(0, 110, 0);let light = new THREE.SpotLight(0xffffff);light.shadow.mapSize.set(2048, 2048);light.castShadow = true;light.position.set(-700, 440, 730);scene.add(light);let ambientLight = new THREE.AmbientLight(0xdddddd, 0.4);scene.add(ambientLight);let planeGeometry = new THREE.PlaneBufferGeometry(14000, 10000);let planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});let plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.rotation.x = -0.5 * Math.PI;plane.receiveShadow = true;scene.add(plane);let getBoxes = () => {for (let i = 0; i < 300; i++) {let boxGeometry = new THREE.BoxBufferGeometry(20, Math.round(Math.random()*100 + 50), 20);let boxMaterial = new THREE.MeshLambertMaterial({color: new THREE.Color(Math.random(), Math.random(), Math.random()),transparent: true,opacity: 0.7});let box = new THREE.Mesh(boxGeometry, boxMaterial);box.position.set(Math.random()*-1390 + 690, box.geometry.parameters.height/2, Math.random()*-990 + 490);scene.add(box);}};getBoxes();let controls = new FirstPersonControls(camera, document.body);controls.lookSpeed = 0.2; //鼠标移动查看的速度controls.movementSpeed = 30; //相机移动速度controls.noFly = true;controls.constrainVertical = true; //约束垂直controls.verticalMin = 1.0;controls.verticalMax = 2.0;controls.lon = 0; //进入初始视角x轴的角度controls.lat = 0; //初始视角进入后y轴的角度let clock = new THREE.Clock();let render = () => {stats.update();controls.update(clock.getDelta());renderer.render(scene, camera);requestAnimationFrame(render);};window.addEventListener('resize', onWindowResize, false);function onWindowResize () {camera.aspect = window.innerWidth / window.innerHeight;renderer.setSize(window.innerWidth, window.innerHeight);camera.updateProjectionMatrix();stats.update();}render();
}init();

完整示例(src/pages/three_FirstPersonContorls_demo):https://github.com/MAXLZ1/threejs_demo

二、FlyControls

飞行控制器

操作方法：

操控	效果
按住鼠标左键和中键	向前移动
按住鼠标右键	向后移动
移动鼠标	向周围看
W	向前移动
A	向左移动
S	向后移动
D	向右移动
R	向上移动
F	向下移动
Q	向左翻滚
E	向右翻滚
上、下、左、右键	向上、下、左、右看

示例

import '../../stylus/index.styl'
import * as THREE from 'three'
import { initThree, initStats} from "../../util/util"
import {OBJLoader} from "../../libs/loaders/OBJLoader"
import {FlyControls} from "../../libs/contorls/FlyControls"function init (){let stats = initStats();let {scene, camera, renderer} = initThree();camera.position.set(-100, 10, 90);let spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-300, 300, 130);scene.add(spotLight);let loader = new OBJLoader();loader.load('../../static/modules/city/city.obj', (obj) => {setRandomColors(obj);scene.add(obj);});let controls = new FlyControls(camera, renderer.domElement);controls.rollSpeed = Math.PI / 12; // 翻滚速度controls.autoForward = true; //自动向前移动controls.dragToLook = false;controls.movementSpeed = 25;let clock = new THREE.Clock();let render = () => {stats.update();controls.update(clock.getDelta());renderer.render(scene,camera);requestAnimationFrame(render);};render();
}function setRandomColors(object) {let children = object.children;if (children && children.length > 0) {children.forEach(function (e) {setRandomColors(e)});} else {if (object.type === 'Mesh') {if (object.material instanceof Array) {object.material.forEach(function(m) {m.color = new THREE.Color(Math.random(),Math.random(),Math.random());if (m.name.indexOf("building") == 0) {m.emissive = new THREE.Color(0x444444);m.transparent = true;m.opacity = 0.8;}});} else {object.material.color = new THREE.Color(Math.random(),Math.random(),Math.random());if (object.material.name.indexOf("building") == 0) {object.material.emissive = new THREE.Color(0x444444);object.material.transparent = true;object.material.opacity = 0.8;}}}}
}init();

完整示例(src/pages/three_FlyControls_demo):https://github.com/MAXLZ1/threejs_demo

三、TrackballControls

轨迹球控制器

操作方法：

操控	效果
按住鼠标左键，拖动	摄像机在场景中旋转和翻滚
转动鼠标滚轮	放大和缩小

示例

import '../../stylus/index.styl'
import * as THREE from 'three'
import {initThree, initStats} from "../../util/util"
import {TrackballControls} from "../../libs/contorls/TrackballControls"function init () {let stats = initStats();let {camera, renderer, scene} = initThree();camera.position.set(400,400,400);let ambientLight = new THREE.AmbientLight(0xffffff);scene.add(ambientLight);let addObjs = () => {for (let i = 0; i < 300; i++) {let boxGeometry = new THREE.BoxBufferGeometry(Math.random()*10+10, Math.random()*10 + 5,Math.random()*10 + 2);let boxMaterial = new THREE.MeshLambertMaterial({color: new THREE.Color(Math.random(), Math.random(), Math.random())});let box = new THREE.Mesh(boxGeometry, boxMaterial);box.position.set(Math.random()*300 - 150, Math.random()*300 - 150, Math.random()*300 - 150);box.castShadow = true;scene.add(box);}};addObjs();let controls = new TrackballControls(camera, renderer.domElement);// 旋转速度controls.rotateSpeed = 2.0;// 变焦速度controls.zoomSpeed = 2.2;// 平移速度controls.panSpeed = 1.8;// 是否不缩放controls.noZoom = false;// 是否不平移controls.noPan = false;// 是否开启移动惯性controls.staticMoving = true;// 动态阻尼系数 就是灵敏度controls.dynamicDampingFactor = 0.3;// 设置最大距离controls.maxDistance = 600;let render = () => {stats.update();controls.update();renderer.render(scene, camera);requestAnimationFrame(render);};render();
}init();

完整示例(src/pages/three_TrackBallControls_demo):https://github.com/MAXLZ1/threejs_demo

四、OrbitControls

轨道控制器

操作方法：

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

示例

 let controls = new OrbitControls(camera, renderer.domElement);// 设置最大距离controls.maxDistance = 600;// 设置自动旋转controls.autoRotate = true;// 设置自动旋转速度controls.autoRotateSpeed = 2.0;

完整示例(src/pages/three_OrbitControls_demo):https://github.com/MAXLZ1/threejs_demo

【Three.js】十二、three.js摄像机控件相关推荐

[翻译]Scott Mitchell 的ASP.NET 2.0数据教程之十二：在GridView控件中使用TemplateField
在ASP.NET 2.0中操作数据:在GridView控件中使用TemplateField 英文原版 | 本教程的代码(C#) | 翻译目录 | 原文目录导言 GridView ...
Scott Mitchell 的ASP.NET 2.0数据教程之十二：在GridView控件中使用TemplateField
导言 GridView是由一组字段(Field)组成的,它们都指定的了来自DataSource中的什么属性需要用到自己的输出呈现中.最简单的字段类型是BoundField,它仅将数据简单的显示为文本. ...
ASP.NET 2.0数据教程之十二：在GridView控件中使用TemplateField(转)
导言 The GridView is composed of a set of fields that indicate what properties from the datasource are ...
APICloud（十二）：日期控件
日期控件原链接:http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=26845&extra=&page ...
html页面美化代码时间,CSS+JS美化过漂亮的日历控件
CSS+JS美化过漂亮的日历控件 - www.webdm.cn var months = new Array("一", "二", "三",& ...
15 ArcGIS JS API 4.17更改测量控件黄白相间的默认样式
问题描述在使用ArcGIS API for JavaScript 4.17开发项目时,有一个需求是需要在地图上添加距离测量和面积测量的控件,这其实很简单,直接调用ArcGIS JS API自带的测量 ...
SAP UI5 应用开发教程之五十六 - SAP UI5 树控件(tree)的开发试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
C#进行MapX二次开发之控件基本操作
上篇介绍了MapX的部分基本使用代码,包括放大.缩小.缩放到初始大小(全图).平移.矩形选择.圆形选择.箭头.打开图层对话框 .打开ActiveX属性对话框 .添加符号等基本操作代码,本篇继续探讨一些 ...
c# AE GIS二次开发学习专题（二）基本地图控件使用
GIS二次开发学习专题(二) 基本地图控件使用学习资料来自<牟乃夏 AE开发教程-基于C#.NET> 发的代码是我整理+老师布置的作业这一部分是地图基本控件的使用与编写,包括: 一.二 ...
在浏览器中进行深度学习：TensorFlow.js (十二）异常检测算法
2019独角兽企业重金招聘Python工程师标准>>> 异常检测是机器学习领域常见的应用场景,例如金融领域里的信用卡欺诈,企业安全领域里的非法入侵,IT运维里预测设备的维护时间点等. ...

【Three.js】十二、three.js摄像机控件

【Three.js】十二、three.js摄像机控件

一、FirstPersonControls

二、FlyControls

三、TrackballControls

四、OrbitControls

【Three.js】十二、three.js摄像机控件相关推荐

最新文章

热门文章