canvas - 将Canvas 2D映射到Three.js Canvas

我有一个用Three.js构建的简单2D游戏。我仅使用世界的X和Y位置来移动对象，而将它们的z位置保持为零。我将TrackballControls与旋转禁用一起使用，以允许使用鼠标右键进行2D运动以及使用鼠标滚轮进行缩放。我现在需要为此游戏实施战争迷雾。 After looking around，I've found，将第二个画布与2D上下文一起使用是最方便的方法。

这带来的挑战是，Canvas 2D必须以与3D Canvas移动相同的速率进行平移和缩放，以将雾气放置在正确的项目上。我已经设法通过不投影原点来完成平移，但是我不确定如何准确地复制缩放。
 

    var widthHalf = this.width / 2, heightHalf = this.height / 2;

    var origin = new THREE.Vector3();
    var projector = new THREE.Projector();
    origin = projector.projectVector(new THREE.Vector3(0, 0, 0), this.camera);
    origin.x = (origin.x * widthHalf) + widthHalf;
    origin.y = -(origin.y * heightHalf) + heightHalf;

    canvas2D.save();
    canvas2D.translate(origin.x, origin.y); //This works great

    canvas2D.scale(???,???); //Map to the zoom/position of the Three.js camera?

    //Do fog drawing here...

    //A 1x1 Rectangle for Scale - Should Map to a 1x1 square of Three.js space
    canvas2D.fillStyle = "#FF0000";
    canvas2D.fillRect(0, 0, 1, 1);

    canvas2D.restore();

问：如何将Three.js相机的距离映射到Canvas 2D的比例，以便它们以相同的速率缩放？

最佳答案

找到了解决方案。答案是做一些数学运算，以确定Three.js空间的1x1正方形的屏幕尺寸，并使用该比例缩放画布。
 

this.WorldtoPixel = function(worldPos)
{
    var widthHalf = this.width / 2, heightHalf = this.height / 2;

    var position = new THREE.Vector3();
    var projector = new THREE.Projector();
    position = projector.projectVector(worldPos, this.camera);
    position.x = (position.x * widthHalf) + widthHalf;
    position.y = -(position.y * heightHalf) + heightHalf;

    return position;
}

var origin = this.WorldtoPixel(new THREE.Vector3(0, 0, 0));
var onezero = this.WorldtoPixel(new THREE.Vector3(1, 0, 0));
var zeroone = this.WorldtoPixel(new THREE.Vector3(0, 1, 0));

var scaleX = onezero.x - origin.x;
var scaleY = origin.y - zeroone.y;
fogContext.scale(scaleX, scaleY);                                                       

plot - 根据函数进行t测距的迭代和参数模式-gnuplot - 程序调试信息网

java - 如何解决@OneToMany关系中的重复列名异常 - 程序调试信息网

java - Web服务如何从URL Web服务获取wsdl - 程序调试信息网

java - 打印 SOAP 消息的 XML 内容 - 程序调试信息网

python - 重新采样 xarray 对象以降低空间分辨率 - 程序调试信息网

java - 不想将服务层URL暴露给外界 - 程序调试信息网

opencl - 在 GPU 设备上可以同时执行多少个任务？ - 程序调试信息网

javafx - 如何使 RichTextFx 的外观和感觉类似于 TextArea？ - 程序调试信息网

java - 如何在Jupyter Notebook的代码单元输出中避免出现多个水平滚动条？ - 程序调试信息网

macos - mac os-x 上的颜色选择器选择了错误的颜色 - 程序调试信息网

java - 我如何获得数组列表中我的哈希图的副本 - 程序调试信息网

spring - Spring 3.1 和 JPA 2 没有正在进行的事务异常 - 程序调试信息网

opengl - 使用插值的OpenGL ArcBall旋转和动画？ - 程序调试信息网

canvas - 将Canvas 2D映射到Three.js Canvas - 程序调试信息网

java - 输出不遵循顺序 - 程序调试信息网

abap - 通过 RFC 返回动态类型的表行？ - 程序调试信息网

Oracle:比较重叠关系 - 程序调试信息网

Joomla (3.X) 如何安排一个cron？ - 程序调试信息网

octave -Octave 音阶图像的 DCT - 程序调试信息网

groovy - 如何在接受可变参数的 groovy 中调用 super 构造函数？ - 程序调试信息网