Ich beginne mit THREE.js und versuche, ein Rechteck mit einer Textur darauf zu zeichnen, das von einer einzelnen Lichtquelle beleuchtet wird. Ich denke, das ist so einfach wie es nur geht (HTML der Kürze halber weggelassen):
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);
}
Das Problem ist, ich kann nichts sehen. Wenn ich das Material ändere und das kommentierte verwende, erscheint ein Quadrat, wie ich es erwarten würde. Beachten Sie, dass
- Die Textur ist 256x256, also sind seine Seiten Zweierpotenz
- Die Funktion wird tatsächlich aufgerufen, wenn der Körper geladen wird. in der Tat funktioniert es mit einem anderen Material.
- Es funktioniert nicht, selbst wenn ich die Datei von einem Webserver aus bereitstelle. Es handelt sich also nicht um eine domänenübergreifende Richtlinie, die das Laden des Images nicht zulässt.
Was mache ich falsch?
THREE.ImageUtils.loadTexture
(was veraltet ist) undTHREE.TextureLoader.load
stattdessen verwenden.ImageUtils
hat bei mir überhaupt nicht funktioniert, aberTextureLoader
beim ersten Versuch perfekt funktioniert. Docs: threejs.org/docs/index.html#api/loaders/TextureLoader