js渲染到纹理同步相机

Three.js render to texture synch cameras

本文关键字：同步 相机 纹理 js      更新时间：2023-09-26

我必须对点云应用alpha着色滤镜，就像这个链接:https://www.mapbox.com/blog/colorize-alpha-image-filter/所描述的那样，以实现一种热图。

我在纹理上渲染2d点云，然后使用处理colorizealpha过滤的自定义着色器将其渲染成平面。

问题是，我不明白我如何才能正确地缩放内部纹理化点云，但保持点云点的原始大小。

我创建了一个简化的示例，没有真正的colorize-alpha过滤，但具有渲染到纹理的结构:http://jsfiddle.net/q8fpt7eL/1/

我想要达到的效果是完全一样的，你可以达到当你直接绘制点云。在jsfiddle上，你可以直接注释RTT部分并取消注释渲染部分，看看我在说什么。

//render to texture
//renderer.render(sceneRTT, cameraRTT, rtTexture, false);
//renderer.render(scene, camera);
//render directly the point cloud
renderer.render(sceneRTT, camera);

我已经尝试过使用相同的相机，或者复制相机位置/旋转在cameraRTT对象上，但似乎不能正常工作。我也尝试过在RTT现场使用正射影机，但没有成功。

有谁知道我怎样才能实现我的目标吗?

谢谢

在第41行，当您真正希望它控制RTT场景时，您正在将OrbitControls设置为控制"平面场景"的相机。试试这个:

new THREE.OrbitControls(cameraRTT, renderer.domElement);

看起来好多了，你可以放大点云内部。

最后，你所要做的就是使camera正字法和设置你的平面，使其充满场景。

相关文章：