小编Kev*_*ine的帖子

我的申请要求将一个四边形映射到另一个四边形.这些都不是矩形.

但是,我从warpPerspective()得到的结果总是一个矩形.我已经尝试将"异常值"标志设置为不同的值,以防止扭曲四边形外的像素出现在目标图像中,但似乎没有任何效果.我想要的是一个扭曲的四边形,扭曲的四边形外面的像素设置为透明.

我该如何实现这一目标？

或者,是否有一种直接的方法来掩盖OpenCV中四边形外的区域,以便我可以只将四边形复制到另一个图像？

如果它是相关的,我使用Python绑定到OpenCV.

这是我目前的代码:

def warpImage(image, corners, target, width, height):
    mat = cv2.getPerspectiveTransform(corners, target)
    out = numpy.zeros(shape=(width, height), dtype="uint8")
    out = cv2.warpPerspective(image, mat, (width,height), out, cv2.INTER_CUBIC)
    return out

角和目标都是非矩形四边形.但是,输出是一个全宽x高的矩形.没有像素是黑色或透明的.相反,它们是角四边形内外的图像像素.我只想要里面的那些.

我一直在尝试将自定义属性 BufferGeometry 示例（https://thirdjs.org/examples/webgl_buffergeometry_custom_attributes_articles.html）转换为飞越动画，我发现精灵有深色背景（以及我自己创建的那些）如果深度测试设置为 true。看图片。

自定义属性示例中的精灵具有透明背景，但如果深度测试设置为 true，则在渲染时它似乎会被忽略。

我尝试了许多自定义混合规则，但找不到去除背景的方法，只是稍微降低了效果。如果深度测试设置为 false，则背景消失。

这是一个已知的限制吗？有解决办法吗？

我正在修改这个问题，以添加具有不同球精灵（也具有透明背景）的更清晰的图像。对于https://twojs.org/examples/webgl_buffergeometry_custom_attributes_articles.html Three.js 示例中使用的自定义 ShaderMaterial，此图像的深度测试设置为 true 。

相比之下，这使用了来自不同 Three.js 示例 ( https:// Threejs.org/examples/webgl_points_sprites.html ) 的多个 PointsMaterial，同时深度测试设置为 true 并使用精灵的 PointsMaterial 贴图参数。

如您所见，第二个 PointsMaterial 示例按预期工作。由于 PointsMaterial 只接受一种固定大小和颜色，因此我需要创建 36 个不同的点几何图形来渲染此图像。

我更愿意在第一个示例中使用自定义着色器（它具有自定义大小和颜色属性，并且只需要一个几何体）。有没有办法像 PointsMaterial 一样定义自定义着色器来支持深度测试？

camera.lookAt(myObject) 将立即将 Three.js 相机旋转到给定的对象。

我想使用 gsap 来制作这个旋转的动画。我使用 gsap 来动画相机位置的变化没有问题，但下面的相机旋转代码没有任何作用。

const targetOrientation = myObject.quaternion.normalize();
gsap.to({}, {
    duration: 2,
    onUpdate: function() {
        controls.update();
        camera.quaternion.slerp(targetOrientation, this.progress());
    }
});

如何以这种方式制作相机旋转动画？

好的，现在已经解决了。主要问题是 render() 函数中的controls.update() 行。轨道控件不能很好地与相机旋转配合使用，因此您需要确保它们在动画过程中完全禁用。

我修改后的代码包括旋转和位置动画：

const camrot = {'x':camera.rotation.x,'y':camera.rotation.y,'z':camera.rotation.z}
camera.lookAt(mesh.position);
const targetOrientation = camera.quaternion.clone().normalize();

camera.rotation.x = camrot.x;
camera.rotation.y = camrot.y;
camera.rotation.z = camrot.z;

const aabb = new THREE.Box3().setFromObject( mesh );
const center = aabb.getCenter( new THREE.Vector3() );
const size = aabb.getSize( new THREE.Vector3() );

controls.enabled = false;   

const startOrientation = camera.quaternion.clone();

gsap.to({}, {
    duration: …