Question

我正在使用Three.VideoTexture（视频）在画布上加载视频。它与风景视频完美搭配。但是当我试图加载肖像视频时，画布上的视频会被拉长。

var wrap3D = $("#" + threeJsPreviewHTMLElement);//.find(".wrap3d");

    videoTexture = new THREE.VideoTexture(video);
    videoTexture.minFilter = THREE.LinearFilter;
    videoTexture.magFilter = THREE.LinearFilter;
    videoTexture.format = THREE.RGBFormat;

    scene = new THREE.Scene();
    var WIDTH = 520, HEIGHT = 520;

    var domID = "videoContext";
    if (!isDesktop) {
        HEIGHT = $("#modalTumbler3d").height();
        WIDTH = $("#modalTumbler3d").width();
        domID = "videoContextDevice";
    }

    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(WIDTH, HEIGHT);

    if (!wrap3D.find('#' + domID).length) {
        wrap3D.append(renderer.domElement);
    }
    else {
        wrap3D.find('#' + domID).replaceWith(renderer.domElement);
    }
    renderer.domElement.id = domID;

    //Two CAMERA options - perspective is preferred
    camera = new THREE.PerspectiveCamera(50, WIDTH / HEIGHT, .1, 20000);       
    camera.position.set(0, 0, 150);
    scene.add(camera);

    //Lights
    var hemLight = new THREE.HemisphereLight(0x999999, 0xffffff, 1);
    scene.add(hemLight);
    var spotLight = new THREE.PointLight(0x555555);
    spotLight.position.set(0, 15, -20);
    scene.add(spotLight);
    var spotLight = new THREE.PointLight(0x555555);
    spotLight.position.set(0, -15, 20);
    scene.add(spotLight);

    //size and position of tumbler from camera
    var Y = 0;
    var A = 0;
    var B = 0;
    var scale = 1;

    //cylinder for the movie preview
    //var movieFrame = new THREE.CylinderGeometry(2, 1.8, 2.5, 50, 1, true, -1.59, Math.PI)
    var movieFrame = new THREE.CylinderGeometry(1, 1, 2.5, 100, 3, true, -1.59, Math.PI)


    //var movieFrame = new THREE.CylinderGeometry(2, 1.9, 2.5, 50, 1, true, -1.59, Math.PI)
    var movieMaterial = new THREE.MeshBasicMaterial({ map: videoTexture, overdraw: true, side: THREE.DoubleSide });

    var moviePlayer = new THREE.Mesh(movieFrame, movieMaterial);
    moviePlayer.position.y = Y;
    moviePlayer.rotation.y = A;
    moviePlayer.renderOrder = 14;
    moviePlayer.scale.set(scale, scale, scale);
    scene.add(moviePlayer);

    //control with the mouse or two finger pinch
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.minPolarAngle = 0; // radians
    controls.maxPolarAngle = 2.5; // radians
    controls.minDistance = 5;
    controls.maxDistance = 10;
    controls.enabled = false;

这是我试图播放的视频。我使用CylinderGeometry以Cylinder形式加载视频。

Answer 1

在这种情况下，纹理将简单地覆盖整个CylinderGeometry。因此，您看到的任何失真都是由于视频的宽高比与圆柱片段的长宽比不匹配而产生的。

根据您的代码，您的高度为2.5，宽度为Math.PI，因此您的宽高比为~1.25。现在，对于纵向视频（宽高比<1），您需要调整几何体。（所以对于一个3：4的potrait-video，你需要1.875/radius而不是Math.PI的thetaLength。

Three.VideoTexture延伸肖像视频

1 个答案: