Question

我尝试在three.js中使用ShaderMaterial将图像放在球体上。但我只通过下面的代码获得黑色球体。有什么问题？

main.js

(function(){
  var width = window.innerWidth;
  var height = window.innerHeight;

  //scene
  var scene = new THREE.Scene();

  //geo
  var geometry = new THREE.SphereGeometry( 5, 60, 40 );
  geometry.scale( -1, 1, 1);

  //mesh
  var textureLoader = new THREE.TextureLoader();
  var texture = textureLoader.load('images/image.jpeg');

  var uniforms = {
    color: { type: "3v", value: new THREE.Vector3(0.3, 1.0, 1.0) },
    texture: { type: "t", value: 0, texture: texture },
  };


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

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

  //camera
  var camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);
  camera.position.set(0,0,30);
  camera.lookAt(mesh.position);

  //render

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width,height);
  renderer.setClearColor(0xffffff);
  document.getElementById('stage').appendChild(renderer.domElement);
  renderer.render(scene,camera);

  function render(){
    requestAnimationFrame(render);
    renderer.render(scene,camera);
  }

  render();


})();

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div id="stage"></div>
    <script src="lib/three.min.js"></script>
    <script src="lib/OrbitControls.js"></script>
    <script type="x-shader/x-vertex" id="vertexShader">
        varying vec2 vUv;

        void main(){
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }

    </script>
    <script type="x-shader/x-fragment" id="fragmentShader">
        uniform vec3 color;
        uniform sampler2D texture;
        varying vec2 vUv;

        void main(){
            vec4 samplerColor = texture2D(texture, vUv);
            gl_FragColor = vec4(1.0) * samplerColor;
        }
    </script>
    <script src="main.js"></script>
</body>
</html>

当我尝试使用如下的MeshBasicMaterial时，没关系。所以我想这不是异步加载的问题..

var material = new THREE.MeshBasicMaterial( {
    map: texture
} );

请帮帮我

使用三个.js中的ShaderMaterial将图像放在球体上

0 个答案: