纹理未加载到环形 3D 模型中。但它适用于其他一些对象。没有编译错误。我正确设置了所有所有光照条件。但 3D 模型颜色为灰色/黑色。为其他对象加载了纹理对象正确。3d 对象文件格式是 .obj，我没有将 mtl 文件加载到我的代码中。 mtlobjloader 不在 Threejs.org 中，有一些方法可以加载 mtl 文件并将纹理映射到对象。 请帮助我。
在此处输入代码
<html>
<head>
<title> Test Three.js</title>
<style type="text/css">
BODY
{
margin: 0;
}
canvas
{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<div>
<p>Color:
<button class="jscolor{onFineChange:'onClick(this)',valueElement:null,value:'66ccff'}"
style="width:50px; height:20px;"></button>
</p>
<p>Object:
<button style="width:50px; height:20px;" id="object"></button>
</p>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="three.min.js"></script>
<script src="TrackballControls.js"></script>
<script src="jscolor.js"></script>
<script src="AmbientLight.js"></script>
<script src="SpotLight.js"></script>">
<script src="JSONLoader.js"></script>">
<script src="ObjectLoader.js"></script>">
<script src="OBJLoader.js"></script>">
<script src="MTLLoader.js"></script>">
<script src="Material.js"></script>">
<script src="MeshPhongMaterial.js"></script>">
<script>
function onClick(jscolor) {
cube.material.color = new THREE.Color('#'+jscolor);
cube.material.needsUpdate = true;
};
var onClicked=function (){
scene.remove(cube);
var material1 = new THREE.LineBasicMaterial({
color: 'red'
});
var geometry1 = new THREE.Geometry();
geometry1.vertices.push(
new THREE.Vector3( -10, 0, 0 ),
new THREE.Vector3( 0, 10, 0 ),
new THREE.Vector3( 10, 0, 0 )
);
var cube1 = new THREE.Line( geometry1, material1 );
scene.add( cube1);
};
$('#object').click(onClicked);
var scene =new THREE.Scene();
var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
var controls =new THREE.TrackballControls(camera);
controls.addEventListener('change',render);
var renderer = new THREE.WebGLRenderer( { alpha: true });
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
/*var material = new THREE.MeshLambertMaterial({color:'red'});
var geometry=new THREE.CubeGeometry(100,100,100);
var cube=new THREE.Mesh(geometry,material);
scene.add(cube);*/
camera.position.z=500;
var light = new THREE.AmbientLight( 0x404040 );
light.intensity = 0;
light.position.z=10;
light.position.y=10; // soft white light
scene.add( light );
// }
//init();
/* var loader = new THREE.JSONLoader();
loader.load( 'ring.json', function ( geometry ) {
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
mesh.position.x =500;
mesh.position.y =100;
mesh.position.z =500;
scene.add( mesh );
}); *//*
var loader = new THREE.ObjectLoader();
loader.load("ring.json",function ( obj ) {
THREE.ImageUtils.crossOrigin = '';
var texture = THREE.TextureLoader("images.jpg");
//obj.map= texture;
obj.scale.set (10,10,10);
obj.traverse( function( child ) {
if ( child instanceof THREE.Mesh ) {
child.geometry.computeVertexNormals();
child.material.map=texture;
}
} );
scene.add( obj );
});*/
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
// You can set the texture properties in this function.
// The string has to be the path to your texture file.
loader.load( 'brick_bump.jpg', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
// I wanted a nearest neighbour filtering for my low-poly character,
// so that every pixel is crips and sharp. You can delete this lines
// if have a larger texture and want a smooth linear filter.
// texture.magFilter = THREE.NearestFilter;
//texture.minFilter = THREE.NearestMipMapLinearFilter;
} );
var loader = new THREE.OBJLoader(manager);
/*var Mloader= new THREE.MTLLoader(manager);
Mloader.load('ring.mtl',function(object){
object.traverse( function ( child ) {
if (child.material instanceof THREE.MeshPhongMaterial ) {
child.material.map = texture;
}
} );
scene.add( object );
});*/
// As soon as the OBJ has been loaded this function looks for a mesh
// inside the data and applies the texture to it.
loader.load( 'ring1.obj', function ( event ) {
var object = event;
/*for ( var i = 0, l = object.children.length; i < l; i ++ ) {
object.children[ i ].material.map = texture;
console.log("rgr"+ object);
}*/
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
console.log("rgr"+ object.children);
}
} );
// My initial model was too small, so I scaled it upwards.
object.scale = new THREE.Vector3( 25, 25, 25 );
// You can change the position of the object, so that it is not
// centered in the view and leaves some space for overlay text.
object.position.y -= 2.5;
scene.add( object );
});
function render(){
renderer.render(scene,camera);
}
function animate(){
requestAnimationFrame(animate);
controls.update();
}
animate();
</script>
</body>
</html>
最佳答案
首先我会检查ring.obj 文件。您需要验证ring.obj 文件是否正在导出所有顶点上的UV 值。 UV 值将纹理上的点分配给网格上的特定点。例如。它们定义纹理如何覆盖在表面上。如果您无法控制ring.obj导出过程来保证其质量，那么堆栈上有一个关于在加载时生成UV的对话:
THREE.js generate UV coordinate
但是如果网格体作者有特定的纹理 anchor ，您的情况可能会有所不同。
这可能不是问题，但由于纹理适用于其他网格，我认为环形网格存在问题。
关于javascript - 纹理未加载到 3D 对象(映射)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36612750/