将图像加载到立方体three.js [英] load image to a cube three.js
问题描述
嗨我试图将图像加载到多维数据集但我不知道出了什么问题。立方体很好但不是图像。
以下是链接: http://diegoddox.bitbucket.org/loadimage/
Hi I trying to load a image to a cube but i don't know what is wrong. The cube is fine but not the image. Here is the link: http://diegoddox.bitbucket.org/loadimage/
var scene, camera, renderer;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColorHex(0xeeeeee);
renderer.clear();
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 0.1, 5000 );
camera.position.z = 800;
camera.lookAt(scene.position);
scene.add(camera);
var material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture("img.jpg")
});
material.map.needsUpdate = true;
var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300), material);
cube.overdraw = true;
cube.position.x = 0;
cube.rotation.x = -20;
cube.rotation.z = -2;
scene.add(cube);
renderer.render(scene, camera);
推荐答案
图像加载是异步的。
发生的事情是你的单个 render()
调用是在图像加载完成之前发生的。
What is happening is that your single render()
call is occurring before the image finishes loading.
输入
renderer.render(scene, camera);
进入控制台,你会看到纹理渲染。
into the Console, and you will see that the texture renders.
您需要在 loadTexture()
函数中添加回调并调用 render()
从那里,或者,您可以使用 requestAnimationFrame()
添加动画循环。
You need to add a callback to your loadTexture()
function and call render()
from there, or, alternatively, you can add an animation loop using requestAnimationFrame()
.
这篇关于将图像加载到立方体three.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!