【发布时间】：2021-02-02 20:46:46
【问题描述】：
我正在尝试让我的 3D 对象在我的 Mapbox 创建的场景中移动。 我正在使用自定义图层通过 Three.js 在地图上创建我的对象，如下代码所示：
var map = action.map;
var orign = {
lon: -8.34,
lat: 41.21
}
var camera, scene;
var fromLL = function (lon, lat) {
var extent = 20037508.34;
var x = lon * extent / 180;
var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
y = y * extent / 180;
return [(x + extent) / (2 * extent), 1 - ((y + extent) / (2 * extent))];
}
var translate = fromLL(orign.lon, orign.lat);
const transform = {
translateX: translate[0],
translateY: translate[1],
translateZ: 0,
rotateX: Math.PI / 2,
rotateY: 0,
rotateZ: 0,
scale: 5.41843220338983e-6
}
// configuration of the custom layer for a 3D model per the CustomLayerInterface
var customLayer = {
id: '3d-model' + uuid(),
type: 'custom',
renderingMode: '3d',
onAdd: function (map, gl) {
this.camera = new THREE.Camera();
this.scene = new THREE.Scene();
// create two three.js lights to illuminate the model
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0, -70, 100).normalize();
this.scene.add(directionalLight);
var directionalLight2 = new THREE.DirectionalLight(0xffffff);
directionalLight2.position.set(0, 70, 100).normalize();
this.scene.add(directionalLight2);
// use the three.js GLTF loader to add the 3D model to the three.js scene
var loader = new GLTFLoader();
const bus = 'https://threejsfundamentals.org/threejs/resources/models/animals/Horse.gltf';
loader.load(
bus,
(gltf) => {
this.scene.add(gltf.scene);
},
(xhr) => {
console.log(`${(xhr.loaded / xhr.total * 100)}% loaded`);
},
(error) => {
// called when loading has errors
console.error('An error happened', error);
}
);
this.map = map;
// use the Mapbox GL JS map canvas for three.js
this.renderer = new THREE.WebGLRenderer({
canvas: map.getCanvas(),
context: gl,
antialias: true
});
this.renderer.autoClear = false;
},
render: function (gl, matrix) {
const rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), transform.rotateX);
const rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), transform.rotateY);
const rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), transform.rotateZ);
const m = new THREE.Matrix4().fromArray(matrix);
const l = new THREE.Matrix4().makeTranslation(transform.translateX, transform.translateY, transform.translateZ)
.scale(new THREE.Vector3(transform.scale, -transform.scale, transform.scale))
.multiply(rotationX)
.multiply(rotationY)
.multiply(rotationZ);
this.camera.projectionMatrix.elements = matrix;
this.camera.projectionMatrix = m.multiply(l);
this.renderer.state.reset();
this.renderer.render(this.scene, this.camera);
this.map.triggerRepaint();
}
}
在将我的对象放入场景后，我要做的下一步是使用为 Mapbox 提供的方法来控制相机。 我的疑问是如何通过“WASD”键使“setInterval”函数改变我之前渲染对象的定位值，而不仅仅是地图上的相机。 下面是我试图适应对象移动的代码：
map.on('load', function () {
map.addLayer(customLayer);
var keys = {};
window.onkeyup = function (e) { keys[e.keyCode] = false; }
window.onkeydown = function (e) { keys[e.keyCode] = true; }
var heading = 180;
setInterval(function () {
var speed = 0;
if (keys[68]) {
heading += 2;
}
if (keys[65]) {
heading -= 2;
}
if (keys[87]) {
speed = 0.0002;
}
if (keys[83]) {
speed = -0.0002;
}
var rad = heading * 0.0174532925;
orign.lat += Math.cos(rad) * speed;
orign.lon += Math.sin(rad) * speed;
map.setBearing(heading);
map.setCenter([orign.lon, orign.lat]);
}, 1000 / 60);
});
到目前为止，我所拥有的是： 3D Object in map
【问题讨论】：
-
您好，欢迎来到 Stackoverflow！请阅读tour 以更好地了解如何添加minimal reproducible example！
-
我在不同的论坛上从不同的用户那里读到了同样的东西，他们都来自意大利。这是比赛还是什么？
-
感谢@0stone0 的帮助！！这不是@jscastro 的比赛......在我的情况下，这是一个大学项目。
-
那你班上所有的同事都在找同样的，one posted the same in my github repo 和here，还有一个here
标签： reactjs redux three.js mapbox