下面贴出如何加载的代码:
引入jquery插件:
<script src="r95/jquery-3.1.1.js"></script>
初始化加载shader文件:
function initglsl(){
var error = document.getElementById('error');
vertDeferred = $.ajax({
url: './shaders/pbr-vert.glsl',
dataType: 'text',
async: true,
error: (jqXhr, textStatus, errorThrown) => {
error.innerHTML += 'Failed to load the vertex shader: ' + errorThrown + '<br>';
}
});
fragDeferred = $.ajax({
url: './shaders/pbr-frag.glsl',
dataType: 'text',
async: true,
error: (jqXhr, textStatus, errorThrown) => {
error.innerHTML += 'Failed to load the fragment shader: ' + errorThrown + '<br>';
}
});
$.when(vertDeferred, fragDeferred).then((vertSource, fragSource) => {
initModel(vertSource[0], fragSource[0]);
});
};
初始化模型:
function initModel(vertSource, fragSource) {
var axis = new THREE.Vector3(0,1,0); //创建一个三维向量
var rotWorldMatrix = new THREE.Matrix4(); //创建一个4*4矩阵
rotWorldMatrix.makeRotationAxis(axis.normalize(), Math.PI );
var EnvironmentSize = new THREE.Vector2( window.innerWidth, window.innerWidth/2 );
var h=Math.log(window.innerWidth)/Math.LN2,l=h-Math.log(Math.LN2)/Math.LN2;
//材质
sm= new THREE.ShaderMaterial({
uniforms:{
。。。。。。。。
},
/* 从html文件中加载shader代码
vertexShader:document.getElementById('TestvertexShader1').textContent,
fragmentShader:document.getElementById('TestfragementSahder1').textContent, */
//加载外部的shader文件
vertexShader:vertSource,
fragmentShader:fragSource,
side:THREE.DoubleSide,
// blending:THREE.NormalBlending,
});
// console.log("顶点着色器:",vertSource);
var loader = new THREE.BinaryLoader();
var material = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0x111111, shininess: 50 } );
loader.load( "./veyron_body_bin.js", function( geometry, material ) {
var object = new THREE.Mesh( geometry, sm );
object.scale.set(0.05,0.05,0.05);
scene.add( object );
} );
}