将 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 );

就是这样！其他一切按原样运行。