Three js と CSS3D Renderer を使用して単純な画像シーケンスを作成しようとしています。このシーケンスを作成するために、mrdoob による CSS3D レンダラーの例http://www.mrdoob.com/lab/javascript/threejs/css3d/periodictable/を参照しています。ただし、背景色とランダムな不透明度を持つ Div を使用する代わりに、大きな HD 画像を使用して、それらをすべて同じ行に積み重ねています。
上記の例の助けを借りてこれを達成できました。ここで確認できます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また、他のすべての画像と比較して、左端の画像が非常にシャープであることに気付く場合もあります。
私の理解では、すべての画像を表示できるはずだったので、これは奇妙な動作です。この問題を解決するためにカメラのプロパティをいじってみましたが、今のところうまくいきません。
誰かがこの動作の理由を説明し、それを解決するための正しいポインターを案内してくれるとありがたいです.
更新
この問題は、Firefox と IE で問題なく動作することがわかったため、Chrome 固有のようです。Firefox のアニメーションは少しぎくしゃくしていますが、フレームが途切れることはありません。