将 CanvasRenderer 转换为 WebGLRenderer [英] Converting CanvasRenderer to WebGLRenderer

问题描述

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

并通过更改将其与 WebGLRenderer 一起使用:

And use it with the WebGLRenderer, by changing:

renderer = new THREE.CanvasRenderer();

到

renderer = new THREE.WebGLRenderer();

这样我就可以将这种效果与另一个已经在使用 WebGL 的效果结合起来.

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: 无法在渲染 (canvas_particles_waves.html) 的 WebGLRenderer.render (three.js:22287) 处读取未定义的 WebGLSpriteRenderer.render (three.js:18501) 属性偏移量":184) 在动画 (canvas_particles_waves.html:157)

有什么想法吗?

非常感谢！

推荐答案

没关系，我搞定了！

CanvasRenderer 演示使用 2D Canvas 绘图命令绘制圆形，如下所示:

The CanvasRenderer demo draws its circles using 2D Canvas drawing commands, like so:

var material = new THREE.SpriteCanvasMaterial( {颜色:0xffffff，程序:函数(上下文){
context.beginPath();context.arc( 0, 0, 0.5, 0, PI2, true );上下文填充()；}});

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

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

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

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.

这篇关于将 CanvasRenderer 转换为 WebGLRenderer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！