javascript - Three.js 不渲染纹理

Question

我是 three.js 的新手，我觉得我的场景接近完成，但当我渲染时，我只得到空白的 Canvas 元素，我的控制台没有错误。为什么我的代码不渲染我的纹理？我已经非常密切地关注了文档，而且我只是被挂断了这篇文章。谢谢您的帮助。这是我的 js:

`var 相机、场景、渲染器、纹理、雾； var mesh, geometry, material, buffer;

        var start_time = Date.now();

        init();
        animate();

        function init() {

            var container = $('#clouds');

            // Bg gradient

            var canvas = document.createElement( 'canvas' );
            canvas.width = 32;
            canvas.height = window.innerHeight;

            var context = canvas.getContext( '2d' );

            var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
            gradient.addColorStop(0, "#1e4877");
            gradient.addColorStop(0.5, "#4584b4");

            context.fillStyle = gradient;
            context.fillRect(0, 0, canvas.width, canvas.height);

            container.css('background', 'url(' + canvas.toDataURL('image/png') + ')');
            container.css('background-size', '32px 100%');

            //

            camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 3000 );
            camera.position.z = 6000;

            scene = new THREE.Scene();

            geometry = new THREE.Geometry();

            var texture = new THREE.TextureLoader().load( '/media/cloud-element.png', animate);
            THREE.LinearMipMapNearestFilter;
            THREE.LinearMipMapLinearFilter;

            var fog = new THREE.Fog( 0x4584b4, - 100, 3000 );

            material = new THREE.ShaderMaterial( {

                uniforms: {

                    "map": { type: "t", value: texture },
                    "fogColor" : { type: "c", value: fog.color },
                    "fogNear" : { type: "f", value: fog.near },
                    "fogFar" : { type: "f", value: fog.far },

                },
                depthWrite: false,
                depthTest: false,
                transparent: true,
                color: 0xf2f2f2

            } );

            var plane = new THREE.Mesh( new THREE.PlaneGeometry( 64, 64 ) );

            for ( var i = 0; i < 8000; i++ ) {

                plane.position.x = Math.random() * 1000 - 500;
                plane.position.y = - Math.random() * Math.random() * 200 - 15;
                plane.position.z = i;
                plane.rotation.z = Math.random() * Math.PI;
                plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

                THREE.GeometryUtils.merge(geometry, plane);
            }

            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            mesh = new THREE.Mesh( geometry, material );
            mesh.position.z = - 8000;
            scene.add( mesh );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.append( renderer.domElement );

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize( event ) {

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

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );

            var position = ( ( Date.now() - start_time ) * 0.03 ) % 8000;

            camera.position.x += (camera.position.x ) * 0.01;
            camera.position.y += (camera.position.y ) * 0.01;
            camera.position.z = - position + 8000;

            renderer.render( scene, camera );

        }

    }`

Answer 1

您有几个警告，您应该首先解决这些警告。 color 不是 THREE.ShaderMaterial 的属性。 THREE.GeometryUtils.merge(geometry, plane); 已移动成为 Geometry 上的 API。等等等等

我已将您的代码剥离成一个可以在此处运行的简单片段(因为我们无权访问您的纹理文件)。

完全失去了我的改变:

• 我删除了您的初始 Canvas 。您可以稍后更换它。请注意，我将 { alpha: true } 添加到 WebGLRenderer 参数。这允许渲染器 Canvas 后面的任何内容都显示出来。
• 我知道你在用 new THREE.Mesh( new THREE.Plane(...) ) 做什么。只创建一堆平面网格可能更容易，尽管这也会创建一堆绘制调用。
• 我用基本颜色替换了你的着色器定义，只是为了让它工作。如果更新后的代码没有给您带来任何“惊喜”，我们可以解决您的纹理问题。我确实想指出，您可能不需要为此使用着色器。 THREE.MeshBasicMaterial 有一个 map 属性，它可以接受一个 THREE.Texture(由 THREE.TextureLoader 提供) .
• 请注意我是如何处理将几何体合并在一起的。更新平面的变换属性不会更新其顶点，这是 merge 使用的。相反，我创建了一个临时的 THREE.Geometry 对象来保存您的顶点，然后我将您的平面更新后的变换矩阵应用于它们。这“烘焙”了变换并允许 merge 接受重新定位的顶点。

除此之外，几乎是一样的。请查看并在您的代码中尝试这些技术。如果您仍然对纹理有疑问，请发表评论，我们会重新审视它们。

var camera, scene, renderer, texture, fog;
var mesh, geometry, material, buffer;

var start_time = Date.now();

init();
animate();

function init() {

  var container = $('#clouds');

  camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);
  camera.position.z = 6000;

  scene = new THREE.Scene();

  geometry = new THREE.Geometry();

  material = new THREE.MeshBasicMaterial({color: 0xf2f2f2, opacity: 0.5, transparent: true});

  var plane = new THREE.Mesh( new THREE.PlaneGeometry(64, 64) ),
    tempGeometry = new THREE.Geometry();

  for (var i = 0; i < 8000; i++) {

    plane.position.x = Math.random() * 1000 - 500;
    plane.position.y = -Math.random() * Math.random() * 200 - 15;
    plane.position.z = i;
    plane.rotation.z = Math.random() * Math.PI;
    plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
    // Warning: THREE.GeometryUtils: .merge() has been moved to Geometry. Use geometry.merge( geometry2, matrix, materialIndexOffset ) instead.
    //THREE.GeometryUtils.merge(geometry, plane);
    plane.updateMatrix();
    tempGeometry.copy(plane.geometry);
    tempGeometry.applyMatrix(plane.matrix);
    geometry.merge(tempGeometry);
  }

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  mesh = new THREE.Mesh(geometry, material);
  mesh.position.z = -8000;
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  container.append(renderer.domElement);

  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize(event) {

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

  renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

  requestAnimationFrame(animate);

  var position = ((Date.now() - start_time) * 0.03) % 8000;

  camera.position.x += (camera.position.x) * 0.01;
  camera.position.y += (camera.position.y) * 0.01;
  camera.position.z = -position + 8000;

  renderer.render(scene, camera);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://threejs.org/build/three.js"></script>
<div id="clouds" style="background: lightBlue;"></div>