THREE.OrbitControls参数设置_风如白话的博客

相关文章推荐
慷慨的排球 · multipartfile转buffered ...· 3 月前 ·
豪情万千的土豆 · enum和std::string的自动互相转 ...· 1 年前 ·
酷酷的熊猫 · apache ...· 1 年前 ·
善良的鞭炮 · [源码分析]iOS ...· 1 年前 ·
销魂的杯子 · Excel) (Borders 对象 | ...· 1 年前 ·
1、控制视角(仰视角、俯视角、水平方向视角)
2、控制鼠标缩放大小
3、控制旋转速度
…
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.mouseButtons = {
    LEFT: THREE.MOUSE.ROTATE,
    MIDDLE: THREE.MOUSE.DOLLY,
    RIGHT: THREE.MOUSE.PAN
// Set to false to disable this control
//鼠标控制是否可用
this.controls.enabled = true;
// "target" sets the location of focus, where the object orbits around
//聚焦坐标
this.controls.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
//最大最小相机移动距离(景深相机)
this.controls.minDistance = 0;
this.controls.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
//最大最小鼠标缩放大小（正交相机）
this.controls.minZoom = 0;
this.controls.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
//最大仰视角和俯视角
this.controls.minPolarAngle = 0; // radians
this.controls.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
//水平方向视角限制
this.controls.minAzimuthAngle = - Infinity; // radians
this.controls.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
//惯性滑动，滑动大小默认0.25
this.controls.enableDamping = false;
this.controls.dampingFactor = 0.25;
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
// Set to false to disable zooming
//滚轮是否可控制zoom，zoom速度默认1
this.controls.enableZoom = true;
this.controls.zoomSpeed = 1.0;
// Set to false to disable rotating
//是否可旋转，旋转速度
this.controls.enableRotate = true;
this.controls.rotateSpeed = 1.0;
// Set to false to disable panning
//是否可平移，默认移动速度为7px
this.controls.enablePan = true;
this.controls.keyPanSpeed = 7.0;	// pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
//是否自动旋转，自动旋转速度。默认每秒30圈
this.controls.autoRotate = false;
this.controls.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
//是否能使用键盘
this.controls.enableKeys = true;
// The four arrow keys
//默认键盘控制上下左右的键
this.controls.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
//鼠标点击按钮
this.controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
	this.enabled = true;
// "target" sets the location of focus, where the object orbits around//聚焦坐标
	this.target = new THREE.Vector3();
//...
特点：远近高低比例都相同
相机的位置：将相机的中心点定义为相机的位置。
构造函数：OrthographicCamera（left,right,top,bottom,near,far）
left：左平面距离相机中心点的垂直距离。
right：右平面距离相机中心点的垂直距离。
top：顶平面.
				因为OrbitControls控制器控制的是相机移动，移动后旋转的也是相机，观察物体时移动后旋转会跑到其他位置，做了一点小修改使之变为物体自身旋转。
THREE.OrbitControls = function (object, domElement) {
    this.object = object;
    var model = null;
    this.model = model...
domElement： 可选的，指定在特定的元素(例如画布 renderer.domElement)上工作
autoRotate: Boolean 默认false。设定为true时，相机自动围绕目标旋转但必须在animation中循环调用update()；
autoRotateSpeed: Float 当前者为true时
这个目标默认为THREE.Vector3()，也就是(0, 0, 0)世界坐标的原点。 
可以通过THREE.OrbotControls的实例对象来修改.target = new THREE.Vector3(...) 
设置控件...
	this.enabled = true;
// "target" sets the location of focus, where the object orbits around
//聚焦坐标
	this.target = new THR...
				OrbitControls是用于threejs的轨道控制插件，试了下在threejs里建立坐标系，使用Phong光照模型材质，开启雾化效果。做了个简单的demo.代码如下。&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;简
                    success_online: 
                    你这个判断有问题，举个例子：
如果页面中有一个div高度是20px，并且margin-top和margin-bottom:分别设置为1000px，那么这个时候页面应该出现了竖向滚动条，但是用document.body.scrollHeight这个计算的话得到的值是20px，不会是2020px，第二个问题就是。如果页面中有横向滚动条，那么window.innerHeight就会大于clientHeight,
正确判断应该是：document.documentElement.scrollHeigh > document.documentElement.clientHeight
                vue项目封装腾讯TcPlayer播放器
                    weixin_36958747: 
                vue项目封装腾讯TcPlayer播放器
                    我爱软件狗: 
                    好用好用谢谢大佬！！
                apicloud 打开外部地图APP
                    风如白话: 
                    以前测试是可以的