three车辆自由转弯（vue 极品飞车）

//最近没有时间整理代码，就这样吧

<template>

<div>

<div id="map"></div>

</div>

</template>

<script>

// import * as Three from '../../node_modules/three/build/three.module.js';

import "maptalks/dist/maptalks.css";

import * as maptalks from "maptalks";

import * as Three from "three";

import { ThreeLayer } from "maptalks.three";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

import { PointerLockControls } from "three/examples/jsm/controls/PointerLockControls.js";

import { PCDLoader } from "three/examples/jsm/loaders/PCDLoader";

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export default {

name: "ThreeTest",

data() {

return {

map: null,

threeLayer: null,

mapConfig: {

center: [568318.74296, 4314626.47854],

zoom: 12.364821148501335,

pitch: 71.6000000000002,

bearing: -52.200000000000045,

},

camera: null,

scene: null,

renderer: null,

controls: "",

intersections: null,

objects: [],

clock: "",

moveForward: false,

moveLeft: false,

moveBackward: false,

moveRighta: false,

//----车辆参数----------

car: null, //汽车对象

speed: 0,

rSpeed: 0,

run: false,

acceleration: 0.005, //car 转弯半径大小，越小越转弯越陡

deceleration: 0.02, //car溜车长短，越小溜车越久

// maxSpeed: 2,

// lock: -1,

// isBrake: false,

realRotation: -1.6, // 车辆自身真实的旋转度

dirRotation: 0, // 方向上的旋转

addRotation: 0, // 累计的旋转角度

//--------------

direction: new Three.Vector3(),

velocity: new Three.Vector3(),

prevTime: performance.now(),

};

},

methods: {

init() {

var that = this;

this.map = new maptalks.Map("map", {

center: this.mapConfig.center,

zoom: this.mapConfig.zoom,

seamlessZoom: false,

hitDetect: false, // 是否为此地图上的光标样式启用图层命中检测，请禁用它以提高性能。

zoomControl: false,

scaleControl: false,

overviewControl: false,

attribution: false,

pitch: this.mapConfig.pitch,

bearing: this.mapConfig.bearing,

spatialReference: {

projection: "identity",

},

});

//3D图层

this.threeLayer = new ThreeLayer("car", {

forceRenderOnMoving: true,

forceRenderOnRotating: true,

animation: true,

});

this.threeLayer.setZIndex(10);

this.threeLayer.prepareToDraw = function (gl, scene, camera) {

// this.camera = camera;

that.initScene(); //场景对象

that.initPlane(); //地板

that.initCamera(); //相机

that.initWebGLRenderer(); //渲染器

// this.initAxisHelper(); //辅助坐标

that.render();

// this.createControls(); //控件对象

that.loadPointCloud();

that.Car();

that.initControls(); //相机视角

that.initMobile(); //移动

};

this.threeLayer.addTo(this.map);

},

//鼠标控制移动相机视角*****

initControls() {

let that = this;

that.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 = this;

// console.log(this.controls);

var onKeyDown = function (event) {

switch (event.keyCode) {

case 38: // up

case 87: // w

that.run = true;

break;

case 37: // left

case 65: // a

that.rSpeed = 0.02;

break;

case 40: // down

case 83: // s

that.run = false;

break;

case 39: // right

case 68: // d

that.rSpeed = -0.02;

break;

}

};

var onKeyUp = function (event) {

switch (event.keyCode) {

case 38: // up

case 87: // w

that.run = false;

break;

case 37: // left

case 65: // a

that.rSpeed = 0;

break;

case 40: // down

case 83: // s

that.run = false;

break;

case 39: // right

case 68: // d

that.rSpeed = 0;

break;

}

};

document.addEventListener("keydown", onKeyDown, false);

document.addEventListener("keyup", onKeyUp, false);

},

// 创建场景对象Scene

initScene() {

this.scene = new Three.Scene();

},

// 相机

initCamera() {

// let container = document.getElementById("map");

this.camera = new Three.PerspectiveCamera(

90,

window.innerWidth / window.innerHeight,

0.1,

10000

);

this.camera.speed = {

z: 0,

x: 0,

};

this.camera.position.set(2, 7, 5); //设置相机位置

// this.camera.lookAt(this.camera.position); //设置相机方向(指向的场景对象)

this.camera.add(new Three.PointLight("#fff", 3)); //设置灯光

},

loadPointCloud() {

var that = this;

// instantiate a loader

var loader = new PCDLoader();

// load a resource

loader.load(

// resource URL

"./trunk.pcd",

// called when the resource is loaded

function (mesh) {

console.log(mesh);

// scene.add(mesh);

mesh.scale.set(1.32, 1.32, 5);

// mesh.position.copy(

// that.threeLayer.coordinateToVector3([567403.0, 4315210.0])

// );

that.threeLayer.addMesh(mesh);

},

// called when loading is in progresses

function (xhr) {

// console.log((xhr.loaded / xhr.total) * 100 + "% loaded");

},

// called when loading has errors

function (error) {

console.log("An error happened");

}

);

},

Car() {

var that = this;

var loader = new GLTFLoader();

let url = "./car.glb";

loader.load(url, function (gltf) {

console.log(gltf);

var model = gltf.scene;

model.name = "car";

// model.rotation.x = 0;

// model.rotation.z =0;

model.rotation.y = -1.5; //car自身旋转度

model.scale.set(0.5, 0.5, 0.5);

// 矫正

model.position.z = -15;

model.position.y = 0;

model.position.x = 0;

that.car = model;

that.scene.add(that.car);

});

},

//地板

initPlane() {

var planeGeometry = new Three.PlaneGeometry(1000, 1000);

//平面使用颜色为0xcccccc的基本材质

// var planeMaterial = new Three.MeshBasicMaterial({ color: 0xcccccc });

this.scene.add(new Three.AmbientLight(0xffffff)); //添加灯光显示地板图片

// ground 添加地面

const loader = new Three.TextureLoader();

const groundTexture = loader.load(require('../../public/Cad1.png')); //图片

// const groundTexture = loader.load(

// require("../assets/grasslight-big.jpeg")

// ); //绿色草地

groundTexture.wrapS = groundTexture.wrapT = Three.RepeatWrapping;

// groundTexture.repeat.set(100, 100);

groundTexture.anisotropy = 16;

groundTexture.encoding = Three.sRGBEncoding;

const groundMaterial = new Three.MeshLambertMaterial({

map: groundTexture,

});

var plane = new Three.Mesh(planeGeometry, groundMaterial);

//设置屏幕的位置和旋转角度

plane.rotation.x = -0.5 * Math.PI;

plane.position.x = 0;

plane.position.y = 0;

plane.position.z = 0;

//将平面添加场景中

this.scene.add(plane);

},

//创建渲染器对象

initWebGLRenderer() {

var container = document.getElementById("map");

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对象

},

//辅助三维坐标系AxisHelper

initAxisHelper() {

this.axisHelper = new Three.AxisHelper(1000);

this.scene.add(this.axisHelper);

},

//处理车辆方向键逻辑及算法

runCarTick() {

if (this.run) {

this.speed += this.acceleration;

// if (this.speed > this.maxSpeed) {

// this.speed = this.maxSpeed;

// }

} else {

this.speed -= this.deceleration;

if (this.speed < 0) {

this.speed = 0;

}

}

var speed = -this.speed;

if (speed === 0) {

return;

}

var time = Date.now();

this.dirRotation += this.rSpeed;

this.realRotation += this.rSpeed;

var rotation = this.dirRotation;

var speedX = Math.sin(rotation) * speed;

var speedZ = Math.cos(rotation) * speed;

var tempX = this.car.position.x + speedX;

var tempZ = this.car.position.z + speedZ;

var tempA = -this.car.rotation.y;

this.car.rotation.y = this.realRotation;

this.car.position.z += speedZ;

this.car.position.x += speedX;

this.camera.rotation.y = rotation;

this.camera.position.x = this.car.position.x + Math.sin(rotation) * 20;

this.camera.position.z = this.car.position.z + Math.cos(rotation) * 20;

},

render: function () {

this.runCarTick();

requestAnimationFrame(this.render); //请求再次执行渲染函数render

this.renderer.render(this.scene, this.camera); //执行渲染操作

},

// 创建控件对象

createControls() {

this.controls = new OrbitControls(this.camera, this.renderer.domElement);

//是否开启右键拖拽

// this.controls.enablePan = false;

//设置自动旋转

// this.controls.autoRotate = true;

// 禁止鼠标操作

this.controls.enabled = false;

},

},

mounted() {

this.init();

},

};

</script>

<style scoped>

#map {

height: 800px;

}

</style>