Jsonloader纹理未加载
jsonloader texture not loading
我不是搅拌机专家(我得到了这个模型)，我把它导出到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>
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();
}
{
"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 ) );
您正在使用的库版本已经快一年了。您最好更新到当前版本。所有的three.js include文件也必须与当前版本一致。
three.js r.67
相关文章：
- 无法在obj+mtl文件中加载纹理
- 加载collada纹理数据(.jpg本身）时对其进行操作
- 加载 .dae 模型时不显示纹理
- 加载 collada 纹理时如何调用函数?(三.js）
- 纹理未加载;浏览器报告同源安全错误
- p5.js 将纹理加载到 2D 椭圆上
- 立方体纹理加载器不加载天空盒在三个.js
- 使用三.js纹理的进度加载
- 如何使用 mtl 文件和纹理加载 obj 文件
- 使用 Three.js THREE.textureLoader 预加载多个纹理
- JavaScript 为 WebGL 加载纹理
- 如何更改巴比伦的文件夹.场景加载器将搜索纹理
- Three.js-Can't加载纹理
- 使用ShaderMaterial为自定义几何体加载纹理在Three.js中不起作用
- 可以按特定顺序加载纹理吗
- 如何用three.js从MySql数据库加载纹理
- Javascript/PixiJS不加载纹理
- 从代码而不是MTL加载纹理
- 谷歌Vr -无法加载纹理
- 在ThreeJS中预加载纹理和图像
