vue使用three.js 第一人称移动。与cs控制角色移动一样（第一人称旋转相机+控制相机移动）

1注意：我是看官方案例写的，但是我是在vue上面写的，所以如果你不是用vue来做，有些东西需要自己改动。比如有些地方必须让this改为that，不然报错。个人建议如果有，会被其他方法修改的全部都改成 let that=this。

2实现第一人称代码，主要看initMobile（）//移动+initControls（）//旋转相机+render（）的代码。

<template><div><div id="container"></div></div>
</template><script>import * as Three from '../../node_modules/three/build/three.module.js';//import * as Three from 'three'import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';export default {name: 'ThreeTest',data() {return {camera: null,scene: null,renderer: null,mesh: null,controls:"",intersections:null,objects : [],clock:"",moveForward:false,moveLeft:false,moveBackward:false,moveRightInit:false,direction : new Three.Vector3(),velocity : new Three.Vector3(),prevTime : performance.now()}},methods: {init: function() {this.initScene()//场景对象this.initCamera()//相机this.initWebGLRenderer()//渲染器this.initAxisHelper()//辅助坐标this.render()this.createControls()//控件对象this.Box()this.initControls()//相机视角this.initPlane()//地板this.initMobile()//移动},//鼠标控制移动相机视角*****initControls(){let that=thisthat.controls = new PointerLockControls( this.camera, document.body );var container = document.getElementById( 'container' );container.addEventListener( 'click', function () {that.controls.lock();});this.scene.add(that.controls.getObject() );},//移动initMobile(){let that=thisconsole.log(this.controls)var onKeyDown = function ( event ) {switch ( event.keyCode ) {case 38: // upcase 87: // wthat.moveForward = true;break;case 37: // leftcase 65: // athat.moveLeft = true;break;case 40: // downcase 83: // sthat.moveBackward = true;break;case 39: // rightcase 68: // dthat.moveRightInit = true;break;}};var onKeyUp = function ( event ) {switch ( event.keyCode ) {case 38: // upcase 87: // wthat.moveForward = false;break;case 37: // leftcase 65: // athat.moveLeft = false;break;case 40: // downcase 83: // sthat.moveBackward = false;break;case 39: // rightcase 68: // dthat.moveRightInit = false;break;}};document.addEventListener( 'keydown', onKeyDown, false );document.addEventListener( 'keyup', onKeyUp, false );},创建场景对象SceneinitScene(){this.scene = new Three.Scene();},相机initCamera(){let container = document.getElementById('container');this.camera = new Three.PerspectiveCamera(60, container.clientWidth/container.clientHeight, 1, 1000);this.camera.position.set(292, 109, 268);//设置相机位置this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)},Box(){//正方形let geometry = new Three.BoxGeometry(50, 50, 50);let material = new Three.MeshNormalMaterial();this.mesh = new Three.Mesh(geometry, material);this.scene.add(this.mesh);},//地板initPlane(){var planeGeometry = new Three.PlaneGeometry(600, 600);//平面使用颜色为0xcccccc的基本材质var planeMaterial = new Three.MeshBasicMaterial({color: 0xcccccc});var plane = new Three.Mesh(planeGeometry, planeMaterial);//设置屏幕的位置和旋转角度plane.rotation.x = -0.5 * Math.PI;plane.position.x = 0;plane.position.y = 0;plane.position.z = 0;//将平面添加场景中this.scene.add(plane);},//创建渲染器对象initWebGLRenderer(){this.renderer = new Three.WebGLRenderer({antialias: true});this.renderer.setSize(container.clientWidth, container.clientHeight);//设置渲染区域尺寸this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色container.appendChild(this.renderer.domElement);//body元素中插入canvas对象},//辅助三维坐标系AxisHelperinitAxisHelper(){this.axisHelper = new Three.AxisHelper(250);this.scene.add(this.axisHelper);},render:function(){let that=this//this.mesh.rotation.x+=0.01requestAnimationFrame(that.render); //请求再次执行渲染函数renderthat.renderer.render(that.scene,that.camera);//执行渲染操作//从这开始下面**就是控制移动的代码let time = performance.now();let delta = ( time - that.prevTime ) / 1000;that.velocity.x -= that.velocity.x * 10.0 * delta;that.velocity.z -= that.velocity.z * 10.0 * delta;that.direction.z = Number( that.moveForward ) - Number( that.moveBackward );that.direction.x = Number( that.moveRightInit ) - Number( that.moveLeft );that.velocity.z -= that.direction.z * 400.0 * delta;that.velocity.x -= that.direction.x * 400.0 * delta;//下面两个&&是判断是否有moveRight。如果有就执行。不然没加载完毕，就循环执行会报错that.controls && that.controls.moveRight(- that.velocity.x * delta)that.controls && that.controls.moveForward(- that.velocity.z * delta)that.prevTime = time;},// 创建控件对象createControls () {this.controls = new OrbitControls(this.camera,this.renderer.domElement)}},mounted() {this.init();this.render();}}
</script>
<style scoped>#container {height: 400px;}
</style>

vue使用three.js 第一人称移动。与cs控制角色移动一样（第一人称旋转相机+控制相机移动）相关推荐

使用three.js实现跟随模型的第一人称、第三人称相机控制
最近在我原有的"室内场景demo"的基础上做了一个跟随模型的第三人称相机控制,以键盘wasd控制模型的行走,以鼠标控制模型的朝向. 在线预览地址 CSDN下载地址ht ...
vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
vue使用pdf.js实现移动端在线PDF文件预览
背景产品需求涉及到动态的PDF展示,PDF是由后端去生成的,然后下发给前端在线的cdn地址,H5需要实现在线PDF预览的能力方案 H5展示合同PDF,有很多实现方式.但是通过尝试后发现在不同操作系 ...
vue开发饿了吗外卖app①——最新的vue没有dev-server.js,如何进行后台数据模拟?
最新的vue里dev-server.js被替换成了webpack-dev-conf.js,在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改第一步,在const portfi ...
VUE使用three.js模型缩放卡顿问题
VUE使用three.js模型缩放卡顿问题最近将之前开发的three.js程序集成到vue项目中,发现模型的旋转可缩放变得比较卡顿,网上搜集资料发现是将scene与controls放在vue dat ...
vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
工作194:vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: ‘/system‘. This may cause an
错误如下拿到公司一个小哥哥的代码,一来就报了一堆bug,吓得我先写一篇博客vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detecte ...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...

vue使用three.js 第一人称移动。与cs控制角色移动一样（第一人称旋转相机+控制相机移动）

1注意：我是看官方案例写的，但是我是在vue上面写的，所以如果你不是用vue来做，有些东西需要自己改动。比如有些地方必须让this改为that，不然报错。个人建议如果有，会被其他方法修改的全部都改成 let that=this。

2实现第一人称代码，主要看initMobile（）//移动+initControls（）//旋转相机+render（）的代码。

vue使用three.js 第一人称移动。与cs控制角色移动一样（第一人称旋转相机+控制相机移动）相关推荐

最新文章

热门文章