在THREE.js中使用纹理
我从THREE.js开始，尝试绘制一个矩形，上面有一个纹理，由单一光源照明。我认为这很简单(为简洁起见，省略了HTML)：
function loadScene() {
var world = document.getElementById('world'),
WIDTH = 1200,
HEIGHT = 500,
VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000,
renderer = new THREE.WebGLRenderer(),
camera = new THREE.Camera(VIEW_ANGLE, ASPECT, NEAR, FAR),
scene = new THREE.Scene(),
texture = THREE.ImageUtils.loadTexture('crate.gif'),
material = new THREE.MeshBasicMaterial({map: texture}),
// material = new THREE.MeshPhongMaterial({color: 0xCC0000});
geometry = new THREE.PlaneGeometry(100, 100),
mesh = new THREE.Mesh(geometry, material),
pointLight = new THREE.PointLight(0xFFFFFF);
camera.position.z = 200;
renderer.setSize(WIDTH, HEIGHT);
scene.addChild(mesh);
world.appendChild(renderer.domElement);
pointLight.position.x = 50;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.addLight(pointLight);
renderer.render(scene, camera);
}问题是，我什么也看不见。如果我更改材质并使用注释的材质，就会出现一个正方形。请注意，
- 纹理是256x256，因此它的侧面是2的幂
- 该函数实际上是在加载正文时调用的；实际上，它适用于不同的材质。
- 即使我从when服务器提供文件，它也不起作用，因此这不是跨域策略不允许加载图像的问题。
我做错了什么？
回答 6
Stack Overflow用户
发布于 2011-10-28 17:13:17
加载图像时，渲染器已经绘制了场景，因此为时已晚。解决之道就是改变
texture = THREE.ImageUtils.loadTexture('crate.gif'),转到
texture = THREE.ImageUtils.loadTexture('crate.gif', {}, function() {
renderer.render(scene);
}),Stack Overflow用户
发布于 2012-06-12 00:18:24
Andrea的解决方案是绝对正确的，我将基于同样的想法编写另一个实现。如果您查看了THREE.ImageUtils.loadTexture() source，您会发现它使用了javascript Image对象。$(window).load事件在加载完所有图像后触发！所以在这种情况下，我们可以用已经加载的纹理来渲染我们的场景…
- CoffeeScript
$(文档).ready -> THREE.MeshLambertMaterial=新窗口(贴图: THREE.ImageUtils.loadTexture("crate.gif")) THREE.MeshLambertMaterial=新窗口(新窗口(半径、线段、环)，材质)$(窗口).load -> renderer.render scene，camera
- JavaScript
$(document).ready(function() {THREE.MeshLambertMaterial=新材质({ map: THREE.ImageUtils.loadTexture("crate.gif") })；sphere =新材质(新THREE.SphereGeometry(半径，线段，圆环)，材质)；$(window).load(function() {renderer.render(场景，摄像头)；})；});
谢谢..。
Stack Overflow用户
发布于 2016-03-20 23:45:59
在three.js的r75版本中，您应该使用：
var loader = new THREE.TextureLoader();
loader.load('texture.png', function ( texture ) {
var geometry = new THREE.SphereGeometry(1000, 20, 20);
var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});https://stackoverflow.com/questions/7919516
复制相似问题