小编Lee*_*ski的帖子

我希望这次是正确的地方,但我想弄清楚如何使用three.js创建一个明星,就像铬实验100,000颗恒星一样.我试着查看源代码,但它很难破译,它似乎很多部分,我尝试使用纹理,我不知道如何获得太阳周围的光晕或光环,我将不胜感激任何有知道如何做到这一点的人的帮助.

我在Three.js中创建了一个自定义几何体.现在,我想创建一个使用光滑阴影Lambert材质的网格.使用循环,我创建了顶点数组,然后是面,然后我调用了

geometry.computeCentroids();
geometry.computeFaceNormals();
geometry.computeVertexNormals();

var colorMaterial =  new THREE.MeshLambertMaterial( {color: 0x0000ff, side: THREE.DoubleSide} );
var mesh = new THREE.Mesh( geometry, colorMaterial );
scene.add(mesh);

结果几乎是完美的,除了看起来好像材料正在使用shading: THREE.FlatShading,如下所示:

虽然我期待一个人通常期望的默认外观shading: THREE.SmoothShading.我需要添加/更改以获得平滑的Lambert着色？

(如果有帮助,一个完整的实例是http://stemkoski.github.io/Three.js/Marching-Cubes.html,几何和网格是围绕250-280行创建的.)

我有一个始终设置为面向相机的平面几何体:

plane.lookAt(camera.position);

在更新循环中.我OrbitControls用来控制相机.旋转或缩放场景时,平面将继续按预期面向摄像机.

但是,在平移场景后,当飞机继续面向摄像机时,旋转摄像机似乎也会旋转平面,因此,例如,如果平面包含文本,文本可能会显示为旋转或甚至颠倒到观众.

怎么能迫使飞机与相机保持对齐？

jsFiddle的例子:http://jsfiddle.net/Stemkoski/ptVLD/

目标是在将鼠标悬停在网格上时将Three.Mesh名称显示为标签.我们如何在Three.js中做到这一点

有人可以提供示例代码吗？

在three.js中动画(纹理动画,移动物体,隐藏/显示对象......)的最佳选项是什么？你是否使用额外的lib.比如tween.js还是其他什么？谢谢.

在three.js中,我正在尝试创建一个纹理,其图像是从相机中查看的当前场景.使用CubeCamera创建类似的效果已有详细记录; 并且使用CubeCamera我创建了一个场景示例来说明我的目标:

http://stemkoski.github.com/Three.js/Camera-Texture-Almost.html

但是,我想使用常规相机(而不是CubeCamera)作为纹理.我怎么能这样做？

我正在尝试创建一个着色器以在Three.js中产生发光的光晕效果.我目前的尝试是在这里:http://stemkoski.github.io/Three.js/Shader-Halo.html

着色器代码目前是:

<script id="vertexShader" type="x-shader/x-vertex">
varying vec3 vNormal;
void main() 
{
    vNormal = normalize( normalMatrix * normal );
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<script id="fragmentShader" type="x-shader/x-vertex"> 
varying vec3 vNormal;
void main() 
{
    float intensity = pow( 0.7 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) ), 4.0 ); 
    gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;
}
</script>

只要对象保持在场景的中心,这就可以正常工作.在缩放或平移之后,光晕效果似乎分别改变强度或看起来不平衡.

我想我理解为什么这是数学上 - 在这段代码中,发光效果的强度是由网格法线向量的z坐标决定的,因为这是面向观察者的向量,所以我应该以某种方式在计算强度之前,将类似的变换应用于(0,0,1).

于是我到了

<script id="vertexShader" type="x-shader/x-vertex">
varying vec3 …

我试图使用Three.js将一个几何变形为另一个.这是我到目前为止所做的事情(请参阅http://stemkoski.github.io/Three.js/Morph-Geometries.html以获取实例).

我试图从一个小的多面体变形到一个更大的立方体(三角形和居中的中心).动画是通过着色器完成的.较小的多面体上的每个顶点都有两个相关的属性,即最终位置和最终的UV坐标.为了计算每个顶点的最终位置,我从原点通过较小的多面体的每个顶点进行了射线扫描,并找到了与较大立方体的交点.为了计算最终的UV值,我使用了重心坐标和较大立方体相交面顶点的UV值.

这导致了一次不可怕但不是很好的第一次尝试.由于(通常)较大立方体的顶点都不是较小多面体的任何顶点的最终位置,因此缺少立方体表面的大块.接下来我通过添加更多顶点来改进较小的多面体,如下所示:对于较大立方体的每个顶点,我向原点射线,并且每条射线与较小多面体的面相交,我移除了那个三角形面并添加了点交叉点和三个较小的面来替换它.现在变形更好(这是与上面链接的实例),但变形仍然没有填满立方体的整个体积.

我最好的猜测是,除了将较大立方体的顶点投影到较小的多面体上之外,我还需要投影边缘 - 如果A和B是由较大立方体上的边连接的顶点,则这些顶点的投影在较小的多面体上也应该通过边缘连接.但是,当然,投影边缘可能会跨越较小多面体网格中的多个预先存在的三角形,需要添加多个新顶点,重新化,等等.看来我实际需要的是一个算法计算两个三角形网格的共同细化.有没有人知道如上所述的这种算法和/或变形的示例(带代码)(在具有不同三角化的两个网格之间)？

当谈到在three.js制作天空盒时,我已经看到了两种不同的思想流派.假设我们有代码

var imagePrefix = "images/mountains-";
var directions  = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
var imageSuffix = ".jpg";
var skyGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );    

在这两种方法中,都会创建一个非常大的立方体并应用纹理.不同之处在于是否使用着色器.例如:

不使用着色器的材质:

var materialArray = [];
for (var i = 0; i < 6; i++)
    materialArray.push( new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
        side: THREE.BackSide
    }));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
scene.add( skyBox );

使用着色器的材质:

var imageURLs = [];
for …

使用Three.js,我编写了一个顶点着色器,根据渲染像素的屏幕的象限,为平面中的每个点着色.

// vertex shader
uniform float width;
uniform float height;
varying float x;
varying float y;
void main() 
{ 
    vec4 v = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    x = v.x; 
    y = v.y;
    gl_Position = v;
}

// fragment shader
varying float x;
varying float y;
void main() 
{
    gl_FragColor = vec4(x, y, 0.0, 1.0);
}  

jsFiddle的实例:http://jsfiddle.net/Stemkoski/ST4aM/

我想修改这个着色器,使其x在屏幕左侧等于0,在屏幕右侧y等于1 ,同样在顶部等于0,在底部等于1.我(错误地)认为,这将涉及改变的值x,并y以x = v.x / width和y …