1

WebGLとthree.jsを使用して最初のアニメーションを作成しています。マウスがウィンドウに入ったときにのみアニメーションが表示されることを除いて、すべてがうまくいきます。

私のアニメーション

私のコード：

var container = document.getElementById('container');
var wi       = window.innerWidth;
var he       = window.innerHeight;
var renderer  = new THREE.WebGLRenderer({
    antialias: true
});
var scene    = new THREE.Scene();
var camera   = new THREE.PerspectiveCamera(75,wi/he,1,10000);
var distance = 500;
var geometry2 = new THREE.Geometry();

renderer.setSize(wi ,he);
container.appendChild(renderer.domElement);
scene.add(camera);

var texture = THREE.ImageUtils.loadTexture( '/wp-content/themes/auriga-7/i/cloud.png' );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;

var material = new THREE.MeshBasicMaterial( { map: texture,transparent: true} );
var plane = new THREE.PlaneGeometry( 400,400,4,8 );


for ( ix = 0; ix <100; ix++ ) {
item = new THREE.Mesh( plane, material );
item.position.x = ((Math.random()-0.5)*(Math.random() * wi/2) /4)*Math.random()*10;
item.position.y = ((Math.random()-0.5)*(Math.random() * he/2) /4)*Math.random()*10;
item.position.z = ix*10-50;
item.rotation.z = Math.random() *250;
item.scale.x = item.scale.y = Math.random() * Math.random() * 2 + 0.5;

THREE.GeometryUtils.merge(geometry2,item);
}

mesh = new THREE.Mesh( geometry2, material );
scene.add(mesh);


camera.position.z = distance;
camera.lookAt(scene.position);
renderer.sortObjects = false;


// create a point light
var pointLight =
  new THREE.PointLight(0xFFFFFF);

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

// add to the scene
scene.add(pointLight);
renderer.render(scene, camera);

document.addEventListener('mousemove',onMouseMove, false);
window.addEventListener('resize',onResizeMyFuckinBrowser,false);
function onMouseMove(event){

var mouseX = event.clientX - wi/2;
var mouseY = event.clientY - he/2;

camera.position.x = (mouseX - camera.position.x) * 0.02;
camera.position.y = (-mouseY - camera.position.y) * 0.02;
camera.position.z = distance;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function onResizeMyFuckinBrowser(){
var wi       = window.innerWidth;
var he       = window.innerHeight;
renderer.setSize(wi ,he);
renderer.render(scene, camera);
}

この問題を解決するにはどうすればよいですか？

4

1 に答える 1

1

テクスチャの読み込みは非同期イベントです。ほとんどrender()の場合、メイン プログラムでの呼び出しは、テクスチャがロードされる前に行われます。他のrender()呼び出しは、マウス移動イベントとサイズ変更イベントでのみ発生します。これが、マウスが動かされるまで何も見えない理由です。

を使用したくない場合は、コールバック関数のオプションがrequestAnimationFrame()表示される の引数を確認できます。ImageUtils.loadTexture()コールバック内にレンダリング呼び出しを配置できます。

于 2012-10-03T06:40:14.883 に答える