0
J'essaie de modifier l'exemple canves/lines.js et d'afficher des sprites texturés au lieu de points. Je charge une texture à partir d'un fichier PNG et j'ai remplacé les points réguliers par des sprites. Ils ne montrent pas.THREE.js, texture non affichée sur un sprite
function init() {
var container, separation = 100, amountX = 50, amountY = 50,
particles, particle,sprite;
var crateTexture = THREE.ImageUtils.loadTexture('images/crate.png');
var crateMaterial = new THREE.SpriteMaterial({ map: crateTexture, useScreenCoordinates: false, color: 0xff0000 });
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.z = 100;
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setClearColor (0x5bb0d2, 1);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// particles
var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial({
color: 0xfffffff,
program: function (context) {
context.beginPath();
context.arc(0, 0, 0.5, 0, PI2, true);
context.fill();
}
});
var geometry = new THREE.Geometry();
var x,y,z=0;
for (var i = 0; i < 100; i ++) {
particle = new THREE.Sprite(crateMaterial);
particle.position.x = Math.random() * 2 - 1;
particle.position.y = Math.random() * 2 - 1;
particle.position.z = Math.random() * 2 - 1;
particle.position.normalize();
particle.position.multiplyScalar(Math.random() * 10 + 450);
particle.scale.x = particle.scale.y = 64;
scene.add(particle);
}
Qu'est-ce que je fais mal?