我正在尝试使用 three.js 将着色器材质添加到导入的 .obj 对象。我可以将材质添加到一个简单的球体，但是当我尝试将它添加到我的自定义对象时，没有加载任何对象。控制台错误返回为未定义。我可以通过加载单个图像而不是分层着色器来添加常规纹理。代码当前将“纹理”映射到对象，这是单个加载的纹理。我试图将“material_shh”映射到它，因为它映射到我创建的球体。简单地换掉 child.material.map = texture; 到 child.material.map = material_shh; 不起作用。第 127 行是加载自定义对象的位置。非常感谢您的帮助，非常感谢。
<html>
<head>
<title>Web GL test 2</title>
</head>
<body style="overflow: hidden; background: black;">
<div id="container"></div>
<script src="three.min.js"></script>
<script src="OBJLoader.js"></script>
</body>
<script id="fragment_shh" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D tOne;
uniform sampler2D tSec;
varying vec2 vUv;
void main(void)
{
vec3 c;
vec4 Ca = texture2D(tOne, vUv);
vec4 Cb = texture2D(tSec, vUv);
c = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (1.0 - Ca.a);
gl_FragColor= vec4(c, 1.0);
}
</script>
<script id="vertex_shh" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="text/javascript">
var container;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var scene = new THREE.Scene();
var geometry = new THREE.Geometry();
var object = new THREE.Mesh(geometry, material_shh);
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// RENDERER
// --------------------------------------------
var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
var renderer = new THREE.WebGLRenderer({ clearAlpha: 1, clearColor: 0x222222, antialias: false });
renderer.setSize( WIDTH, HEIGHT );
var container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
// CAMERA
// --------------------------------------------
var camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.position.z = 400;
scene.add(camera);
// LIGHT
// --------------------------------------------
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.set( 100, 100, 150);
scene.add(pointLight);
// OBJECTS
// --------------------------------------------
var geom = new THREE.SphereGeometry( 30, 90, 90 );
var vertShader = document.getElementById('vertex_shh').innerHTML;
var fragShader = document.getElementById('fragment_shh').innerHTML;
var attributes = {};
var tex1 = THREE.ImageUtils.loadTexture("IDF_AF_MA_H_CB0002.png", {}, function() { renderer.render(scene, camera);});
var tex2 = THREE.ImageUtils.loadTexture("IDF_AF_MA_F_CB0001.png", {}, function() { renderer.render(scene, camera);});
var uniforms = {
tOne: { type: "t", value: THREE.ImageUtils.loadTexture( "IDF_AF_MA_H_CB0002.png" ) },
tSec: { type: "t", value: THREE.ImageUtils.loadTexture( "IDF_AF_MA_F_CB0001.png" ) }
};
var material_shh = new THREE.ShaderMaterial({
uniforms: uniforms,
attributes: attributes,
vertexShader: vertShader,
fragmentShader: fragShader
});
var loader = new THREE.OBJLoader();
loader.addEventListener( 'load', function ( event ) {
object = event.content;
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
object.position.y = 100;
scene.add( object );
});
loader.load( 'Try1.obj' );
var texture = THREE.ImageUtils.loadTexture('face.gif');
texture.needsUpdate = true;
var me = new THREE.Mesh( geom, material_shh );
//me.doubleSided = true;
scene.add(me);
// Resize + listeners
//--------------------------------------------
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
// ANIMATION
// --------------------------------------------
var t = 0;
function animate()
{
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false );
object.rotation.y += ( targetRotation - object.rotation.y ) * 0.05;
me.rotation.y += ( targetRotation - me.rotation.y ) * 0.05;
renderer.render( scene, camera );
requestAnimFrame(animate);
}
requestAnimFrame(animate);
</script>