个人中心
gpt4 book ai didi

javascript - jsonloader 纹理未加载

转载 作者：行者123 更新时间：2023-12-03 12:34:15 25 4
gpt4 key购买 nike

我不是 blender 专家(我得到了这个模型)，我将它导出到JS，但纹理没有显示。当我删除纹理文件时，浏览器会给出一个错误，指出未找到“map.png”，因此它会加载，但不会显示它。

代码已上线:http://bensjitestsite.site50.net

但为了简单起见:

html:

<!doctype html>
<html lang="en">
<head>
  <title>Map Prolab</title>
  <meta charset="utf-8">
</head>
<body style="margin: 0;">

  <link rel="stylesheet" href="app.css" type="text/css" />

      <!-- JQUERY CDN FIRST OTHERWISE LOCAL FALLBACK -->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.3.min.js"></script>
    <script>window.jQuery || document.write('<script src="jquery-2.0.3.min.js">\x3C/script>')</script>

  <script src="js/three.min.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script src='js/CSS3DRenderer.js'></script>
  <script src="app.js"></script>
  <script src="addmarkers.js"></script>
  <script src="js/ColladaLoader.js"></script>


</body>
</html>

CSS:

body {
    background: #222;
    overflow:hidden;
}

js:

    // Set up the scene, camera, and renderer as global variables.
    var scene, camera, renderer, container, controls;

    init();
    animate();

    // Sets up the scene. BASIC THREEJS
    function init() {

      // Detecteerd op webGL mogelijk is, zoniet, laad een link ofzo, dan zien we wel, doe ik later wel

      // Create the scene and set the scene size. BASIC THREEJS
      scene = new THREE.Scene();
      var WIDTH = window.innerWidth,
          HEIGHT = window.innerHeight;

        //ik wil da in ne div, om dat later dan in te laden in de supercode e
        container = document.createElement( 'div' );
        document.body.appendChild( container );

      // Create a renderer and add it to the container. BASIIIC
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(WIDTH, HEIGHT);
      renderer.domElement.style.position = "relative";
      container.appendChild(renderer.domElement);

      // Create the camera
      camera = new THREE.PerspectiveCamera(55, WIDTH / HEIGHT, 1, 40000);
      scene.add(camera);
      camera.position.set(0,50,2500);
      camera.lookAt(scene.position);

      // Create an event listener that resizes the renderer with the browser window
      window.addEventListener('resize', function() {
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
        renderer.setSize(WIDTH, HEIGHT);
        camera.aspect = WIDTH / HEIGHT;
        camera.updateProjectionMatrix();
      });

      // Set the background color of the scene.
      renderer.setClearColorHex(0x222222, 1);

      // Create a light, set its position, and add it to the scene.
      var light = new THREE.PointLight(0xffffff);
      light.position.set(-100,200,100);
      scene.add(light);

      // Load in the map and add it to the scene, materials problem!
      var loader = new THREE.JSONLoader();
      loader.load( "models/3dkaart.js", function(geometry, materials){
          //LambertMaterial is correct (zie json file), material is de default, dus ie neemt de texture nie?
        var material = new THREE.MeshLambertMaterial(material);
        mesh = new THREE.Mesh(geometry, material);
          //ik wil men opject wat opschuiven
        mesh.position.set(-1, 1, 2);
        scene.add(mesh);
      });


      // Add OrbitControls voor cameramovement
      controls = new THREE.OrbitControls(camera, renderer.domElement);

        } // END FUNCTION INIT


/* --------------------------------------------------- */



/* ----------------------------------------------------------- */

    // Renders the scene + updater 
    function animate() {

      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      controls.update();

    }

json:

{

    "metadata" :
    {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.7 Exporter",
        "vertices"      : 3508,
        "faces"         : 3993,
        "normals"       : 2595,
        "colors"        : 0,
        "uvs"           : [1734],
        "materials"     : 7,
        "morphTargets"  : 0,
        "bones"         : 0
    },

    "scale" : 1.000000,

    "materials" : [ {
        "DbgColor" : 15658734,
        "DbgIndex" : 0,
        "DbgName" : "Material.002",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.10958866044266014, 0.1218598741570096, 0.06583377220978992],
        "colorDiffuse" : [0.10958866044266014, 0.1218598741570096, 0.06583377220978992],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [0.0, 0.0, 0.0],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 15597568,
        "DbgIndex" : 1,
        "DbgName" : "undefined_dummy_1",
        "vertexColors" : false
    },

    {
        "DbgColor" : 60928,
        "DbgIndex" : 2,
        "DbgName" : "Material.004",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.11392049959183481, 0.10457911647229068, 0.06844939691497975],
        "colorDiffuse" : [0.11392049959183481, 0.10457911647229068, 0.06844939691497975],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [0.0, 0.0, 0.0],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 238,
        "DbgIndex" : 3,
        "DbgName" : "Material.005",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.05598256075356245, 0.04765795540299944, 0.039384198775652024],
        "colorDiffuse" : [0.05598256075356245, 0.04765795540299944, 0.039384198775652024],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [0.0, 0.0, 0.0],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 15658496,
        "DbgIndex" : 4,
        "DbgName" : "undefined_dummy_4",
        "vertexColors" : false
    },

    {
        "DbgColor" : 61166,
        "DbgIndex" : 5,
        "DbgName" : "Material",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [0.0, 0.0, 0.0],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "map.png",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 15597806,
        "DbgIndex" : 6,
        "DbgName" : "Material.006",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [1.0, 1.0, 1.0],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    }],

    "vertices" : and then all the vertices below

所以，你可以在我给出的链接中看到结果。

感谢您的帮助!

最佳答案

在加载器回调中，您需要像这样创建网格:

mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

您正在使用该库的版本已近一年了。您最好更新到当前版本。所有的三个.js 包含文件也必须与当前版本一致。

三.js r.67

关于javascript - jsonloader 纹理未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23801437/

25 4 0
文章推荐： javascript - 无法将 html 内容发送到 Web 服务，出现未找到错误
文章推荐： javascript - map JavaScript API : How to determine the screen position of markers/objects
文章推荐： electron - 使用 Electron Builder 为 mac 构建时发生 "Unnotarized Developer ID"错误
文章推荐： electron - 是否可以在Electron中调用 native 进程？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com