Threejs渲染

Question

我有这个渲染，它改编自glsl沙箱。我已经尝试并努力做到了这一点，但目前除了一个问题之外，它的渲染效果很好。代码如下：

    <canvas class="glslCanvas" id="canvas" width="500px" height="100%"></canvas>
<style>
    .glslCanvas {
  top: 0;
  left: 0;
  height: 100%;
  
  z-index: -1;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>
<script>
    "use strict";
var CustomScene = /** @class */function () {
  function CustomScene() {
  }
  CustomScene.prototype.init = function (canvas) {
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xe3e3e3);
    this.light = new THREE.SpotLight(0xffffff, 1);
    
    var fov = 90;
    var aspect = (window.innerWidth) / window.innerHeight;
    var near = 1;
    var far = 100;
    this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    this.geometry = new THREE.PlaneBufferGeometry(30, 10);
    this.material = new THREE.ShaderMaterial({
      vertexShader: "precision mediump float;\nvarying vec2 vUv;\n                     \nvoid main() {\nvUv = uv;\ngl_Position = projectionMatrix * modelViewMatrix *    vec4(position, 1.0);\n}",
      fragmentShader: "\n#ifdef GL_ES\n precision mediump float;\n#endif\n\nuniform float uTime;\nuniform vec2 uResolution;\n\nvoid main( void ) \n{\n\tvec2 p = ( gl_FragCoord.xy / uResolution.xy ) * 1.8 - 1.0;\n\t\n\tvec3 c = vec3( 0.0 );\n\t\n\tfloat amplitude = 0.15; \n\tfloat glowT = sin(uTime) * 0.5 + 0.5;\n\tfloat glowFactor = mix( 0.05, 0.2, glowT );\n\tc += vec3(0.05, 0.02, 0.01) * ( glowFactor * abs( 1.0 / sin(p.x + sin( p.y + uTime ) * amplitude ) ));\n\tc += vec3(0.05, 0.02, 0.01) * ( glowFactor * abs( 1.0 / sin(p.x + sin( p.y + uTime+1.00 ) * amplitude+0.1 ) ));\n\tc += vec3(0.05, 0.02, 0.01) * ( glowFactor * abs( 1.0 / sin(p.x + sin( p.y + uTime+2.00 ) * amplitude+0.2 )));\n\tc += vec3(0.05, 0.02, 0.01) * ( glowFactor * abs( 1.0 / sin(p.x + sin( p.y + uTime+3.00 ) * amplitude+0.3 )));\n\tc += vec3(0.05, 0.02, 0.01) * ( glowFactor * abs( 1.0 / sin(p.x + sin( p.y + uTime+4.00 ) * amplitude+0.4 )));\n\n\n\tc += vec3(0.05, 0.02, 0.01) * ( glowFactor * abs( 1.0 / sin(p.x + sin( p.y + uTime+5.00 ) * amplitude+0.5 )));\n\n\n\n\tgl_FragColor = vec4( c, 0.2 );\n}",
      uniforms: {
        uTime: { value: 0.0 },
        uResolution: { value: { x: window.innerWidth * 1.2, y: window.innerHeight } },
        uMouse: { value: { x: 0, y: 0 } },
        uColor: { value: new THREE.Color(0xffffff) } } });


    this.mesh = new THREE.Mesh(this.geometry, this.material);
    this.renderer = new THREE.WebGLRenderer({
      canvas: canvas });

    this.renderer.setClearColor(0xffffff, 1);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth , window.innerHeight);
    this.scene.add(this.camera);
    this.scene.add(this.mesh);
    this.scene.add(this.light);
    this.mesh.position.set(0, 0, 0);
    this.camera.position.set(0, 0, 1);
    this.light.position.set(0, 0, 10);
    this.light.lookAt(this.mesh.position);
    this.camera.lookAt(this.mesh.position);
    this.clock = new THREE.Clock();
    this.addEvents();
  };
  CustomScene.prototype.run = function () {
    window.requestAnimationFrame(this.run.bind(this));
    this.material.uniforms.uTime.value = this.clock.getElapsedTime();
    this.renderer.render(this.scene, this.camera);
  };
  CustomScene.prototype.addEvents = function () {
    window.addEventListener("resize", this.onResize.bind(this), false);
  };
  CustomScene.prototype.onResize = function () {
    this.material.uniforms.uResolution = {
      value: { x: window.innerWidth, y: window.innerHeight } };

    this.camera.aspect = (window.innerWidth) / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
  };
  return CustomScene;
}();
var scene = new CustomScene();
scene.init(document.getElementById("canvas"));
scene.run();

</script>

这非常有效，但在移动设备和大屏幕上/调整大小时，它会重复。我做错了什么才会发生这样的事情？

最好的解决方案是只出现一个螺旋，目前似乎出现了两个(有时是3个)。

相同的

Answer 1

看起来您将画布的宽度设置为500px，而将渲染器和制服设置为window.innerWidth。为了使渲染器正确渲染，需要与渲染器的渲染画布具有相同的尺寸(例如)：

renderer.setSize(500, window.innerHeight);

确保你也给了制服正确的尺寸。