首页 > ThreeJs教程 > 如何更新场景
此章节介绍:

    如何更新场景

    默认情况下,所有对象都会自动更新它们的矩阵(如果它们已添加到场景中)


    const object = new THREE.Object3D();
    scene.add( object );

    或者它们是已添加到场景中的另一个对象的子节点:

    const object1 = new THREE.Object3D();
    const object2 = new THREE.Object3D();
    object1.add( object2 );
    scene.add( object1 ); //object1 和 object2 会自动更新它们的矩阵


    但是,如果你知道对象将是静态的,则可以禁用此选项并在需要时手动更新转换矩阵。


    object.matrixAutoUpdate  = false;
    object.updateMatrix();


    BufferGeometry

    BufferGeometries 将信息(例如顶点位置,面索引,法线,颜色,uv和任何自定义属性)存储在buffers —— 也就是, typed arrays. 这使得它们通常比标准Geometries更快,缺点是更难用。

    关于更新BufferGeometries,最重要的是理解你不能调整 buffers 大小(这种操作开销很大,相当于创建了个新的geometry)。 但你可以更新 buffers的内容。

    这意味着如果你知道BufferGeometry的一个属性会增长,比如顶点的数量, 你必须预先分配足够大的buffer来容纳可能创建的任何新顶点。 当然,这也意味着BufferGeometry将有一个最大大小 —— 无法创建一个可以高效地无限扩展的BufferGeometry。

    我们以在渲染时扩展的line来示例。我们将分配可容纳500个顶点的空间但起初仅绘制2个,使用 在500个顶点的缓冲区中,但首先只使用 BufferGeometry.drawRange


    const MAX_POINTS = 500;
    // geometry
    const geometry = new THREE.BufferGeometry();
    // attributes
    const positions = new Float32Array( MAX_POINTS * 3 ); 
    // 3 vertices per point
    geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
    // draw range
    const drawCount = 2; 
    // draw the first 2 points, only
    geometry.setDrawRange( 0, drawCount );
    // material
    const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
    // lineconst 
    line = new THREE.Line( geometry,  material );
    scene.add( line );


    然后我们随机增加顶点到line中,以这样的一种方式:


    const positions = line.geometry.attributes.position.array;
    
    let x, y, z, index;
    x = y = z = index = 0;
    
    for ( let i = 0, l = MAX_POINTS; i < l; i ++ ) {
    
        positions[ index ++ ] = x;
        positions[ index ++ ] = y;
        positions[ index ++ ] = z;
    
        x += ( Math.random() - 0.5 ) * 30;
        y += ( Math.random() - 0.5 ) * 30;
        z += ( Math.random() - 0.5 ) * 30;
    
    }


    如果要更改第一次渲染后渲染的点数,执行以下操作:


    line.geometry.setDrawRange( 0, newValue );


    如果要在第一次渲染后更改position数值,则需要像这样设置needsUpdate标志:


    line.geometry.attributes.position.needsUpdate = true; // 需要加在第一次渲染之后


    这个fiddle展示了一个你可以参考的运动的line。

    例子

    WebGL / custom / attributes
    WebGL / buffergeometry / custom / attributes / particles

    材质(Materials)

    所有uniforms值都可以自由改变(比如 colors, textures, opacity 等等),这些数值在每帧都发给shader。

    GL状态相关参数也可以随时改变(depthTest, blending, polygonOffset 等)。

    在运行时无法轻松更改以下属性(一旦material被渲染了一次):

    uniforms的数量和类型

    是否存在

    • texture
    • fog
    • vertex colors
    • morphing
    • shadow map
    • alpha test

    这些变化需要建立新的shader程序。你需要设置


    material.needsUpdate = true


    请记住,这可能会非常缓慢并导致帧率的波动。(特别是在Windows上,因为shader编译在directx中比opengl慢)。

    为了获得更流畅的体验,您可以通过“虚拟”值(如零强度光,白色纹理或零密度雾)在一定程度上模拟这些功能的变化。

    您可以自由更改用于几何块的材质,但是无法更改对象如何划分为块(根据面材料)。

    如果你需要在运行时使用不同的材料配置:

    如果材料/块的数量很少,您可以事先预先划分物体(例如,人的头发/脸部/身体/上衣/裤子,汽车的前部/侧面/顶部/玻璃/轮胎/内部)。

    如果数量很大(例如,每个面可能有所不同),请考虑不同的解决方案,例如使用属性/纹理来驱动不同的每个面部外观。

    例子

    WebGL / materials / car
    WebGL / webgl_postprocessing / dof

    纹理(Textures)

    如果更改了图像,画布,视频和数据纹理,则需要设置以下标志:


    texture.needsUpdate = true;


    渲染对象就会自动更新。

    例子

    WebGL / materials / video
    WebGL / rtt

    相机(Cameras)

    相机的位置和目标会自动更新。 如果你需要改变

    • fov
    • aspect
    • near
    • far

    那么你需要重新计算投影矩阵:


    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();