Question

我正在尝试使用Three js和CSS3D Renderer创建一个简单的图像序列。要创建此序列，我指的是mrdoob的CSS3D渲染器示例http://www.mrdoob.com/lab/javascript/threejs/css3d/periodictable/。然而，我没有使用具有背景颜色和随机不透明度的Div，而是使用大型高清图像并将它们全部堆叠在同一行中。

我已经能够借助上述示例实现这一目标，并且可以在此处查看http://gauravsingh.name/webgl/

这是我用来创建演示的JavaScript代码

var table = [
    "img/1.jpg", "This is a test heading", "", 1, 1,
    "img/2.jpg", "This is a test heading -1", "", 2, 1,
    "img/3.jpg", "", "", 3, 1,
    "img/4.png", "", "", 4, 1,
    "img/5.jpg", "", "", 5, 1,
    "img/6.jpg", "", "", 6, 1,
    "img/7.jpg", "This is a test heading - 2", "", 7, 1];

var camera, scene, renderer;
var controls;

var objects = [];
var targets = {
    table: []
};

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.z = 2000;

    scene = new THREE.Scene();

    // table

    for (var i = 0; i < table.length; i += 5) {

        var element = document.createElement('div');
        element.className = 'element';
        element.style.background = 'url("' + table[i] + '")';

        var object = new THREE.CSS3DObject(element);
        scene.add(object);

        objects.push(object);

        var object = new THREE.Object3D();
        object.position.x = (table[i + 3] * 1700) - 4540;
        object.position.y = -(table[i + 4] * 200) + 300;

        targets.table.push(object);

    }

    //

    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.domElement.style.position = 'absolute';
    document.getElementById('container').appendChild(renderer.domElement);

    //

    controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.rotateSpeed = 0.5;
    controls.addEventListener('change', render);

    transform(targets.table, 5000);

    //

    window.addEventListener('resize', onWindowResize, false);

}

function transform(targets, duration) {

    TWEEN.removeAll();

    for (var i = 0; i < objects.length; i++) {

        var object = objects[i];
        var target = targets[i];

        new TWEEN.Tween(object.position)
            .to({
            x: target.position.x,
            y: target.position.y,
            z: target.position.z
        }, /*Math.random() * duration */ + duration)
            .easing(TWEEN.Easing.Linear.None)
            .start();

        new TWEEN.Tween(object.rotation)
            .to({
            x: target.rotation.x,
            y: target.rotation.y,
            z: target.rotation.z
        }, Math.random() * duration + duration)
            .easing(TWEEN.Easing.Exponential.InOut)
            .start();

    }

    new TWEEN.Tween(this)
        .to({}, duration * 2)
        .onUpdate(render)
        .start();

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

    requestAnimationFrame(animate);

    TWEEN.update();
    controls.update();

}

function render() {

    renderer.render(scene, camera);

}

这是CSS：

html, body {
    height: 100%;
}
body {
    background-color: #000000;
    margin: 0;
    font-family: Arial;
    overflow: hidden;
}
.element {
    width: 1600px;
    height: 1280px;
    box-shadow: 0px 0px 20px rgba(0, 255, 255, 0.5);
    border: 1px solid rgba(127, 255, 255, 0.25);
    cursor: default;
    -webkit-box-reflect: below 0px -webkit-linear-gradient(top, transparent, transparent 0%, black 400%);
}

问题：我在代码中包含了7张图片（1600x1280像素）并且它们存在于DOM中，但是当页面首次加载图像时，屏幕的左侧部分会被切断。尝试放大和倾斜以查看切碎的图像。有时您会注意到，与所有其他图像相比，极左图像的reflection非常清晰。

这是一种奇怪的行为，因为根据我的理解，我应该能够看到所有图像。我试过玩相机属性来解决这个问题，但直到现在都没有运气。

如果有人能解释我这种行为的原因并指导我纠正解决问题的指示，我将不胜感激。

更新
这个问题似乎是特定于chrome的，因为我发现它在firefox和IE上运行良好。虽然在Firefox上动画有点生涩，但帧不会被切断。

Threejs：大图像无法正确显示

0 个答案: