1.demo效果

如上图，该demo通过飞行控件FlyControls控制相机。实现视图的上下左右前后移动，左右翻滚，跟随鼠标移动等效果

2.FlyControls介绍

通过飞行控件FlyControls 可以实现场景的前后左右移动，左右翻滚，跟随鼠标四周移动

FlyControls操控说明
以下是操控和动作的比对说明

操控	动作
按住左键	向前移动
按住右键	向后移动
移动鼠标	往四周看
方向键	向对应方向移动
R	向上移动
F	向下移动
A	向左移动
D	向右移动
W	向前移动
S	向后移动
Q	向左翻滚
E	向右翻滚

3. 实现要点

3.1 vue中引入FlyControls控制器

在项目工程中引入FlyControls控制器如下

import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js'

3.2 创建飞行控件实例

// 创建飞行控件
createTrackballControls() {this.clock = new THREE.Clock()this.flyControls = new FlyControls(this.camera, this.renderer.domElement)this.flyControls.movementSpeed = 25 //移动速度this.flyControls.domElement = this.renderer.domElement //配置dom元素this.flyControls.rollSpeed = Math.PI / 24 //翻滚角速度this.flyControls.autoForward = false //自动向前关闭this.flyControls.dragToLook = false //拖动视图变换关闭
}

3.3 render中更新飞行控件

render() {const delta = this.clock.getDelta() //获取自上次调用的时间差this.flyControls.update(delta) //更新飞行控件this.renderer.render(this.scene, this.camera)requestAnimationFrame(this.render)
},

4. demo代码

<template><div><div id="container" /></div>
</template><script>
import * as THREE from 'three'
import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'export default {data() {return {publicPath: process.env.BASE_URL,mesh: null,camera: null,scene: null,renderer: null,flyControls: null,clock: null}},mounted() {this.init()},methods: {// 初始化init() {this.createScene() // 创建场景this.loadObj() // 加载OBJ模型this.createLight() // 创建光源this.createCamera() // 创建相机this.createRender() // 创建渲染器this.createFlyControls() // 创建飞行控件this.render() // 渲染},// 创建场景createScene() {this.scene = new THREE.Scene()},loadObj() {const objLoader = new OBJLoader()const THIS = thisobjLoader.load(`${THIS.publicPath}models/city.obj`, loadedMesh => {THIS.mesh = loadedMeshloadedMesh.scale.set(0.2, 0.2, 0.2)THIS.setRandomColors(loadedMesh, THIS)THIS.scene.add(THIS.mesh)})},setRandomColors(object, THIS) {const children = object.childrenif (children && children.length > 0) {children.forEach(function(e) {THIS.setRandomColors(e, THIS)})} else {if (object instanceof THREE.Mesh) {const colorIndex = Math.floor(Math.random() * 3) // 0~2的随机数const colorArray = [new THREE.Color(0xff0000),new THREE.Color(0x00ff00),new THREE.Color(0x0000ff)]object.material.emissive = colorArray[colorIndex]object.material.color = colorArray[colorIndex]object.material.transparent = trueobject.material.opacity = 0.3}}},// 创建光源createLight() {// 环境光const ambientLight = new THREE.AmbientLight(0x383838) // 创建环境光this.scene.add(ambientLight) // 将环境光添加到场景const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯spotLight.position.set(200, 200, 200)spotLight.castShadow = truethis.scene.add(spotLight)},// 创建相机createCamera() {const element = document.getElementById('container')const width = element.clientWidth // 窗口宽度const height = element.clientHeight // 窗口高度const k = width / height // 窗口宽高比// PerspectiveCamera( fov, aspect, near, far )this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)this.camera.position.set(-80, 60, 40) // 设置相机位置this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向this.scene.add(this.camera)},// 创建渲染器createRender() {const element = document.getElementById('container')this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸this.renderer.shadowMap.enabled = true // 显示阴影this.renderer.shadowMap.type = THREE.PCFSoftShadowMapthis.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色element.appendChild(this.renderer.domElement)},render() {const delta = this.clock.getDelta() //获取自上次调用的时间差this.flyControls.update(delta) //更新飞行控件this.renderer.render(this.scene, this.camera)requestAnimationFrame(this.render)},// 创建飞行控件createFlyControls() {this.clock = new THREE.Clock()this.flyControls = new FlyControls(this.camera, this.renderer.domElement)this.flyControls.movementSpeed = 25 //移动速度this.flyControls.domElement = this.renderer.domElement //配置dom元素this.flyControls.rollSpeed = Math.PI / 24 //翻滚角速度this.flyControls.autoForward = false //自动向前关闭this.flyControls.dragToLook = false //拖动视图变换关闭}}
}
</script>
<style>
#container {position: absolute;width: 100%;height: 100%;
}
</style>

three.js使用飞行控件FlyControls控制相机(vue中使用three.js63)相关推荐

three.js使用轨迹球控件TrackballControls控制相机(vue中使用three.js62)
使用TrackballControls控制相机 1.demo效果 2.TrackballControls介绍 2.1 TrackballControls操控说明 2.2 TrackballContro ...
30 Three.js的相机飞行控件FlyControls
简介 FlyControls是相机的控件,飞行模拟器控件,用键盘和鼠标控制相机移动和旋转.这个控件使用可以把相机想象成是无人机的摄像头. 案例查看地址:http://www.wjceo.com/blo ...
JS判断页面控件是否可用
JS判断页面控件是否可用[原创] 2009-12-08 16:27 如果你看到这篇文章,甚至目前正愁于该问题的困扰,希望你把这篇文章看完.至少下次不会在这个问题上浪费时间. 近期做的项目中涉及到页面控 ...
035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
四种常见的浏览器内核简介----JS城市选择控件
一四种常见的浏览器内核简介 Gecko: Gecko: Netscape6开始采用的内核,后来的Mozilla FireFox (火狐浏览器) 也采用了该内核,Gecko的特点是代码完全公开,因此, ...
html 控件坐标定位,利用JS改变html控件位置
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 利用JS改变html控件位置我想写一个贪吃蛇小游戏,所以需要完成蛇的自动移动效果,这就需要改变html控件位置.本来我 ...
ocx js php,JS实现OCX控件的事件响应示例_javascript技巧
JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自身肯定是可以实现的,JS提供的这种 ...
JS给html控件赋值
<html> <head><title> JS给html控件赋值 </title><script language="javascrip ...
用户控件如何控制ASPX页面的控件
问题来自论坛http://topic.csdn.net/u/20120415/17/3f264265-b25c-4db8-a192-520e8a60e4c1.html?85396 问题分析,aspx页 ...

three.js使用飞行控件FlyControls控制相机(vue中使用three.js63)

使用飞行控件FlyControls控制相机

1.demo效果

2.FlyControls介绍

3. 实现要点

3.1 vue中引入FlyControls控制器

3.2 创建飞行控件实例

3.3 render中更新飞行控件

4. demo代码

three.js使用飞行控件FlyControls控制相机(vue中使用three.js63)相关推荐

最新文章

热门文章