app网站欣赏,广州抖音推广公司,微信商城小程序怎么开发,网页设计与网站建设中的热点是什么#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️THREE.OrbitControls 相机控…⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言1.1 ☘️THREE.OrbitControls 相机控制器 二、使用OrbitControls相机控制器1. ☘️实现思路2. ☘️代码样例 一、前言
本文详细介绍如何基于threejs在三维场景中使用OrbitControls相机控制器亲测可用。希望能帮助到您。一起学习加油加油
1.1 ☘️THREE.OrbitControls 相机控制器
RollControls是Three.js库中的一个相机控制器是一个非常实用的控制器它允许用户通过鼠标或触摸设备以轨道方式围绕一个中心点旋转、缩放和平移场景中的相机视角。这个控制器通常用于3D场景中的导航使用户能够从不同的角度观察场景。
构造函数 OrbitControls( object : Camera, domElement : HTMLDOMElement ) object: 必须将要被控制的相机。该相机不允许是其他任何对象的子级除非该对象是场景自身。 domElement: 用于事件监听的HTML元素。
属性
.autoRotate : Boolean 将其设为true以自动围绕目标旋转。 请注意如果它被启用你必须在你的动画循环里调用.update()。
.autoRotateSpeed : Float 当.autoRotate为true时围绕目标旋转的速度将有多快默认值为2.0相当于在60fps时每旋转一周需要30秒。 请注意如果.autoRotate被启用你必须在你的动画循环里调用.update()。
.dampingFactor : Float 当.enableDamping设置为true的时候阻尼惯性有多大。 默认值为 0.05。
请注意要使得这一值生效你必须在你的动画循环里调用.update()。
.domElement : HTMLDOMElement 该 HTMLDOMElement 用于监听鼠标/触摸事件该属性必须在构造函数中传入。在此处改变它将不会设置新的事件监听。
.enabled : Boolean 当设置为false时控制器将不会响应用户的操作。默认值为true。
.enableDamping : Boolean 将其设置为true以启用阻尼惯性这将给控制器带来重量感。默认值为false。 请注意如果该值被启用你将必须在你的动画循环里调用.update()。
.enablePan : Boolean 启用或禁用摄像机平移默认为true。
.enableRotate : Boolean 启用或禁用摄像机水平或垂直旋转。默认值为true。
请注意可以通过将polar angle或者azimuth angle 的min和max设置为相同的值来禁用单个轴 这将使得水平旋转或垂直旋转固定为所设置的值。
.enableZoom : Boolean 启用或禁用摄像机的缩放。
.keyPanSpeed : Float 当使用键盘按键的时候相机平移的速度有多快。默认值为每次按下按键时平移7像素。
.keys : Object 这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头方向键。
controls.keys {LEFT: ArrowLeft, //left arrowUP: ArrowUp, // up arrowRIGHT: ArrowRight, // right arrowBOTTOM: ArrowDown // down arrow
}.maxAzimuthAngle : Float 你能够水平旋转的角度上限。如果设置其有效值范围为[-2 * Math.PI2 * Math.PI]且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。
.maxDistance : Float 你能够将相机向外移动多少仅适用于PerspectiveCamera其默认值为Infinity。
.maxPolarAngle : Float 你能够垂直旋转的角度的上限范围是0到Math.PI其默认值为Math.PI。
.maxZoom : Float 你能够将相机缩小多少仅适用于OrthographicCamera其默认值为Infinity。
.minAzimuthAngle : Float 你能够水平旋转的角度下限。如果设置其有效值范围为[-2 * Math.PI2 * Math.PI]且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。
.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和.reset方法在内部使用。
.rotateSpeed : Float 旋转的速度其默认值为1。
.screenSpacePanning : Boolean 定义当平移的时候摄像机的位置将如何移动。如果为true摄像机将在屏幕空间内平移。 否则摄像机将在与摄像机向上方向垂直的平面中平移。当使用 OrbitControls 时 默认值为true当使用 MapControls 时默认值为false。
.target0 : Vector3 由.saveState和.reset方法在内部使用。
.target : Vector3 控制器的焦点.object的轨道围绕它运行。 它可以在任何时候被手动更新以更改控制器的焦点。
.touches : Object 该对象包含由控件所使用的触摸操作的引用。
controls.touches {ONE: THREE.TOUCH.ROTATE,TWO: THREE.TOUCH.DOLLY_PAN
}.zoom0 : Float 由.saveState和.reset方法在内部使用。
.zoomSpeed : Float 摄像机缩放的速度其默认值为1。
方法
.dispose () : undefined 移除所有的事件监听。
.getAzimuthalAngle () : radians 获得当前的水平旋转单位为弧度。
.getPolarAngle () : radians 获得当前的垂直旋转单位为弧度。
.getDistance () : Float 返回从相机到目标的距离。
.listenToKeyEvents ( domElement : HTMLDOMElement ) : undefined 为指定的DOM元素添加按键监听。推荐将window作为指定的DOM元素。
.reset () : undefined 将控制器重置为上次调用.saveState时的状态或者初始状态。
.saveState () : undefined 保存当前控制器的状态。这一状态可在之后由.reset所恢复。
.update () : Boolean 更新控制器。必须在摄像机的变换发生任何手动改变后调用 或如果.autoRotate或.enableDamping被设置时在update循环里调用。
事件 change 当相机已被控件转换时触发。
start 当交互开始时触发。
end 当交互完成时触发。
二、使用OrbitControls相机控制器
1. ☘️实现思路
1、初始化renderer渲染器2、初始化Scene三维场景scene3、初始化camera相机定义相机位置 camera.position.set设置相机方向camera.lookAt。4、创建THREE.AmbientLight环境光源ambiLightscene场景添加ambiLight。创建THREE.DirectionalLight平行光源directLight设置平行光源的位置和光强场景scene中添加directLight。5、加载几何模型创建THREE.SphereGeometry球体几何体geom使用普通纹理贴图planetTexture和法向量纹理贴图normalTexture创建THREE.MeshPhongMaterial高光材质planetMaterial通过THREE.SceneUtils.createMultiMaterialObject传入geom和planetMaterial创建球体网格对象sphere场景scene加入sphere。具体代码参考代码样例。6、加入THREE.OrbitControls相机控制器orbitControls设置orbitControls相关参数。加入stats监控器监控帧数信息。
2. ☘️代码样例
!DOCTYPE htmlhtmlheadtitle使用OrbitControls相机控制器/titlescript typetext/javascript src../libs/three.js/scriptscript typetext/javascript src../libs/stats.js/scriptscript typetext/javascript src../libs/dat.gui.js/scriptscript typetext/javascript src../libs/OrbitControls.js/scriptstylebody {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}/style
/head
bodydiv idStats-output
/div
!-- Div which will hold the Output --
div idWebGL-output
/div!-- Javascript 代码 --
script typetext/javascript// 初始化function init() {var stats initStats();// 创建三维场景var scene new THREE.Scene();// 创建相机var camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器设置颜色、大小和投影var webGLRenderer new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled true;var sphere createMesh(new THREE.SphereGeometry(20, 40, 40));// 添加球体scene.add(sphere);// 设置相机位置和方向camera.position.x -20;camera.position.y 30;camera.position.z 40;camera.lookAt(new THREE.Vector3(00, 0, 0));var orbitControls new THREE.OrbitControls(camera);orbitControls.autoRotate true;var clock new THREE.Clock();var ambiLight new THREE.AmbientLight(0x111111);scene.add(ambiLight);var directLight new THREE.DirectionalLight(0xffffff);directLight.position.set(-20, 30, 40);directLight.intensity 1.5;scene.add(directLight);// 渲染器绑定html要素document.getElementById(WebGL-output).appendChild(webGLRenderer.domElement);var step 0;render();function createMesh(geom) {var planetTexture THREE.ImageUtils.loadTexture(../assets/textures/planets/mars_1k_color.jpg);var normalTexture THREE.ImageUtils.loadTexture(../assets/textures/planets/mars_1k_normal.jpg);var planetMaterial new THREE.MeshPhongMaterial({map: planetTexture, bumpMap: normalTexture});var wireFrameMat new THREE.MeshBasicMaterial();wireFrameMat.wireframe true;var mesh THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);return mesh;}function render() {stats.update();var delta clock.getDelta();orbitControls.update(delta);requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats new Stats();stats.setMode(0); // 0: fps, 1: msstats.domElement.style.position absolute;stats.domElement.style.left 0px;stats.domElement.style.top 0px;document.getElementById(Stats-output).appendChild(stats.domElement);return stats;}}window.onload init;
/script
/body
/html效果如下
