Question

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

`var camera，scene，renderer，texture，fog; 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。等等。

我已将您的代码剥离为一个可在此处运行的简单代码段（因为我们无法访问您的纹理文件）。

完全失去了对我改变的收获：

我删除了你的初始画布。您可以稍后再替换它。请注意，我在{ alpha: true }参数中添加了WebGLRenderer。这允许渲染器画布后面的任何内容显示。
我看到您使用new THREE.Mesh( new THREE.Plane(...) )做了什么。创建一堆平面网格物体可能更容易，但这确实会创建一堆绘制调用。
我用基本颜色替换了着色器定义，以使其正常工作。如果这个更新的代码没有给你任何＆＃34; aha时刻，我们可以解决你的纹理问题。＆＃34;我想指出你可能不需要这个着色器。 THREE.MeshBasicMaterial有一个map属性，可以接受THREE.Texture（由THREE.TextureLoader提供）。
请注意我如何处理将几何图形合并在一起。更新平面的变换属性不会更新其顶点，这是merge使用的顶点。相反，我创建了一个临时THREE.Geometry对象来保存您的顶点，然后我将平面的更新转换矩阵应用于它们。这＆＃34;烘焙＆＃34;转换并允许merge接收重新定位的顶点。

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

＆＃13;

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);

}

＆＃13;

<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>

＆＃13;

Three.js无法渲染纹理

1 个答案: