//最近没有时间整理代码，就这样吧 <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>