我不是搅拌机专家（我有这个型号），我将它导出到JS，但纹理没有显示。当我删除纹理文件时，浏览器会出现错误，即＆＃39; map.png＆＃39;没有找到，所以它加载，但它没有显示它。
代码在线：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
所以，你可以在我给出的链接中看到结果。
感谢您的帮助！
答案 0 :(得分：1)
在你的加载器回调中，你需要像这样创建网格：
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
您正在使用近一年的图书馆版本。您最好更新到当前版本。你的所有three.js包含文件也必须与当前版本保持一致。
three.js r.67