Javascript three.js将文本渲染到场景_Javascript_Three.js

Javascript three.js将文本渲染到场景

javascript three.js

Javascript three.js将文本渲染到场景,javascript,three.js,Javascript,Three.js,我是新来的在我的工作中，我必须制作三维图形网站所以在谷歌搜索之后，我发现three.js适合于方便地操作WebGL 在three.js文档（）中 TextGeometry是用于在场景中绘制文本的API [src.js] init = () => { window.addEventListener('resize', resizeWindow); var scene = new THREE.Scene(); var camera = new THREE.Perspective

我是新来的

在我的工作中，我必须制作三维图形网站

所以在谷歌搜索之后，我发现three.js适合于方便地操作WebGL

在three.js文档（）中

TextGeometry是用于在场景中绘制文本的API

[src.js]

init = () => {
  window.addEventListener('resize', resizeWindow);
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
  var controls = new THREE.OrbitControls( camera );
  controls.update();
  var renderer = new THREE.WebGLRenderer();

  renderer.setClearColor(0xdd3b56);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Set shadow
  renderer.shadowMap.enabled = true;
  // Show Axis
  var axes = new THREE.AxisHelper(5);
  scene.add(axes);

  // Text
  var loader = new THREE.FontLoader();
  loader.load( './helvetiker_regular.typeface.json', function ( font ) {
      var geometry = new THREE.TextGeometry( 'Hello three.js!', {
          font: font,
          size: 80,
          height: 5,
          curveSegments: 12,
          bevelEnabled: true,
          bevelThickness: 10,
          bevelSize: 8,
          bevelSegments: 5
      } );
  } );
  var textMaterial = new THREE.MeshPhongMaterial({color: 0xFE98A0});
  var text = new THREE.Mesh(geometry, textMaterial);
  text.position.x = 0;
  text.position.y = 10;
  text.position.z = 10;
  scene.add(text);

  // Light
  var spotLight = new THREE.SpotLight(0xFFFFFF);
  spotLight.position.set(-40, 60, 30);
  spotLight.castShadow = true;
  spotLight.shadow.mapSize.width = 5120;
  spotLight.shadow.mapSize.height = 5120;
  scene.add(spotLight);

  // Camera Setting
  camera.position.x = 0;
  camera.position.y = 30;
  camera.position.z = 30;
  camera.lookAt(scene.position);
  document.getElementById("threejs_scene").appendChild(renderer.domElement);

  renderScene();

  function renderScene() {
    requestAnimationFrame(renderScene);
    controls.update();
    renderer.render(scene, camera);
  }
}
window.onload = init();

[index.html]

<html>
<head>
  <script src="three.js"></script>
  <script src="OrbitControls.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="threejs_scene"></div>
  <script src="src.js"></script>
</body>
</html>

我如何解决这个问题

我的最后一个目标是在场景中显示文本

谢谢。

window.onload=函数（参数）{
/*
*
*建立世界
* 
*/
//设定比率
var gWidth=window.innerWidth；
var gHeight=窗内高度；
var比率=gWidth/gHeight；
var borders=[40,24]//指示球需要在镜像位置移动的位置
var灯光=新的三个环境灯光（0xffffff，0.5）；
var light1=新的三点光源（0xffffff，0.5）；
light1.位置.设置（0,5,0）；
light1.castShadow=true；
//设置渲染器
var renderer=new THREE.WebGLRenderer（）；
var摄像机=新的三个透视摄像机（）；
摄像机。位置。设置（10，10，10）；
摄影机。注视（新的三个向量3（0，0，0））；
//投射阴影的属性
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；
设置大小（gWidth，gHeight）；
document.body.appendChild（renderer.doElement）；
var scene=new THREE.scene（）；
场景。添加（灯光）；
场景。添加（light1）；
var ground=new THREE.Mesh（new THREE.BoxGeometry（10,0.5,10），new THREE.MeshLambertMaterial（））
ground.receiveShadow=true；
场景。添加（地面）
变量几何；
var loader=new THREE.FontLoader（）；
var网格；
请求动画帧（渲染）；
函数render（）{
if（网格）{
网格旋转y+=0.01；
网格旋转.z+=0.007；
}
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
loader.load（'https://cdn.rawgit.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.json，函数（字体）{
var geometry=new THREE.TextGeometry（'Hello THREE.js！'）{
字体：字体，
尺码：80，
身高:5,，
曲线段：12，
是的，
体重：10，
贝弗西：8，
斜面部分：5
});
var material=新的3.0网格LambertMaterial({
颜色：0xF32
});
网格=新的三个网格（几何体、材质）；
网格位置设置（0,2,0）；
网格。比例。多重刻度（0.01）
mesh.castShadow=true；
场景。添加（网格）；
var canv=document.createElement（'canvas'）
canv.width=canv.height=256；
var ctx=canv.getContext（'2d'）
ctx.fillStyle='白色'；
ctx.fillRect（0，0，canv.width，canv.height）；
ctx.fillStyle='黑色'
fillText（“这里是一些2D文本”，20，20）；
var-tex=新的三种纹理（canv）；
tex.needsUpdate=true；
var mat=新的三网格基本材料({
地图：特克斯
});
var平面=新的三点网格（新的三点平面几何体（10,10），mat）；
场景.添加（平面）
});
}

正文{
填充：0；
保证金：0；
}

这是控制台中的第一个错误吗？也许您的字体加载不正确？@manthrax这是第一个错误，另一个对象显示得很好。@manthrax我删除了另一个对象的代码以确保可读性。@manthrax如何检查字体是否加载？我将

helvetiker_regular.typeface.json

文件保存在同一个文件夹中。我用您的代码解决了这个问题。但是你能告诉我发生错误的地方在哪里吗？我不知道。。但我猜您使用的是旧版本的three，或者字体加载正在悄无声息地失败，因为没有向其传递错误处理程序。你正在加载三的哪个版本？您的字体文件是从哪里获得的？最新版本和字体文件与

index.html

和

src.js

位于同一文件夹中，我将查找发生错误的位置。不管怎样，你知道如何显示文本2d吗？上面代码的文本显示为3d。对于2d，将文本绘制到画布上，然后将画布用作平面上的纹理。

  var textMaterial = new THREE.MeshPhongMaterial({color: 0xFE98A0});
  var text = new THREE.Mesh(geometry, textMaterial);
  text.position.x = 0;
  text.position.y = 10;
  text.position.z = 10;