Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/364.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript three.js不渲染,必须具有requestAnimationFrame?_Javascript_Three.js_Rendering - Fatal编程技术网

Javascript three.js不渲染,必须具有requestAnimationFrame?

Javascript three.js不渲染,必须具有requestAnimationFrame?,javascript,three.js,rendering,Javascript,Three.js,Rendering,我正在做第2章——WebGL启动和运行手册中的示例 我想显示一个静态纹理贴图立方体 此代码不起作用: var camera = null, renderer = null, scene = null, cube = null, animating = false; function onLoad() { // Grab our container div var container = document.getElementById("container"); // Create the Th

我正在做第2章——WebGL启动和运行手册中的示例

我想显示一个静态纹理贴图立方体

此代码不起作用:

var camera = null,
renderer = null,
scene = null,
cube = null,
animating = false;

function onLoad() {
// Grab our container div
var container = document.getElementById("container");
// Create the Three.js renderer, add it to our div
renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);
// Create a new Three.js scene
scene = new THREE.Scene();
// Put in a camera
camera = new THREE.PerspectiveCamera(45,
    container.offsetWidth / container.offsetHeight, 1, 4000);
camera.position.set(0, 0, 3);
// Create a directional light to show off the object
var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(0, 0, 1);
scene.add(light);
// Create a shaded, texture-mapped cube and add it to the scene
// First, create the texture map
var mapUrl = "cuttherope.jpg";
var map = THREE.ImageUtils.loadTexture(mapUrl);
// Now, create a Phong material to show shading; pass in the map
var material = new THREE.MeshPhongMaterial({
    map: map
});
// Create the cube geometry
var geometry = new THREE.CubeGeometry(1, 1, 1);
// And put the geometry and material together into a mesh
cube = new THREE.Mesh(geometry, material);
// Turn it toward the scene, or we won't see the cube shape!
cube.rotation.x = Math.PI / 5;
cube.rotation.y = Math.PI / 5;
// Add the cube to our scene
scene.add(cube);
renderer.render(scene, camera);
}

但是在我添加
run
函数并调用requestAnimationFrame之后,它显示了多维数据集

}

有人能解释一下为什么吗? 谢谢

纹理(贴图)以异步方式加载,因此在第一个示例中,当调用
render()
时,纹理还不可用。加载图像时,您需要有一个纹理加载回调来重新渲染,或者像使用requestAnimationFrame一样,需要一个连续的渲染循环。

纹理(贴图)异步加载,因此在第一个示例中,当您调用
render()
时,纹理还不可用。当加载图像时,您需要使用纹理加载回调来重新渲染,或者使用requestAnimationFrame进行连续渲染循环

...
cube.rotation.x = Math.PI / 5;
cube.rotation.y = Math.PI / 5;
// Add the cube to our scene
scene.add(cube);
run();
}

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