鼠标控制3维操作 不知道能不能获得一些灵感
Posted 小师叔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标控制3维操作 不知道能不能获得一些灵感相关的知识，希望对你有一定的参考价值。
简介
RT， vensor 里面有关于四元数的处理方案
参考链接
https://observablehq.com/@d3/versor-dragging
代码
<meta charset="utf-8">
<style>
</style>
<body>
<script src="./d3.js"></script>
<script src="./versor.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<canvas id="cc" width="500" height="500"></canvas>
<!-- <srcipt src="./land-50m.json"></srcipt> -->
<!-- <script src="./land-110m.json"></script> -->
<script>
// var topology = topojson.topology({foo: goejson})
var land110 = ‘‘
var land50 = ‘‘
d3.json(‘http://localhost:5500/land-110m.json‘).then((world) => land110 = topojson.feature(world, world.objects.land))
// console.log("land110", land110)
// land110 = land_110m.then(world => topojson.feature(world, world.objects.land))
d3.json(‘http://localhost:5500/land-50m.json‘).then(world => land50 = topojson.feature(world, world.objects.land))
sphere = ({type: "Sphere"})
projection = d3["geoOrthographic"]().precision(0.1)
height = getheight()
function getheight() {
width = 500
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
function drag(projection) {
let v0, q0, r0;
function dragstarted() {
v0 = versor.cartesian(projection.invert([d3.event.x, d3.event.y]));
q0 = versor(r0 = projection.rotate());
console.log("dargstart", v0, "q0", q0)
console.log(‘land110‘, land110)
}
function dragged() {
const v1 = versor.cartesian(projection.rotate(r0).invert([d3.event.x, d3.event.y])); // 笛卡尔坐标系
const q1 = versor.multiply(q0, versor.delta(v0, v1));
projection.rotate(versor.rotation(q1));
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged);
}
function init() {
var c=document.getElementById("cc");
var context=c.getContext("2d");
console.log(context)
// context = context.getContext("2d")
const path = d3.geoPath(projection, context)
function render (land) {
var c=document.getElementById("cc");
var context=c.getContext("2d");
context.clearRect(0, 0, width, height)
context.beginPath(), path(sphere), context.fillStyle = ‘#fff‘, context.fill()
context.beginPath(), path(land), context.fillStyle = ‘#000‘, context.fill()
context.beginPath(), path(sphere), context.stroke()
}
d3.select(context.canvas)
.call(drag(projection)
.on("drag.render", () => render(land110))
.on("end.render", () => render(land50)))
.call(() => render(land50))
.node();
}
init()
</script>
</body>
以上是关于鼠标控制3维操作 不知道能不能获得一些灵感的主要内容，如果未能解决你的问题，请参考以下文章
js 外部按钮点击事件与canvas画布里的线条鼠标事件冲突
jquery，怎样可以让鼠标停留在某一区域不少于1秒才会执行代码