Question

加载了g.png成功，但它没有渲染。

是否未加载但先渲染？

    var geometry = new THREE.BoxGeometry( 2, 1, 1 );

    material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("g.png") });
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

完整代码

https://gist.github.com/EasonWang01/410046ababc1af4f7f2db4b294b591ca

Answer 1

我根据您的代码编写了sample，希望对您有帮助。

<html>
<head>
  <title>My first Three.js app</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"> </script>
<script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  var renderer = new THREE.WebGLRenderer({ alpha: false });
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  var geometry1 = new THREE.BoxGeometry( 12, 1, 1 );
  var material1 = new THREE.MeshBasicMaterial( { color: 0x00FFCC } );
  var cube1 = new THREE.Mesh( geometry1, material1 );

  scene.add( cube1 );
  var geometry2 = new THREE.BoxGeometry( 10, 1, 1 );
  var material2 = new THREE.MeshBasicMaterial( { color: 0xCCFF33 } );
  var cube2 = new THREE.Mesh( geometry2, material2 );

  scene.add( cube2 );
  var geometry3 = new THREE.CircleBufferGeometry( 3, 32 );
  var material3 = new THREE.MeshBasicMaterial( { color: 0xCCFFCC     } );
  var circle3 = new THREE.Mesh( geometry3, material3 );
  scene.add( circle3 );
  var geometry4 = new THREE.BoxBufferGeometry( 10, 1, 1 );
  material4 = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("img/g.png") });
  var cube4 = new THREE.Mesh( geometry4, material4 );
  scene.add( cube4 );
  var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);

  var materials = [];
  cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
  cube.position.y = 150;
  scene.add(cube);

  var light = new THREE.AmbientLight( 0x404040 ); // soft white light
  scene.add( light );
  camera.position.z = 5;
  var geometry = new THREE.BoxGeometry( 2, 1, 1 );

  material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("img/g.png") });
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );
  var render = function () {
    requestAnimationFrame( render );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube1.rotation.x += 0.02;
    cube1.rotation.y += 0.02;
    cube2.rotation.x += 0.03;
    cube2.rotation.y += 0.03;
    renderer.render(scene, camera);
  };
  setTimeout(() => {render();},500)
</script>
</body>
</html>

Three.js加载图像作为纹理不渲染

1 个答案: