【问题标题】:Loading textures with JSONloader使用 JSONloader 加载纹理
【发布时间】:2013-07-25 22:52:38
【问题描述】:

我是新手,我想我错过了一些东西。
有人可以检查一下吗?
HTML 页面:http://xalien95.altervista.org/pkmnxy_engine/alisopoli.html
模型和纹理:http://xalien95.altervista.org/pkmnxy_engine/alisopoli/
我可以看到模型(颜色怪异),但看不到纹理(它是具有多种材料的网格)。

提前致谢!

编辑: 我尝试了所有材料类型:

  • 三.MeshBasicMaterial
  • THREE.MeshDepthMaterial
  • 三.MeshLambertMaterial
  • THREE.MeshNormalMaterial
  • 三.MeshPhongMaterial

但是没有人工作,所以我想我错过了一些东西(或者材料路径不同)。 这是脚本:

var camera, scene, renderer, mesh, loader;

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.z = 1000;

            scene = new THREE.Scene();

            loader = new THREE.JSONLoader();

            loader.load( "./alisopoli/alisopoli.js", function( geometry, materials ) {
                var faceMaterial = new THREE.MeshPhongMaterial( materials );
                mesh = new THREE.Mesh( geometry, faceMaterial );
                mesh.scale.set( 100, 100, 100 );
                mesh.position.y = -150;
                mesh.position.x = 0;
                mesh.rotation.x = 60;
                scene.add( mesh );
            } );


            var ambientLight = new THREE.AmbientLight(0x555555);
            scene.add(ambientLight);

            //var directionalLight = new THREE.DirectionalLight(0xffffff);
            //directionalLight.position.set(1, 1, 1).normalize();
            //scene.add(directionalLight);

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

            document.body.appendChild( renderer.domElement );

        }

        function animate() {

            requestAnimationFrame( animate );

            //mesh.rotation.y += 0.005;

            renderer.render( scene, camera );
        }

提前致谢!

【问题讨论】:

  • var faceMaterial = new THREE.MeshFaceMaterial( materials ); 此外,出口商似乎为每种材料分配了一个lightMap。将它们设置为null。如果你仍然有问题,从一个更简单的项目开始,直到你让它工作。尝试提出对其他人有帮助的问题。
  • @WestLangley 谢谢!有用!现在我遇到了 THREE.DoubleSide 和纹理的 alpha 通道的问题。我尝试添加faceMaterial.side = THREE.DoubleSide;,但它不起作用。再次感谢你:)

标签: json three.js textures


【解决方案1】:

奇怪的颜色是因为您在加载期间为每个网格分配了“MeshNormalMaterial”。您应该检查 three.js json 加载器示例或以某种方式获取正确的材料,而不是将 MeshNormalMaterials 分配给子网格

【讨论】:

  • 我不知道该怎么做;我尝试在其他示例中进行搜索,并得到了这个var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture( '1.png' ), ambient: 0x999999, color: 0xffffff, specular: 0xffffff, shininess: 25, morphTargets: true } );。我该怎么办?感谢您的快速回复
猜你喜欢
  • 2012-09-15
  • 1970-01-01
  • 2013-01-30
  • 2017-04-19
  • 2014-07-16
  • 2013-04-09
  • 2016-06-15
  • 1970-01-01
  • 2021-02-24
相关资源
最近更新 更多