官方列举的属性
.autoRotate : Boolean
将其设为true,以自动围绕目标旋转。
请注意,如果它被启用,你必须在你的动画循环里调用.update()。
.autoRotateSpeed : Float
当 .autoRotate : Boolean为true时,围绕目标旋转的速度将有多快,默认值为2.0,相当于在60fps时每旋转一次需要30秒。
请注意,如果 .autoRotate : Boolean被启用,你必须在你的动画循环里调用.update()。
.dampingFactor : Float
当 .enableDamping : Boolean设置为true的时候,阻尼惯性有多大。
请注意,要使得这一值生效,你必须在你的动画循环里调用.update()。
.domElement : HTMLDOMElement
用于监听鼠标事件或触摸事件的HTMLDOMElement(DOM元素)。该值必须在构造函数中进行传入; 在此更改它将不会设置新的事件监听器
.enabled : Boolean
控制器是否被启用。
.enableDamping : Boolean
将其设置为true以启用阻尼(惯性),这将给控制器带来重量感。默认值为false。
请注意,如果该值被启用,你将必须在你的动画循环里调用.update()。
.enableKeys : Boolean
启用或禁用键盘控制。
.enablePan : Boolean
启用或禁用摄像机平移,默认为true。
.enableRotate : Boolean
启用或禁用摄像机水平或垂直旋转。默认值为true。
请注意,可以通过将polar angle或者azimuth angle 的min和max设置为相同的值来禁用单个轴, 这将使得水平旋转或垂直旋转固定为所设置的值。
.enableZoom : Boolean
启用或禁用摄像机的缩放。
.keyPanSpeed : Float
当使用键盘按键的时候,相机平移的速度有多快。默认值为每次按下按键时平移7像素。
.keys : Object
这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头(方向)键。
controls.keys = {
LEFT: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40 // down arrow
}请参阅this page来查看所有按键的代码列表。
.maxAzimuthAngle : Float
你能够水平旋转的角度的上限,范围是-Math.PI到Math.PI(或Infinity无限制), 其默认值为Infinity。
.maxDistance : Float
你能够将相机向外移动多少(仅适用于PerspectiveCamera),其默认值为Infinity。
.maxPolarAngle : Float
你能够垂直旋转的角度的上限,范围是0到Math.PI,其默认值为Math.PI。
.maxZoom : Float
你能够将相机缩小多少( 仅适用于OrthographicCamera only ),其默认值为Infinity。
.minAzimuthAngle : Float
你能够水平旋转的角度的下限,范围是-Math.PI到Math.PI(或-Infinity无限制), 其默认值为-Infinity。
.minDistance : Float
你能够将相机向内移动多少(仅适用于PerspectiveCamera),其默认值为0。
.minPolarAngle : Float
你能够垂直旋转的角度的下限,范围是0到Math.PI,其默认值为0。
.minZoom : Float
你能够将相机放大多少( 仅适用于OrthographicCamera ),其默认值为0。
.mouseButtons : Object
这一对象包含了对用于控制的鼠标按钮的引用。
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.PAN
}
.object : Camera
正被控制的摄像机。
.panSpeed : Float
位移的速度,其默认值为1。
.position0 : Vector3
由 .saveState : saveState和 .reset : reset方法在内部使用。
.rotateSpeed : Float
旋转的速度,其默认值为1.
.screenSpacePanning : Boolean
定义当平移的时候摄像机的位置将如何移动。如果为true,摄像机将在屏幕空间内平移。 否则,摄像机将在与摄像机向上方向垂直的平面中平移。其默认值为false。
.target0 : Vector3
由 .saveState : saveState和 .reset : reset方法在内部使用。
.target : Vector3
控制器的焦点,.object的轨道围绕它运行。 它可以在任何时候被手动更新,以更改控制器的焦点。
.touches : Object
This object contains references to the touch actions used by the controls.
controls.touches = {
ONE: THREE.TOUCH.ROTATE,
TWO: THREE.TOUCH.DOLLY_PAN
}
.zoom0 : Float
由 .saveState : saveState和 .reset : reset方法在内部使用。
.zoomSpeed : Float
摄像机缩放的速度,其默认值为1。 Speed of zooming / dollying. Default is 1.
实验源码
<template>
<div class="main-view">
<div id="demo2" style="width: 100%;height: 100%"></div>
<el-button class="refresh-btn" @click="refreshView()">刷新视图</el-button>
</div>
</template>
<script>
import * as THREE from 'three'
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
export default {
data() {
return {
camera: null,
scene: null,
renderer: null,
controls: null
}
},
mounted() {
this.LOG.info(['THREE.REVISION -- ', THREE.REVISION]);
this.init();
this.animate();
},
methods: {
init() {
this.scene = new THREE.Scene();
const container = document.getElementById('demo2');
const width = container.clientWidth;
const height = container.clientHeight;
this.camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);
this.camera.position.z = 250;
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setSize(width, height);
container.appendChild(this.renderer.domElement);
//加载一个模型
const loader = new OBJLoader();
let material = new THREE.MeshBasicMaterial({color: 'gray', side: THREE.DoubleSide});
loader.load('./objs/demo2/male02.obj', obj => {
this.LOG.info(['objs/demo2/male02.obj', obj]);
obj.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
this.scene.add(obj);
this.render();
this.initControls();
}, xhr => {
this.LOG.warn(['obj -- ', xhr.loaded / xhr.total * 100, ' %']);
}, error => {
this.LOG.error(['obj error-- ', error]);
})
},
initControls() {
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
// 如果使用animate方法时,将此函数删除
//this.controls.addEventListener( 'change', this.renderer );
// 使动画循环使用时阻尼或自转 意思是否有惯性
this.controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
this.controls.enableZoom = true;
//是否自动旋转
this.controls.autoRotate = true;
//设置相机距离原点的最远距离
this.controls.minDistance = 200;
//设置相机距离原点的最远距离
this.controls.maxDistance = 600;
//是否开启右键拖拽
this.controls.enablePan = true;
},
refreshView() {
const container = document.getElementById('demo2');
const width = container.clientWidth;
const height = container.clientHeight;
// this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height)
},
animate() {
this.controls.update();
this.render();
requestAnimationFrame(this.animate);
},
render() {
this.renderer.render(this.scene, this.camera)
},
}
}
</script>
<style scoped>
.refresh-btn {
position: absolute;
top: 15px;
right: 15px;
}
</style>
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}