教育培训网站设计,加盟培训机构,研发流程,自豪的采用wordpress#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️第一视角控制器FirstPerson…⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言1.1 ☘️第一视角控制器FirstPersonControls控制相机 二、利用THREE.FirstPersonControls实现第一视角控制1. ☘️实现思路2. ☘️代码样例 一、前言
本文详细介绍如何基于threejs在三维场景中使用第一视角控制器FirstPersonControls控制相机实现游戏第一人称效果亲测可用。希望能帮助到您。一起学习加油加油
1.1 ☘️第一视角控制器FirstPersonControls控制相机
THREE.FirstPersonControls 是 Three.js 的第一视角控制器允许用户以第一人称视角进行三维场景的浏览、漫游。使用这个控制器时用户可以通过鼠标或键盘来控制视角。 相关操控方法 移动鼠标 向四周看 上、下、左、右方向键 向上、下、左、右移动 W 向前移动 A 向左移动 S 向后移动 D 向右移动 R 向上移动 F 向下移动 Q 停止移动 创建方法 new THREE.FirstPersonControls(camera) 参数camera 为Threejs的相机对象 属性
方法 handleResize () : undefined 若应用程序窗口大小发生改变则应当调用此函数。 lookAt ( vector : Vector3 ) : FirstPersonControls vector - 一个表示目标位置的向量。 或者世界空间位置的x、y、z分量。 确保控制器将相机方向朝向到所传入的目标的位置。 lookAt ( x : Float, y : Float, z : Float ) : FirstPersonControls vector - 一个表示目标位置的向量。 或者世界空间位置的x、y、z分量。 确保控制器将相机方向朝向到所传入的目标的位置。
二、利用THREE.FirstPersonControls实现第一视角控制
1. ☘️实现思路
1、初始化renderer渲染器2、初始化Scene三维场景3、初始化camera相机定义相机位置 camera.position.set设置相机方向camera.lookAt。4、初始化THREE.AmbientLight环境光源scene场景加入环境光源初始化THREE.PointLight点光源设置点光源位置设置点光源投影scene添加点光源。5、加载几何模型创建THREE.AxesHelper坐标辅助工具创建THREE.MTLLoader加载器调用load方法获取模型材质信息在MTLLoader的load方法中创建THREE.OBJLoader obj模型加载器OBJLoader 加载器设置材质为从MTLLoader获取的材质调用OBJLoader的load方法加载模型 生成mesh物体scene场景加入mesh和THREE.AxesHelper坐标辅助工具。6、创建第一视角控制器FirstPersonControls设置控制器相关参数。加入stats监控器监控帧数信息。
2. ☘️代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelearn44(使用第一视角控制器FIRSTPERSONCONTROLS控制相机)/titlescript srclib/threejs/127/three.js-master/build/three.js/scriptscript srclib/js/Detector.js/scriptscript srclib/js/chroma.js/scriptscript srclib/threejs/127/three.js-master/examples/js/loaders/OBJLoader.js/scriptscript srclib/threejs/127/three.js-master/examples/js/loaders/MTLLoader.js/scriptscript srclib/threejs/127/three.js-master/examples/js/controls/FirstPersonControls.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/stats.min.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js/script
/head
stylehtml, body {margin: 0;height: 100%;}canvas {display: block;}
/style
body onloaddraw()
/body
scriptvar renderervar initRender () {renderer new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.sortObjects falsedocument.body.appendChild(renderer.domElement)}var cameravar initCamera () {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000)camera.position.set(0, 10, 50)camera.lookAt(new THREE.Vector3(0, 0, 0))}var scenevar initScene () {scene new THREE.Scene()}var lightvar initLight () {scene.add(new THREE.AmbientLight)light new THREE.PointLight(0xffffff)light.position.set(0, 50, 0)light.castShadow truescene.add(light)}var initModel () {var helper new THREE.AxesHelper(50)scene.add(helper)var mtlLoader new THREE.MTLLoader()mtlLoader.setPath(data/model/city/)mtlLoader.load(city.mtl, material {var objLoader new THREE.OBJLoader()objLoader.setMaterials(material)objLoader.setPath(data/model/city/)objLoader.load(city.obj, object {var scale chroma.scale([yellow, 008ae5])setRandomColors(object, scale)scene.add(object)})})}var setRandomColors (object, scale) {//获取children数组var children object.children//如果当前模型有子元素则遍历子元素if (children children.length 0) {children.forEach(function (e) {setRandomColors(e, scale)})}else {if (object instanceof THREE.Mesh) {//如果当前的模型是楼层则设置固定的颜色并且透明化if (Array.isArray(object.material)) {for (var i 0; i object.material.length; i) {var material object.material[i]var color scale(Math.random()).hex()if (material.name.indexOf(building) 0) {material.color new THREE.Color(color)material.transparent truematerial.opacity 0.7material.depthWrite false}}}// 如果不是场景组则给当前mesh添加纹理else {//随机当前模型的颜色object.material.color new THREE.Color(scale(Math.random()).hex())}}}}var statsvar initStats () {stats new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls () {controls new THREE.FirstPersonControls(camera)controls.lookSpeed 0.2 //鼠标移动查看的速度controls.movementSpeed 20 //相机移动速度controls.noFly truecontrols.constrainVertical true //约束垂直controls.verticalMin 1.0controls.verticalMax 2.0controls.lon -100 //进入初始视角x轴的角度controls.lat 0 //初始视角进入后y轴的角度}var render () {renderer.render(scene, camera)}var onWindowResize () {camera.aspect window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var clock new THREE.Clock()var animate () {render()stats.update()controls.update(clock.getDelta())requestAnimationFrame(animate)}var draw () {initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize onWindowResize}
/script
/html效果如下
