OrbitControls.js的属性与方法
本帖最后由 tzbm123456 于 2022-4-4 10:07 编辑OrbitControls.js的属性与方法2022年4月4日
本帖最后由 tzbm123456 于 2022-4-4 13:04 编辑
构造函数参数数说明
New THREE.OrbitControls(object: Camera,domElement: HTMLDOMElement)
object: 控制的相机
domElement: 可选的,指定在特定的元素(例如画布 renderer.domElement)上工作属性
autoRotate: Boolean 默认false。设定为true时,相机自动围绕目标旋转但必须在animation中循环调用update();
autoRotateSpeed: Float 当前者为true时默认2.0,代表每轮60fps用时30s,值越小转动越慢rotateSpeed: Float 旋转速度(ORBIT的旋转速度,鼠标左键),默认1
domElement: HTMLDOMElement 侦听鼠标/触摸事件,必须在构造函数中传递,用作特性值更改后不会重新设置事件侦听器 默认是整个文档
enableDamping: Boolean 默认false。设置为true则启用阻尼(惯性),用来给控制相机一个重量,必须调用update()在你的animation循环中
dampingFactor: Float 前者为true时使用阻尼惯性(可理解为阻止向一个方向移动)
enabled: Boolean 是否启用控件,默认true
enableKeys: Boolean 能否用键盘控制,默认true ←↑→↓四个键控制物体的移动
keys: Object 控制相机平移的四个键。默认四个箭头键{LEFT: 37,UP: 38,RIGHT: 39,DOWM:40} 所有的键值
enablePan: Boolean 相机平移,默认true
panSpeed: Float 移动的速度,默认1
keyPanSpeed: Float 相机平移的速度,默认每按一次控制方向键移动7.0像素
enableRotate: Boolean 水平垂直旋转相机,默认true。只想控制单轴,通过PolarAngle/AzimuthAngle的最小值和最大值设置为相同的值,这将导致垂直或水平旋转固定在该值
enableZoom: Boolean 相机的缩放
maxAzimuthAngle: Float 水平旋转,范围-Math.PI~Math.PI 或者Infinity 默认Infinity
minAzimuthAngle: Float 水平旋转,范围-Math.PI~Math.PI 或者-Infinity 默认-Infinity
maxPolarAngle: Float 垂直旋转,范围0~Math.PI 默认Math.PI
minPolarAngle: Float 垂直旋转,范围0~Math.PI 默认0
maxDistance: Float 拉远镜头(只能用在PerspectiveCamera),默认Infinity
minDistance: Float 拉近镜头,默认0
maxZoom: Float 拉远镜头(只能用在OthorgraphicCamera),默认Infinity
minZoom: Float拉近镜头,默认0
mouseButton: Object {ORBIT: THREE.MOUSE.LEFT,ZOOM: THREE.MOUSE.MIDDLE,PAN: THREE.MOUSE.RIGHT} 鼠标控制缩放移动和旋转
object: Camera 正在控制的相机
position0: Vector3 在reset()和saveState()内部使用
screenSpacePaning: Boolean 平移时摄像机位置的转换。true,相机的平移在屏幕空间;false,摄像机在与摄像机向上方向正交的平面上平移,默认false
target: Vector3在reset()和saveState()内部使用
zoom0: Vector3 在reset()和saveState()内部使用
zoomSpeed: Float zoom(变焦)的速度,默认1
本帖最后由 tzbm123456 于 2022-4-6 23:38 编辑
THREE.js程序的主要内容一、总体框架1、初始化场景scene2、初始化相机camera3、初始化渲染器renderer14、初始化控制器controller二、场景内容1、灯光2、实体三、场景渲染1、render()//关联场景和相机renderer.render(scene, camera);四、界面控制(即相机控制)1、controller.addEventListenerstart、change、end2、renderer1.domElement.addEventListenerTHREE.js 基础模板:E:\A1_IT\WebGL\three.js-master\Sample\ThreejsBaseTemplate.html
本帖最后由 tzbm123456 于 2022-4-6 23:27 编辑
var width,height;
//一、总体框架
//1、初始化场景
var scene;
function initScene(){
scene=new THREE.Scene();
}
本帖最后由 tzbm123456 于 2022-4-6 23:25 编辑
//2、初始化相机
var camera1;
function initCamera1(){
width=document.getElementById('Window1').clientWidth;
height=document.getElementById('Window1').clientHeight;
//创建相机camera1
camera1=new THREE.PerspectiveCamera(45,width/height,1,10000);
camera1.position.x=0;
camera1.position.y=300;
camera1.position.z=900;
camera1.up.x=1;
camera1.up.y=0;
camera1.up.z=0;
console.log(camera1.up);
}
var camera2;
function initCamera2(){
width=document.getElementById('Window2').clientWidth;
height=document.getElementById('Window2').clientHeight;
camera2=new THREE.PerspectiveCamera(45,width/height,1,10000);
camera2.position.x=0;
camera2.position.y=0;
camera2.position.z=900;
//console.log(camera2.up);
}
//3、初始化渲染器
var renderer1,renderer2;
function initRenderer1(){
width=document.getElementById('Window1').clientWidth;
height=document.getElementById('Window1').clientHeight;
//width=window.innerWidth;
//height=window.innerHeight,
//renderer=new THREE.WebGLRenderer({antialias:true});
renderer1 = new THREE.CanvasRenderer();
renderer1.setSize(width,height);
//document.body.appendChild(renderer.domElement);
document.getElementById('Window1').appendChild(renderer1.domElement);
renderer1.setClearColor(0xAAAAAA,1.0);
}
function initRenderer2(){
width=document.getElementById('Window2').clientWidth;
height=document.getElementById('Window2').clientHeight;
//width=window.innerWidth;
//height=window.innerHeight,
//renderer=new THREE.WebGLRenderer({antialias:true});
renderer2 = new THREE.CanvasRenderer();
renderer2.setSize(width,height);
//document.body.appendChild(renderer.domElement);
document.getElementById('Window2').appendChild(renderer2.domElement);
renderer2.setClearColor(0xAAAAAA,1.0);
}
//4、初始化控制器
var controls1;
function initcontrols1(){
//创建相机控制器controls1
controls1 = new THREE.OrbitControls(camera1,renderer1.domElement);//创建控件对象
controls1.target=new THREE.Vector3(0,300,0);
//更新相机内容
controls1.update()
}
var controls2;
function initcontrols2(){
//创建相机控制器controls1
controls2 = new THREE.OrbitControls(camera2,renderer2.domElement);//创建控件对象
}
//二、场景内容
//1、灯光
var light;
function initLight(){
light=new THREE.DirectionalLight(0xFF0000,1.0,0);
light.position.set(100,100,200);
scene.add(light);
}
//2、实体
function initObject(){
//添加坐标实体axesHelper
var axesHelper = new THREE.AxesHelper( 100 );
scene.add( axesHelper );
//添加线实体
var material=new THREE.LineBasicMaterial({
vertexColors:true,
color:new THREE.Color(0xff0000),
linewidth:5
});
var color1=new THREE.Color(0x444444),color2=new THREE.Color(0xFF0000);
var pt1=new THREE.Vector3(-100,-100,0);
var pt2=new THREE.Vector3(100,100,0);
var geometry=new THREE.Geometry();
geometry.vertices.push(pt1);
geometry.vertices.push(pt2);
geometry.colors.push(color1,color2);
var line=new THREE.Line(geometry,material,THREE.LineSegments);
var matrixT=new THREE.Matrix4();
matrixT.makeTranslation(-50,50,50);
var matrixR=new THREE.Matrix4();
matrixR.makeRotationZ(Math.PI/4);
var matrixRT=new THREE.Matrix4();
matrixRT.multiplyMatrices(matrixT,matrixR);
line.applyMatrix(matrixRT)
//line.applyMatrix(matrixT)
//line.rotateZ(Math.PI/4);
scene.add(line);
}
//三、场景渲染
function render1() {
//renderer1.clear();
renderer1.render( scene, camera1 );
}
function render2() {
//renderer1.clear();
renderer2.render( scene, camera2 );
}
//四、相机控制
function controlCamera1(){
//通过controls1相机控制器监听鼠标左中右健事件
controls1.addEventListener('change', function () {
//renderer1.clear();
renderer1.render( scene, camera1 );
});
controls1.screenSpacePanning=true;
//通过DOM监听鼠标左健点击事件
renderer1.domElement.addEventListener('click', function(evt){
console.log("X:"+evt.clientX+"|"+"Y:"+evt.clientY);
var vt=new THREE.Vector3();
camera1.getWorldDirection(vt);
console.log("相机位置点:");
console.log(camera1.position);
console.log("相机目标点:");
console.log(controls1.target);
console.log(vt);
});
}
function controlCamera2(){
controls2.addEventListener('change', render2);//监听鼠标、键盘事件
controls2.screenSpacePanning=true;
/*
renderer2.domElement.addEventListener('click', function(evt){
console.log("X:"+evt.clientX+"|"+"Y:"+evt.clientY);
var vector = new THREE.Vector3(( evt.clientX / width ) * 2 - 1, -( evt.clientY / height ) * 2 + 1,0.5);
console.log(vector);
var vectorP = vector.unproject(camera2);
console.log(vectorP);
});
*/
}
页:
[1]
2