1

我正在尝试使用三个 js 和 CSS3D 渲染器创建一个简单的图像序列。为了创建这个序列，我参考了 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 个图像（1600x1280px），它们存在于 DOM 中，但是当页面首次加载屏幕左侧部分的图像时，它们会被切掉。尝试放大和倾斜以查看切碎的图像。此外，有时您会注意到reflection与所有其他图像相比，最左边的图像非常清晰。

这是一种奇怪的行为，因为根据我的理解，我应该能够看到所有图像。我曾尝试使用相机属性来解决此问题，但到目前为止还没有运气。

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

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

4

0 回答 0