Question

我正在使用WebGL和three.js创建我的第一个动画。除了我的动画仅在鼠标进入窗口时出现，一切顺利。

Pourtant，dans ma console，j'ai bien“THREE.WebGLRenderer 51”quis'affichedèslechargement de la page，et aucune erreurn'estrenvoyé。 J'ai juste un fond noir qui reste apparent tant que la souris ne survole pas le canvas。

你有什么想法吗？

My animation

我的代码：

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);
}

Answer 1

纹理加载是一个异步事件。最有可能的是，主程序中的render()调用发生在纹理加载之前。您的其他render()调用仅发生在鼠标移动事件和调整事件大小上。这就是为什么在鼠标移动之前你什么都看不见的。

如果您不想使用requestAnimationFrame()，可以查看ImageUtils.loadTexture()的参数，您将在其中看到回调函数的选项。您可以在回调中放置一个渲染调用。

只有当鼠标进入屏幕时才会出现WebGl动画

1 个答案: