Javascript 试图在JSF页面中使用Three.js-ShaderMaterial，未捕获类型错误：无法读取属性'；文本内容'；空的
根据之前的帖子使用他们的代码， ，我试图将HTML窗格中的代码放入JSF2.1页面。我想知道我的JavaServer主页的内容是否导致JavaScript控制台中出现以下错误： 未捕获的TypeError:无法读取null的属性“textContent”Javascript 试图在JSF页面中使用Three.js-ShaderMaterial，未捕获类型错误：无法读取属性'；文本内容'；空的,javascript,jsf,three.js,Javascript,Jsf,Three.js,根据之前的帖子使用他们的代码， ，我试图将HTML窗格中的代码放入JSF2.1页面。我想知道我的JavaServer主页的内容是否导致JavaScript控制台中出现以下错误： 未捕获的TypeError:无法读取null的属性“textContent” <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>BYOS screen</title>
<h:outputStylesheet library="css" name="byos.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js" type="text/javascript"/>
<h:outputScript name="OrbitControls.js" library="js"/>
<style>
body {
/* set margin to 0 and overflow to hidden, to use the complete page */
margin: 0;
overflow: hidden;
}
</style>
</h:head>
<h:body>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<div id="Stats-output">
</div>
<script src="./resources/js/06-mesh-properties-4-shader.js" type="text/javascript"/>
<script id="vertex_shader" type="x-shader/x-vertex">
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
vUv = uv;
vNormal = normalize( normalMatrix * normal );
vViewPosition = -mvPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
uniform sampler2D texture;
uniform sampler2D texture2;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;
void main() {
vec4 tColor = texture2D( texture, vUv );
vec4 tColor2 = texture2D( texture2, vUv );
// hack in a fake pointlight at camera location, plus ambient
vec3 normal = normalize( vNormal );
vec3 lightDir = normalize( vViewPosition );
float dotProduct = max( dot( normal, lightDir ), 0.0 ) + 0.2;
gl_FragColor = vec4( mix( tColor.rgb, tColor2.rgb, tColor2.a ), 1.0 ) * dotProduct;
}
</script>
</h:body>
</html>
BYOS屏幕
身体{
/*将边距设置为0，将溢出设置为隐藏，以使用完整页面*/
保证金：0；
溢出：隐藏；
}
可变vec2 vUv；
可变vec3 vNormal；
可变的vec3视图位置；
void main（）{
vec4 mvPosition=modelViewMatrix*vec4（位置，1.0）；
vUv=紫外线；
vNormal=规格化（normalMatrix*normal）；
vViewPosition=-mvPosition.xyz；
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}
二维纹理均匀；
均匀的2D纹理2；
可变vec2 vUv；
可变vec3 vNormal；
可变的vec3视图位置；
void main（）{
vec4 t颜色=纹理2d（纹理，vUv）；
vec4 tColor2=纹理2D（纹理2，vUv）；
//在摄像机位置加上环境光，插入一个假点光源
vec3正常=正常化（vNormal）；
vec3 lightDir=规格化（vViewPosition）；
浮点点积=最大值（点（正常，lightDir），0.0）+0.2；
gl_FragColor=vec4（混合（tColor.rgb，tColor2.rgb，tColor2.a），1.0）*dotProduct；
}
我只是想搞乱JSF2.1页面上的ShaderMaterial，这是一个Facelets文件。3D形状在jsfiddle URL中正确呈现，但在JSF页面中根本没有呈现。我将06-mesh-properties-4-shader.js（jsfiddle JavaScript窗格中包含代码的js文件）作为h:body元素中的最后一个脚本元素。以前，调用脚本时，尚未加载id为=“vertex\u shader”的元素；这就是textContent属性为null的原因。它与JSF2.1页面无关。这是一个怎样的JSF页面？没有h:head，h:body，只有一个h:outputscript标记。你检查过了吗？如果它真的加载了那个脚本。检查你的浏览器开发工具抱歉，我一定是在复制和粘贴之前无意中解开了一些代码。现在该页有一条错误跟踪的警告消息[line:1]不允许处理指令目标与“[xX][mM][lL]”匹配。您是否尝试在中复制粘贴错误消息？抱歉，我发布的最后一个“[xX][mM][lL]”错误已解决。@a命令：和？现在一切都好了吗？