Question

我正在使用three.js并尝试编写一个着色器来渲染除了半径之外的所有相同属性的多个球体。半径实时变化，我不确定改变单个球体半径的最有效方法是什么。

这是我到目前为止测试的内容。似乎我的统一变量radius实际上并没有影响球体的半径。

<!DOCTYPE html>
<html>
<title>Test Sphere</title>
<head>
</head>
<body>
<div id="test"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
    /**
     * Multiply each vertex by the
     * model-view matrix and the
     * projection matrix (both provided
     * by Three.js) to get a final
     * vertex position
     */
     uniform float radius;

    void main() {
      gl_Position = radius * projectionMatrix *
                    modelViewMatrix *
                    vec4(position,1.0);
    }

</script>

<script type="x-shader/x-vertex" id="fragmentShader">
    /**
     * Set the colour to a lovely pink.
     * Note that the color is a 4D Float
     * Vector, R,G,B and A and each part
     * runs from 0.0 to 1.0
     */
    void main() {
      gl_FragColor = vec4(1.0,  // R
                          0.0,  // G
                          1.0,  // B
                          1.0); // A
    }

</script>

<script>
var light;
var material;
var scene, camera;

var puthere = document.getElementById("test");
container = document.createElement( 'div' );
puthere.appendChild( container );

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 300;
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight )
container.appendChild( renderer.domElement );

var uniforms = {
    radius: { type: "f", value: 10.0 }
};

material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );

var geometry = new THREE.SphereGeometry( 1, 32, 32 );
sphere = new THREE.Mesh( geometry, material );
// material.needsUpdate = true;
scene.add( sphere );
scene.add( camera );
renderer.render( scene, camera );
setInterval( function() {
    console.log( "here" );
    sphere.material.uniforms.radius.value += 10;
    renderer.render( scene, camera );
}, 100);

</script>

</body>
</html>

Three.js具有多个对象的不同参数的相同着色器

0 个答案: