THREE.js,纹理不显示在sprite上
问题描述:
我正在尝试修改canves/lines.js示例并显示纹理的sprite而不是点。我从PNG文件加载纹理,并用精灵替换了常规点。他们不显示。THREE.js,纹理不显示在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);
}
我做错了什么?
答
我所做的一切都是正确的,从本地计算机读取纹理时存在问题。解决方案是将适当的权限分配给web serwer或允许Chrome或其他浏览器读取本地文件。在Chrome的情况下,您可以创建如下的快捷方式:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" chrome --allow-file-access-from-files