Question

这是我的代码 -

var scene = new THREE.Scene();

// adding a camera
var camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight, 1, 2000);
//camera.target = new THREE.Vector3(0, 0, 0);


// setting up the renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(renderW, renderH);
document.body.appendChild(renderer.domElement);




// creating the panorama

// panoramas image
var panoramasArray = ["01.jpg"];



// creation of a big sphere geometry
// default segments of sphere w 8 h 6
var sphere = new THREE.SphereGeometry(400,100,40);
sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

// creation of the sphere material
//var sphereMaterial = new THREE.MeshBasicMaterial();
var sphereMaterial = new THREE.MeshBasicMaterial({color:0x0000FF});
sphereMaterial.map =THREE.ImageUtils.loadTexture(panoramasArray[1])

// geometry + material = mesh (actual object)
sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);

camera.position.z = 900;

renderer.render(scene, camera);

我在localhost apache服务器上运行它，但在浏览器中看不到任何内容。黑屏。

然而，当我这样做时 -

function render()
{   
requestAnimationFrame(render);
renderer.render(scene, camera);
}

一切正常！我尝试在ImageUtils.Load上添加回调，但在我放入动画循环之前，屏幕上仍然没有呈现任何内容。从现在开始，我一直在摸不着头脑。请解释一下帮助。我不想把动画帧只是为了显示图像纹理。

Answer 1

通过异步super.method()加载纹理。在几百毫秒后加载图像时，主脚本很久以前就执行了XMLHTTPRequest调用。

您必须将render移至加载程序renderer.render(scene,camera)回调，这是其第三个参数：

onLoad

请参阅doc

无法在三个js中加载图像纹理

1 个答案: