harp.gl-base
v1.0.2
Published
three 3d three-base harp.gl-base
Downloads
8
Maintainers
Readme
.创建一个 homeMapRender.ts 模块
import HarpGLBase, { harpGlUtils } from "harp.gl-base";
import { AmbientLight, BoxGeometry, DirectionalLight, Mesh, MeshLambertMaterial } from "three";
import { Text3D, Transition } from "three-base";
import { degToRad } from "three/src/math/MathUtils";
/**
* @class HomeRender
*/
// 做项目找我 qq:389652405
class HomeMapRender extends HarpGLBase {
constructor() {
super();
}
init() {
super.init();
// 不自动渲染
this.autoRender = false;
this.needRender = true;
this.resetLookAt({
heading: 0,
latitude: 26.06914,
longitude: 119.30712,
tilt: 43.801,
zoomLevel: 17.9
});
}
// 环境光
ambientLight = (() => {
const ambientLight = new AmbientLight("#fff", 0.5);
this.scene.add(ambientLight);
return ambientLight;
})();
// 方向光
directionalLight = (() => {
const directionalLight = new DirectionalLight("#fff", 1);
directionalLight.position.set(-10, 10, 5);
directionalLight.target.position.set(0, 0, 0);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.set(1024, 1024);
this.scene.add(directionalLight);
return directionalLight;
})();
box = (() => {
const geometry = new BoxGeometry(20, 20, 20);
geometry.translate(0, 10, 0);
const matearil = new MeshLambertMaterial({ color: 0xfff });
const mesh = new Mesh(geometry, matearil);
const transition = new Transition({ rotationY: 0 });
// 动画对象播放回调
transition.onChange(({ rotationY }) => {
mesh.rotation.y = rotationY;
this.needRender = true;
});
// 经纬度转三维坐标
harpGlUtils.latlonToPosition({ latitude: 26.06883632316332, longitude: 119.30586242169313 }, mesh.position);
mesh.userData = { cursor: "pointer", enableEvent: true };
// 点击设置动画对象的值
mesh.addEventListener("click", e => { });
mesh.addEventListener("dbclick", e => {
});
mesh.addEventListener("leftclick", e => {
transition.set({ rotationY: Math.random() * 5 });
});
mesh.addEventListener("rightclick", e => {
});
mesh.addEventListener("mouseenter", e => { });
mesh.addEventListener("mouseleave", e => { });
mesh.addEventListener("mousemove", e => { });
mesh.addEventListener("mousedown", e => { });
mesh.addEventListener("mouseup", e => { });
this.scene.add(mesh);
return mesh;
})();
// 3D文字
text3D = (() => {
const text3D = new Text3D("GIS");
text3D.setText({
});
text3D.scale.set(100, 100, 100);
text3D.rotateX(degToRad(-90));
// 经纬度转三维坐标
harpGlUtils.latlonToPosition({ latitude: 26.0696, longitude: 119.30685 }, text3D.position);
text3D.position.setY(1);
this.scene.add(text3D);
return text3D;
})();
}
const homeMapRender = window.homeMapRender = new HomeMapRender();
export default homeMapRender;
2.添加到div里面
import homeMapRender form "./homeMapRender.ts";
homeMapRender.setContainer( document.getElementById("div") );
演示地址: https://drm.gitee.io/vite_react_mobx_threebase/
代码: https://gitee.com/drm/vite_react_mobx_threebase