Exemple de code de modèle de police de dessin Three.js

Cet article vous présente principalement les informations pertinentes sur la façon dont Three.js dessine des modèles de polices. L'effet obtenu grâce à la méthode présentée dans l'article est très bon. Les amis dans le besoin peuvent s'y référer.

• Vous devez d'abord instancier THREE.FontLoader() pour charger le texte au format json et créer la grille dans la fonction de rappel qui se charge avec succès.

• Créez ensuite la grille via la méthode THREE.TextBufferGeometry ou THREE.TextGeometry et transmettez les problèmes qui doivent être définis.

• Définissez une texture et créez un graphique via la fonction THREE.Mesh() et ajoutez-le à la scène.

Exemple de code :

var fontModel; 
 function initModel() { 
 var font; 
 var loader = new THREE.FontLoader(); 
 loader.load("examples/fonts/gentilis_regular.typeface.json", function (res) { 
  font = new THREE.TextBufferGeometry("fdsfasd", { 
  font: res, 
  size: 100, 
  height: 60 
  }); 
 
  font.computeBoundingBox(); // 运行以后设置font的boundingBox属性对象，如果不运行无法获得。 
  //font.computeVertexNormals(); 
 
  var map = new THREE.TextureLoader().load("examples/textures/UV_Grid_Sm.jpg"); 
  var material = new THREE.MeshLambertMaterial({map:map,side:THREE.DoubleSide}); 
 
  fontModel = new THREE.Mesh(font,material); 
 
  //设置位置 
  fontModel.position.x = - (font.boundingBox.max.x - font.boundingBox.min.x)/2; //计算出整个模型的宽度的一半 
  fontModel.position.y = - 50; 
  fontModel.position.z = - 30; 
 
  scene.add(fontModel); 
 }); 
 }

Finalement, j'ai ajusté la position et c'est devenu le code comme celui-ci.

Mettez enfin tout le code :

 
 
 
  
  
  
 
 
 
 
 
 
 
<script> 
 var renderer; 
 function initRender() { 
 renderer = new THREE.WebGLRenderer({antialias: true}); 
 renderer.setSize(window.innerWidth, window.innerHeight); 
 document.body.appendChild(renderer.domElement); 
 } 
 
 var camera; 
 function initCamera() { 
 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); 
 camera.position.set(0, 0, 400); 
 } 
 
 var scene; 
 function initScene() { 
 scene = new THREE.Scene(); 
 } 
 
 var light; 
 function initLight() { 
 scene.add(new THREE.AmbientLight(0x404040)); 
 
 light = new THREE.DirectionalLight(0xffffff); 
 light.position.set(1, 1, 1); 
 scene.add(light); 
 } 
 
 var fontModel; 
 function initModel() { 
 var font; 
 var loader = new THREE.FontLoader(); 
 loader.load(&quot;examples/fonts/gentilis_regular.typeface.json&quot;, function (res) { 
  font = new THREE.TextBufferGeometry(&quot;fdsfasd&quot;, { 
  font: res, 
  size: 100, 
  height: 60 
  }); 
 
  font.computeBoundingBox(); // 运行以后设置font的boundingBox属性对象，如果不运行无法获得。 
  //font.computeVertexNormals(); 
 
  var map = new THREE.TextureLoader().load(&quot;examples/textures/UV_Grid_Sm.jpg&quot;); 
  var material = new THREE.MeshLambertMaterial({map:map,side:THREE.DoubleSide}); 
 
  fontModel = new THREE.Mesh(font,material); 
 
  //设置位置 
  fontModel.position.x = - (font.boundingBox.max.x - font.boundingBox.min.x)/2; //计算出整个模型的宽度的一半 
  fontModel.position.y = - 50; 
  fontModel.position.z = - 30; 
 
  scene.add(fontModel); 
 }); 
 } 
 
 //初始化性能插件 
 var stats; 
 function initStats() { 
 stats = new Stats(); 
 document.body.appendChild(stats.dom); 
 } 
 
 //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 
 var controls; 
 function initControls() { 
 
 controls = new THREE.OrbitControls(camera, renderer.domElement); 
 
 // 如果使用animate方法时，将此函数删除 
 //controls.addEventListener( 'change', render ); 
 // 使动画循环使用时阻尼或自转 意思是否有惯性 
 controls.enableDamping = true; 
 //动态阻尼系数 就是鼠标拖拽旋转灵敏度 
 //controls.dampingFactor = 0.25; 
 //是否可以缩放 
 controls.enableZoom = true; 
 //是否自动旋转 
 controls.autoRotate = false; 
 //设置相机距离原点的最远距离 
 controls.minDistance = 200; 
 //设置相机距离原点的最远距离 
 controls.maxDistance = 600; 
 //是否开启右键拖拽 
 controls.enablePan = true; 
 } 
 
 function render() { 
 renderer.render(scene, camera); 
 } 
 
 //窗口变动触发的函数 
 function onWindowResize() { 
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix(); 
 render(); 
 renderer.setSize(window.innerWidth, window.innerHeight); 
 
 } 
 
 function animate() { 
 //更新控制器 
 controls.update(); 
 render(); 
 
 //更新性能插件 
 stats.update(); 
 requestAnimationFrame(animate); 
 } 
 
 function draw() { 
 initRender(); 
 initScene(); 
 initCamera(); 
 initLight(); 
 initModel(); 
 initControls(); 
 initStats(); 
 
 animate(); 
 window.onresize = onWindowResize; 
 } 
</script> 

Recommandations associées :

Comment résoudre les polices, images et graphiques de dessin sur toile HTML5 Problème ambigu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!