将CanvasRenderer转换为WebGLRenderer

Question

我想举个例子： https://threejs.org/examples/?q=canvas#canvas_particles_waves

通过更改：

将其与WebGLRenderer一起使用

renderer = new THREE.CanvasRenderer();

到

renderer = new THREE.WebGLRenderer();

这样我就可以将此效果与已经使用WebGL的另一个效果相结合。

然而，这样做会导致渲染粒子出错，如下所示：

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)

有什么想法吗？

非常感谢！

Answer 1

没关系，我开始工作了！

CanvasRenderer演示使用2D Canvas绘图命令绘制其圆圈，如下所示：

var material = new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: function ( context ) {
context.beginPath(); context.arc( 0, 0, 0.5, 0, PI2, true ); context.fill(); } });

这样的2D绘图命令不能转换为3D WebGL，所以我将其替换为：

var geometry = new THREE.SphereGeometry( 5, 32, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

在嵌套for循环的正下方，第一行变为：

particle = particles[ i ++ ] = new THREE.Mesh( geometry, material );

那就是它！其他一切都按原样运作。