Question

我是初学者3D建模和three.js

我对three.js有一些疑问

我在本页https://threejs.org/examples/webgl_loader_obj_mtl.html

进行了三次.js obj / mtl加载器教程

效果很好。我试图将obj，mtl文件改为我自己的文件。

但Chrome浏览器只返回黑色窗口...请帮帮我

这是我的情况

我没有控制台错误这是我的捕捉图像 Image link
我之前说过，当使用threejs.org样本数据运行浏览器时（obj，mtl）它可以工作..
我设置了灯光#fffff，我在所有资产初始化后都进行了渲染。

这是我的代码......

<!doctype html>
<html lang="en">
<head>
  <title>Three js pratice</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
  <style>
      body {
        font-family: Monospace;
        background-color: #fff;
        color: #fff;
        margin: 0px;
        overflow: hidden;
      }

      #info {
        color: #fff;
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 100;
        display:block;
      }
  </style>


</head>
<body style="margin: 0;">
 
  <div id="info">
    <a target="_blank">three.js</a> - OBJLoader + MTLLoader
  </div>
  <script src="js/three.js"></script>

  <script src="js/loaders/DDSLoader.js"></script>
  <script src="js/loaders/MTLLoader.js"></script>
  <script src="js/loaders/OBJLoader.js"></script>

  <script src="js/Detector.js"></script>
  <script src="js/libs/stats.min.js"></script>

  <script>

    var container, stats
    
    var camera, scene, renderer
    
    var mouseX = 0, mouseY = 0
    
    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2
    
    init();
    animate();

    // Sets up the scene.
    function init() {

      // scene
       scene = new THREE.Scene();

       container = document.createElement( 'div' );
       document.body.appendChild( container ); 
     
       camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
       camera.position.set(0,0,2000);
       scene.add(camera);
      
       var ambient = new THREE.AmbientLight( 0xFFFFFF );
       scene.add( ambient );
 
       var directionalLight = new THREE.DirectionalLight( 0xffeedd );
       directionalLight.position.set( 0, 0, 1 ).normalize();
       scene.add( directionalLight );

      var onProgress = function ( xhr ) {
			 if ( xhr.lengthComputable ) {
			 	  var percentComplete = xhr.loaded / xhr.total * 100;
			   	console.log( Math.round(percentComplete, 2) + '% downloaded' );
		    }
		  };

      var onError = function ( xhr ) { };
	  
      THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

			var mtlLoader = new THREE.MTLLoader();
			mtlLoader.setPath( 'obj/' );
	//		mtlLoader.load( 'male02.mtl', function( materials ) {
          mtlLoader.load( '3DScan999999.mtl', function( materials ) {


				materials.preload();

				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials( materials );
				objLoader.setPath( 'obj/' );
		//		objLoader.load( 'male02.obj', function ( object ) {
        objLoader.load( '3DScan999999.obj', function ( object ) {

					object.position.y = -95
          console.log("log : " +  object.position.y);
					scene.add( object );

				}, onProgress, onError );

			});

    
      renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      container.appendChild( renderer.domElement );

      document.addEventListener( 'mousemove', onDocumentMouseMove, false );
     
      window.addEventListener( 'resize', onWindowResize, false );
    }


      function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

      }

      function onDocumentMouseMove( event ) {

        mouseX = ( event.clientX - windowHalfX ) ;
        mouseY = ( event.clientY - windowHalfY );

      }

      //

      function animate() {

        requestAnimationFrame( animate );
        render();

      }

      function render() {

        camera.position.x += ( mouseX - camera.position.x ) * .05;
        camera.position.y += ( - mouseY - camera.position.y ) * .05;

        camera.lookAt( scene.position );
        renderer.render( scene, camera );

      }

  </script>

</body>
</html>

这是mtl文件。＃ #fusionsdk ＃＃文件“ttttttttttest.obj”的材料＃

newmtl default
   illum 1
   d 1
   Ns 6
   sharpness 60
   Ni 1

newmtl m1
   illum 1
   d 1
   Ns 6
   sharpness 60
   Ni 1
   map_Kd ttttttttttestImage1.png

# end of file

当然我有.png图片。

请有人帮帮我..

*附加嘿伙计们，我测试过使用另一个图像（更大），我在黑色窗口看到了一个非常小的物体。我认为因为对象的大小......有人帮助我，

three.js obj / mtl loader返回黑色

0 个答案: