在three.js中固定位置着色器背景？

Question

我想在three.js中有一個像素着色器作為背景，我注意到大多數只是將其實現為2d平面。 但是我仍然想使用OrbitContols旋轉相機，但不影響平面的位置。 換句話說，我只是希望將其作為場景中的固定背景。

有沒有一種方法可以將平面固定為2d背景（也許在彼此頂部放置兩個單獨的畫布three.js？），或者有其他方法可以使該平面使用3d？

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

var plane = new THREE.Mesh(geometry, planeMaterial);
plane.position.z = -500;
scene.add(plane);

這是我的意思的示例： http : //jsfiddle.net/5zTz3/2/

Answer 1

使用單獨的相機將着色器材質放在單獨的場景中。 然后調用renderer.render(shadertoyScene, shadertoyCamera); 其次是renderer.render(regularScene, orbitControlCamera); 。

 'use strict'; /* global THREE */ function main() { const canvas = document.querySelector('#c'); const renderer = new THREE.WebGLRenderer({canvas}); renderer.autoClear = false; const shadertoyCamera = new THREE.OrthographicCamera( -1, // left 1, // right 1, // top -1, // bottom -1, // near, 0, // far ); const shadertoyScene = new THREE.Scene(); const plane = new THREE.PlaneBufferGeometry(2, 2); const fragmentShader = ` #include <common> uniform vec3 iResolution; uniform float iTime; // By iq: https://www.shadertoy.com/user/iq // license: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. void mainImage( out vec4 fragColor, in vec2 fragCoord ) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; // Time varying pixel color vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx*40.0+vec3(0,2,4)); // Output to screen fragColor = vec4(col,1.0); } void main() { mainImage(gl_FragColor, gl_FragCoord.xy); } `; const uniforms = { iTime: { value: 0 }, iResolution: { value: new THREE.Vector3() }, }; const material = new THREE.ShaderMaterial({ fragmentShader, uniforms, }); shadertoyScene.add(new THREE.Mesh(plane, material)); const fov = 75; const aspect = 2; // the canvas default const near = 0.1; const far = 100; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.z = 3; const controls = new THREE.OrbitControls(camera, canvas); controls.target.set(0, 0, 0); controls.update(); const scene = new THREE.Scene(); { const color = 0xFFFFFF; const intensity = 1; const light = new THREE.DirectionalLight(color, intensity); light.position.set(-1, 2, 4); scene.add(light); } const boxWidth = 1; const boxHeight = 1; const boxDepth = 1; const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth); function makeInstance(geometry, color, x) { const material = new THREE.MeshPhongMaterial({color}); const cube = new THREE.Mesh(geometry, material); scene.add(cube); cube.position.x = x; return cube; } const cubes = [ makeInstance(geometry, 0x44aa88, 0), makeInstance(geometry, 0x8844aa, -2), makeInstance(geometry, 0xaa8844, 2), ]; function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } function render(time) { time *= 0.001; // convert to seconds if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } const canvas = renderer.domElement; uniforms.iResolution.value.set(canvas.width, canvas.height, 1); uniforms.iTime.value = time; renderer.render(shadertoyScene, shadertoyCamera); renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); } main(); 

 body { margin: 0; } #c { width: 100vw; height: 100vh; display: block; } 

 <canvas id="c"></canvas> <script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script> <script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/js/controls/OrbitControls.js"></script>