Javascript three.js背景图像+；动态创建的二维文本_Javascript_Html_Canvas_Three.js

Javascript three.js背景图像+；动态创建的二维文本

javascript html canvas three.js

Javascript three.js背景图像+；动态创建的二维文本,javascript,html,canvas,three.js,Javascript,Html,Canvas,Three.js,我的代码有什么问题？我看不到应该是2文本的背景图像。这是我的代码： <html> <body> <script src="Three.js"></script> <script src="file:///C|/Program Files (x86)/three.js/src/objects/Mesh.js"></script> <script src="file:///C|/Progr

我的代码有什么问题？我看不到应该是2文本的背景图像。这是我的代码：

<html>
    <body>

    <script src="Three.js"></script>
    <script src="file:///C|/Program Files (x86)/three.js/src/objects/Mesh.js"></script>
    <script src="file:///C|/Program Files (x86)/three.js/src/extras/geometries/ShapeGeometry.js"></script>

    <script src="file:///C|/Program Files (x86)/three.js/src/lights/AmbientLight.js"></script>
   <script src='file:///C|/Program Files (x86)/three.js/build/three.min.js'></script> 

    <script src="file:///C|/Program Files (x86)/three.js/examples/js/utils/FontUtils.js"></script>

这是一个使用typefont.js创建的js文件

    <script src="../../../../xampp/htdocs/myown/Starcraft_Normal.typeface.js"></script>

遵循javascript代码

   <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(25, window.innerWidth/window.innerHeight, 0.1, 1000);


    var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    camera.position.z = 5;
     // Load the background texture
        var texture = THREE.ImageUtils.loadTexture( 'maschera.png' );
        var backgroundMesh = new THREE.Mesh(
            new THREE.PlaneGeometry(4,2.2,5,5),
            new THREE.MeshLambertMaterial({
                map: texture
            }));


       scene.add( camera );
        scene.add(backgroundMesh );

        // LIGHT
    var light = new THREE.AmbientLight(0xFFFFFF);
    light.position.set(60,80,120);
    light.shadowCameraVisible = true;



        // text
        var textShapes = THREE.FontUtils.generateShapes('developer' );
var textgeom = new THREE.ShapeGeometry( textShapes );
var textMesh = new THREE.Mesh( textgeom, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ) ;

scene.add(textMesh);
// Example text options : {'font' : 'helvetiker','weight' : 'normal', 'style' : 'normal','size' : 100,'curveSegments' : 300};





    var render = function () {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    };
    render();
  </script>
  </body>
</html>


var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（25，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（{antialas:true，alpha:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
摄像机位置z=5；
//加载背景纹理
var texture=THREE.ImageUtils.loadTexture（'maschera.png'）；
var backgroundMesh=新的三个网格(
新的三平面几何（4,2.2,5,5），
新的三点网格材料({
贴图：纹理
}));
场景。添加（摄影机）；
场景。添加（背景网格）；
//轻的
var灯光=新的三个环境灯光（0xFFFFFF）；
光位置设置（60,80120）；
light.shadowCameravible=真；
//正文
var textShapes=THREE.FontUtils.generateShapes（'developer'）；
var textgeom=新的三种形状测量法（textShapes）；
var textMesh=new THREE.Mesh（textgeom，new THREE.MeshBasicMaterial（{color:0xff0000}））；
添加（textMesh）；
//示例文本选项：{'font'：'helvetiker'，'weight'：'normal'，'style'：'normal'，'size'：100，'curveSegments'：300}；
var render=函数（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
};
render（）；

它会不会因为我忘记了一些JS文件而失败？

我们无法在这里进行调试，这些文件是您电脑上的路径。例如，您可以设置JSFIDLE.net吗？@Neil。。。然而，到js文件的链接是正确的，我告诉你更多：这个例子，如果我剪切了与2d文本相关的部分，运行良好，事实上浏览器显示了正确的图像背景。如果我添加了以“//text”相对2d文本开头的部分，那么浏览器窗口是白色的，没有显示任何内容。你能在某个地方下载zip保护吗？我们不能在这里调试，这些文件是你电脑上的路径。例如，你能设置jsfiddle.net吗？@Neil。。。然而，到js文件的链接是正确的，我告诉你更多：这个例子，如果我剪切了与2d文本相关的部分，运行良好，事实上浏览器显示了正确的图像背景。如果我添加了以“//text”相对2d文本开头的部分，则浏览器窗口为白色，没有显示任何内容。您能在某个地方进行压缩保护以下载吗