小编gma*_*man的帖子

我希望场景中的精灵在相机放大或缩小时不会改变大小.精灵使用不同的画布纹理作为材质.

我发现ParticleBasicMatierial中的sizeAttenuation对我有用.但是如果我使用WenGLRenderer,我必须使用ParticleSystem而不是使用CanvasRenderer的Particle.

我目前使用ParticleSystem只包含一个顶点,每个顶点对应一个ParticleSystem,所以我的场景中有大约800多个ParticleSystem,这可以工作,但是消耗很多.

显然,我不能使用"HUD"作为three.js源代码中的例子,因为精灵都在3D场景中.

有人能帮我吗.或者将sizeAttenuation添加到Sprite材质!谢谢!

我有一个全屏幕的three.js应用程序作为背景,并希望将文本作为叠加在其上,我希望能够滚动.

我的问题是,显然three.js WebGL容器捕获所有滚动事件,并且不允许滚动覆盖内容.

three.js-application是一个<canvas>元素,我的CSS:

canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -9999;
}

这是<div>应该可滚动的内容的主体和父元素.

body {
   display:block;
}

.page-content {
    z-index: 1000;
    padding: 0;
}

• 两者都是身体的直接孩子.

• 脚本在内容之后执行.

如何阻止Three.js容器捕获滚动(例如滚轮)事件并将它们转发到.page-contentdiv？

我正在使用兰伯特着色器，例如，它设置材料如下：

  this.material.uniforms.emissive.value = new THREE.Color(
  Math.random(),
  Math.random(),
  Math.random());

在我拥有一个简单的着色器之前，我需要像这样设置材质来控制Alpha：

this.material.uniforms.color.value = new THREE.Vector4(
  Math.random(),
  Math.random(),
  Math.random(),
  0.3)

但是看起来朗伯着色器没有颜色vector4。

关于如何控制Alpha的任何想法？

我从这里对lambert着色器使用相同的示例：https : //forge.autodesk.com/blog/forge-viewer-custom-shaders-part-2

而且简单的着色器来自：http : //adndevblog.typepad.com/cloud_and_mobile/2017/01/forge-viewer-custom-shaders-part-1.html

我想绘制一条折线（使用 x、y 值）来创建一个形状。例如，当您使用一组坐标 -(0,0)、(0,2)、(2,0)、(0,0) 绘制多段线时，它将创建一个矩形。我怎么能在 Three.js 中做到这一点？

并且，在使用折线绘制形状后，我可以为该形状指定一个高度（z 值）并将其设为 3D 吗？

谢谢。

我试图像这个例子那样使方向流动和气流:https://animagraffs.com/supercharger-vs-turbo/

我可以看到只有纹理在移动

我不明白如何使空气流向管道和表面上的正确方向.

任何想法都非常感谢!

(我想他们可能会使用一些uv展开技术结合动画纹理的UV偏移)

使用WebGL 2,我们现在可以使用统一缓冲区对象.

它们看起来是个好主意,不必将常见的制服附加到每个程序(如每个被渲染对象共有的投影和视图矩阵).

我创建了一个帮助器类,每次我想绑定一个统一的缓冲区对象时都会调用它.

class UniformBuffer {
    constructor(gl, data, boundLocation = 0) {
        this.boundLocation = boundLocation;

        this.data = new Float32Array(data);

        this.buffer = gl.createBuffer();
        gl.bindBuffer(gl.UNIFORM_BUFFER, this.buffer);
        gl.bufferData(gl.UNIFORM_BUFFER, this.data, gl.DYNAMIC_DRAW);
        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.boundLocation, this.buffer);
    }

    update(gl, data, offset = 0) {
        this.data.set(data, offset);

        gl.bindBuffer(gl.UNIFORM_BUFFER, this.buffer);
        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, this.data, 0, null);
        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
        gl.bindBufferBase(gl.UNIFORM_BUFFER, this.boundLocation, this.buffer);
    }
};

想要创建像这样的统一缓冲区的想法

const perScene = new UniformBuffer(gl, [
    ...vec4.create(),
    ...vec4.create(),
], 0); // and bind it to bind location 0?

const perObject = new UniformBuffer(gl, …

我想知道如何使用 Three.js 在鼠标区域周围应用着色器效果就像在本网站的主页：https ://activetheory.net/

我很想找到一些线索或例子。非常感谢

我希望我创建的旋转球体也能垂直弹跳无限次，看起来就像球在现实生活中严格在 y 轴上弹跳的方式一样真实。

我发现的 webgl 示例似乎有点过载（多个球在多个平面上弹跳），并且我无法推断出核心设置来实现我所需要的。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 300 / 200, 1, 1000);


var renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 200);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry);
scene.add(cube);



camera.position.z = 10;
var render = function () {
    requestAnimationFrame(render);
		cube.rotation.x -= 0.10;
    cube.rotation.y += 0.00;

    renderer.render(scene, camera);
};

render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

我正在尝试将帧缓冲区/WebGLRenderTarget 中的深度值读取到数组中。我可以找到将深度渲染到深度纹理的信息，但无法将深度读取到缓冲区。使用 readpixels 我只能获取 rbga 值。理想情况下，我试图从深度和光线中获取世界位置。

我尝试过读取像素，但不知道如何读取 Threejs 中的深度。

我正在寻找一种在巴比伦或 Threejs 中将文本环绕在球体周围的方法。我对改变 javascript 技术持开放态度