Javascript 纹理没有'；t加载到三维对象（映射）
纹理未加载到环形3d模型。但它将适用于其他一些对象。没有编译错误。我正确设置了“全光”条件。但3d模型颜色为灰色/黑色。纹理已正确加载到其他对象。3d对象文件格式为.obj，我没有将mtl文件加载到代码中。mtlobjloader不在threejs.org中，有一些方法可以加载mtl文件并将纹理映射到对象。 请帮帮我Javascript 纹理没有'；t加载到三维对象（映射）,javascript,three.js,Javascript,Three.js,纹理未加载到环形3d模型。但它将适用于其他一些对象。没有编译错误。我正确设置了“全光”条件。但3d模型颜色为灰色/黑色。纹理已正确加载到其他对象。3d对象文件格式为.obj，我没有将mtl文件加载到代码中。mtlobjloader不在threejs.org中，有一些方法可以加载mtl文件并将纹理映射到对象。 请帮帮我 在此处输入代码 <html> <head> <title> Test Three.js</title> <style type
在此处输入代码<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>
测试3.js
身体
{
保证金：0；
}
帆布
{
宽度：100%；
身高：100%；
}
颜色：
对象：
">
">
">
">
">
">
">
函数onClick（jscolor）{
cube.material.color=新的三种颜色（'#'+jscolor）；
cube.material.needsUpdate=true；
};
var onClicked=函数（）{
场景。移除（立方体）；
var material1=新的三线基本材料({
颜色：“红色”
});
var geometry1=新的3.Geometry（）；
geometry1.vertices.push(
新的三矢量3（-10,0,0），
新的三个矢量3（0，10，0），
新三，矢量3（10，0，0）
);
var cube1=新的三线（几何1，材料1）；
场景。添加（立方体1）；
};
$（“#对象”）。单击（再次单击）；
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（45，窗内宽/窗内高，0.11000）；
var控制=新的三个轨迹球控制（摄像头）；
控件。addEventListener（'change'，render）；
var renderer=new THREE.WebGLRenderer（{alpha:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
/*var material=new THREE.MeshLambertMaterial（{color:'red'}）；
var几何=新的三立方测量法（100100）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）*/
摄像机位置z=500；
var灯=新的三个环境灯（0x404040）；
光照强度=0；
位置z=10；
light.position.y=10；//柔和的白光
场景。添加（灯光）；
// }
//init（）；
/*var loader=new THREE.JSONLoader（）；
loader.load（'ring.json'，函数（几何体）{
var mesh=new THREE.mesh（几何体，new THREE.MeshBasicMaterial（））；
网格位置x=500；
网格位置y=100；
网格位置z=500；
场景。添加（网格）；
}); *//*
var loader=new THREE.ObjectLoader（）；
loader.load（“ring.json”，函数（obj）{
3.ImageUtils.crossOrigin=''；
var texture=THREE.TextureLoader（“images.jpg”）；
//对象映射=纹理；
obj.scale.set（10,10,10）；
对象遍历（功能（子项）{
if（三个.Mesh的子实例）{
child.geometry.computeVertexNormals（）；
child.material.map=纹理；
}
} );
场景。添加（obj）；
});*/
var-manager=new-THREE.LoadingManager（）；
manager.onProgress=功能（项目、已加载、总计）{
控制台日志（项目、已加载、总计）；
};
var texture=new THREE.texture（）；
var loader=new THREE.ImageLoader（管理器）；
//可以在此函数中设置纹理特性。
//字符串必须是纹理文件的路径。
load（'brick_bump.jpg'，函数（图）{
纹理.图像=图像；
texture.needsUpdate=true；
//我想为我的低多边形角色设置一个最近邻过滤，
//所以每个像素都是尖锐的。你可以删除这些线
//如果有较大的纹理，并且需要平滑的线性过滤器。
//texture.magFilter=3.NearestFilter；
//texture.minFilter=3.NearestMipMapLinearFilter；
} );
var装入器=新的三个。对象装入器（管理器）；
/*var Mloader=新的三个MTLLoader（管理器）；
Mloader.load（'ring.mtl'，函数（对象）{
遍历（函数（子对象）{
if（三个的子.material实例.MeshPhongMaterial）{
child.material.map=纹理；
}
} );
场景。添加（对象）；
});*/
//加载OBJ后，此函数将查找网格
//在数据内部，并对其应用纹理。
loader.load（'ring1.obj'，函数（事件）{
var对象=事件；
/*for（var i=0，l=object.children.length；i