问题
I would like to take the example here: https://threejs.org/examples/?q=canvas#canvas_particles_waves
And use it with the WebGLRenderer, by changing:
renderer = new THREE.CanvasRenderer();
to
renderer = new THREE.WebGLRenderer();
So that I can combine this effect with another that is already using WebGL.
However, doing so results in errors with the particles being rendered, like so:
three.js:18501 Uncaught TypeError: Cannot read property 'offset' of undefined at WebGLSpriteRenderer.render (three.js:18501) at WebGLRenderer.render (three.js:22287) at render (canvas_particles_waves.html:184) at animate (canvas_particles_waves.html:157)
Any ideas?
Thanks so much!
回答1:
Nevermind, I got it working!
The CanvasRenderer demo draws its circles using 2D Canvas drawing commands, like so:
var material = new THREE.SpriteCanvasMaterial( {
color: 0xffffff,
program: function ( context ) {
context.beginPath();
context.arc( 0, 0, 0.5, 0, PI2, true );
context.fill();
}
});
2D drawing commands like that don't translate to 3D WebGL, so I replaced this with:
var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
And directly below that in the nested for loop, the first line becomes:
particle = particles[ i ++ ] = new THREE.Mesh( geometry, material );
That's it! Everything else works as is.
来源：https://stackoverflow.com/questions/49839520/converting-canvasrenderer-to-webglrenderer