Asp.net mvc 使用three.js将文本绘制到画布

Asp.net mvc 使用three.js将文本绘制到画布,asp.net-mvc,three.js,Asp.net Mvc,Three.js,首先,我不是最先进的javascript开发人员。我现在才开始更认真地研究这个问题 因此,我在本主题中的第一次尝试是使用three.js库在画布上绘制一些文本。但就我而言,我无法让这个笨蛋工作。我看过google,甚至看过three.js文档。当我在chrome中检查页面时,页面也没有显示任何错误。以下是我的代码供参考: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.inner

首先,我不是最先进的javascript开发人员。我现在才开始更认真地研究这个问题

因此,我在本主题中的第一次尝试是使用three.js库在画布上绘制一些文本。但就我而言,我无法让这个笨蛋工作。我看过google,甚至看过three.js文档。当我在chrome中检查页面时,页面也没有显示任何错误。以下是我的代码供参考:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / 
window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0xdddddd);

var spotlight = new THREE.SpotLight(0xffffff,);
spotlight.castShadow = true;
spotlight.position.set(30,60,60);

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

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

    var textGeo = new THREE.TextGeometry( 'Hello three.js!', {
        font: font,
        size: 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelSegments: 5
    } );

    var  color = new THREE.Color();
    color.setRGB(255, 250, 250);
    textGeo.computeBoundingBox();
    textGeo.computeVertexNormals();
    var textMaterial = new THREE.MeshBasicMaterial({ color: color });

    var mesh = new THREE.Mesh(textGeo, textMaterial);
    mesh.position.x = textGeo.boundingBox.max.x / 2;
    mesh.position.y = textGeo.boundingBox.max.y / 2;
    mesh.castShadow = true; 
    scene.add(mesh); 
} );



var render = function (){
requestAnimationFrame(render);
renderer.render(scene, camera);
}
camera.lookAt(scene.position);
render();
另外,对于一些背景,如果需要的话,我将在asp.net应用程序中以调试模式运行它


谢谢大家

我把相机直接放在现场,所以什么都看不见。谢谢你的评论

在给定的代码中,相机的位置是什么?