上传视频麻烦,所以直接上代码。自己看官网案例写的

<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:null,intersections:null,objects : [],clock:"",}},methods: {init: function() {this.initScene()//场景对象this.initCamera()//相机this.initWebGLRenderer()//渲染器this.initAxisHelper()//辅助坐标this.render()this.createControls()//控件对象this.Box()this.initControls()},//鼠标控制移动相机视角*****下面initControls复制代码就可以实现控制相机initControls(){let controls = new PointerLockControls( this.camera, document.body );var container = document.getElementById( 'container' );container.addEventListener( 'click', function () {controls.lock();});this.scene.add(controls.getObject() );},创建场景对象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);},//地板plane(){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(){//this.mesh.rotation.x+=0.01requestAnimationFrame(this.render); //请求再次执行渲染函数renderthis.renderer.render(this.scene,this.camera);//执行渲染操作},// 创建控件对象createControls () {//this.controls = new OrbitControls(this.camera,this.renderer.domElement)}},mounted() {this.init();this.render();}}
</script>
<style scoped>#container {height: 400px;}
</style>

Three.js使用PointerLockControls控制相机实现第一人称视角相关推荐

  1. 【游戏开发实战】Unity手游第一人称视角,双摇杆控制,FPS射击游戏Demo(教程 | 含Demo工程源码)

    文章目录 一.前言 二.实现方案 1.无主之地,第一人称视角 2.我之前做的摇杆控制 3.第一人称视角 + 摇杆控制 三.开始实战 1.资源获取:Unity AssetStore 2.Low Poly ...

  2. three.js添加人物实现第一人称视角控制,类似于cf或绝地求生游戏控制人物

    three.js实现第一人称视角控制 思路 具体代码如下 最终效果 思路 查看官方例子,使用PointerLockControls可以实现该功能,官方参考地址. 然后可以将模型加载进来同步修改位置和观 ...

  3. Three.js漫游相机控制器/three.js第三人称视角漫游/three.js第一人称视角漫游

    Three.js三维可视化引擎没有实现第三人称漫游控制器,第一人称实现的也很一般,大部分满足不了需求,需要自己手动去写一个.以下是模仿其它平台写的第三人称视角漫游,也可以简便的改写成第一人称. 下面是 ...

  4. ThreeJS第一人称视角处理

    简介 第一人称控件指针锁定API允许您在游戏界面中锁定鼠标或其他指针设备,以便您不用绝对定位光标就可以获得坐标变化值,从而准确地判断用户正在做什么,并且还可以防止用户意外地进入另一块屏幕或别的什么地方 ...

  5. arduino 操纵杆_用Arduino做一台FPV(第一人称视角)遥控履带车

    这次和大家分享的这个项目结合了3D打印,Arduino和FPV(第一人称视角)相机的相关知识. 非常适合有兴趣制造自己的RC履带车,或者只是想使用3D打印,Arduino和FPV进行创造的伙伴们. 步 ...

  6. 【Unity】第一人称视角开发

    需求 我的需求是在Unity构建一个第一人称视角,实现移动跳跃功能. 主要参考的是这篇博文提供的方案,不过该方案为了只允许一次跳跃,单独在人物底部构建了一个空对象,我无需此限制,因此对其进行了简化. ...

  7. Cesium 视角跟随-第一人称视角漫游

    Cesium 视角跟随-第一人称视角漫游 实现思路 核心代码 完整代码 在线示例 2023年4月19日更新-搞了一个 Cesium 镜像,欢迎使用:沙盒示例 和 API 作为三维项目,以第一人称视角漫 ...

  8. 使用Open3d在点云中实现第一人称视角导航

    Open3D是一个开源库,支持快速开发处理3D数据的软件.Open3D前端在C++和Python中公开了一组精心挑选的数据结构和算法.后端经过高度优化,并设置为并行化. 本人最近在工作上需要实现一个需 ...

  9. 7999元大疆最新无人机,支持第一人称视角极速拍摄,直接起飞

    穿越山口.过火圈,体验2秒加速到100公里的急速飞行: 可以从第一视角体验拍摄效果,"就像是开启了第三只眼": 而且,只需要靠手部动作"单手操作",就能操控: ...

最新文章

  1. 关于文献检索的一些思考
  2. 速卖通店铺流量少的原因分析以及解决办法
  3. OpenGL立方体的纹理
  4. IOS开发中单例模式使用详解
  5. 计算机模拟考总结,高职单考单招计算机模拟一技术总结.doc
  6. url主机域名可以省略_从输入url到页面完成加载发生了什么
  7. c语言 拆分 文件,linux 将一个大文件分割成小的碎片文件 命令:csplit
  8. java 扫雷游戏_java的扫雷小游戏(超简单)
  9. oracle 12 跟踪,Oracle 12C 块修改跟踪(Block chage tracking) 功能
  10. activiti 启动tomcat乱码_Activiti 流程图片显示乱码问题分析与解决
  11. JAVA实现QQ登录、注册、修改密码等功能(美化版)
  12. 机器人焊钳选型_焊接机器人选型资料
  13. 游戏开发中的专业术语
  14. 菩萨到底能不能保佑我们
  15. expect spawn scp * shell路径名展开
  16. 求全排列(1) --- dfs 记录
  17. mysql错误01000_错误 ORA-01000: maximum open cursors exceeded Exception
  18. 千锋Flask学习笔记
  19. 《数据库系统原理及应用教程》(苗雪兰等,第五版) 实验五:数据库的组合查询和统计查询实验
  20. 汇编指令-MRS(读)和MSR(写)指令操作CPSR寄存器和SPSR寄存器使用(1)

热门文章

  1. 关于url路径的定义方式
  2. (转) Lua: 给 Redis 用户的入门指导
  3. 「Ruby Sqlite3」How to install sqlite3 for ruby? (solve: sqlite-ruby no such file...)
  4. DataTable类(MSDN)
  5. .NET Framework是什么
  6. 阿里云数据库RDS MySQL 物理全备文件数据恢复至自建数据库Mysql 5.7中
  7. nginx请求如何映射url
  8. Zabbix监控Nginx连接状态
  9. 几款主流的 Python IDE
  10. Ubuntu执行脚本报错-bash: ./send.py: /usr/bin/python: bad interpreter: Permission denied