关于three.js中添加文字的方式[转]

时间：2021-08-15 23:23:57

https://blog.csdn.net/qq563969790/article/details/76584976

网上资料大部分是通过引入外部font库进行文字效果的载入，但是在实际运行的时候发现非常占用资源。于是不得不想另一种方法。

于是想到了three.js中的粒子系统。这当中有个很gay的骚操作是下面这个函数。

var particleMaterial = new THREE.SpriteCanvasMaterial( {
     
                color: 0x000000,
                program: function ( context ) {
     
                    context.beginPath();
                    context.font="bold 20px Arial";
                    context.fillStyle="#058";
                    context.transform(-1,0,0,1,0,0);
                    context.rotate(Math.PI);
                    context.fillText( wordFont , 0, 0 );
     
                }

上面的函数当中，可以传入一个canvas对象。恩，对。如果你想载入文字，写到canvas里就够啦，你还可以画小h图哦。

附上源代码：

ps:代码中最后的注释部分是外部加载字体的方式。有知道的大神请告诉我这么loader为啥贼卡。还有为什么context中文字fillText初始是镜像倒转的？又费了一点劲给它倒腾回来。可能涉及到坐标的原因，同样希望大神告知。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>three.js measute_length</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Arial;
               
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
     
    <script src="js/three.js"></script>
     
    <script src="js/Projector.js"></script>
    <script src="js/CanvasRenderer.js"></script>
     
    <script src="js/OrbitControls.js"></script>
     
    <script src="js/stats.min.js"></script>
     
    <script>
     
        var container, stats;
        var camera, scene, renderer;
        var particleMaterial;
     
        var raycaster;
        var mouse;
     
        var objects = [];
        var points = [];
     
        init();
        animate();
     
        function init() {
     
            container = document.createElement( 'div' );
            document.body.appendChild( container );
     
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.set( 0, 400, 700 );
     
            scene = new THREE.Scene();
     
            var geometry = new THREE.BoxGeometry( 100, 100, 100 );
     
            for ( var i = 0; i < 10; i ++ ) {
     
                var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
                object.position.x = Math.random() * 800 - 400;
                object.position.y = Math.random() * 800 - 400;
                object.position.z = Math.random() * 800 - 400;
     
                object.scale.x = Math.random() * 2 + 1;
                object.scale.y = Math.random() * 2 + 1;
                object.scale.z = Math.random() * 2 + 1;
     
                object.rotation.x = Math.random() * 2 * Math.PI;
                object.rotation.y = Math.random() * 2 * Math.PI;
                object.rotation.z = Math.random() * 2 * Math.PI;
     
                scene.add( object );
     
                objects.push( object );
     
            }
     
            var PI2 = Math.PI * 2;
            particleMaterial = new THREE.SpriteCanvasMaterial( {
     
                color: 0x000000,
                program: function ( context ) {
     
                    context.beginPath();
                    context.arc( 0, 0, 0.5, 0, PI2, true );
                    context.fill();
     
                }
     
            } );
     
            raycaster = new THREE.Raycaster();
            mouse = new THREE.Vector2();
     
            renderer = new THREE.CanvasRenderer();
            renderer.setClearColor( 0xf0f0f0 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
     
            stats = new Stats();
            container.appendChild( stats.dom );
     
            document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
     
            window.addEventListener( 'resize', onWindowResize, false );
            var controls = new THREE.OrbitControls(camera);  //camera control
            controls.addEventListener('change', render);
     
        }
     
        function onWindowResize() {
     
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
     
            renderer.setSize( window.innerWidth, window.innerHeight );
     
        }
     
        function onDocumentTouchStart( event ) {
     
            event.preventDefault();
     
            event.clientX = event.touches[0].clientX;
            event.clientY = event.touches[0].clientY;
            onDocumentMouseDown( event );
     
        }
     
        function onDocumentMouseDown( event ) {
     
            event.preventDefault();
     
            mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
            mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
     
            raycaster.setFromCamera( mouse, camera );
     
            //射线原理拾取目标
            var intersects = raycaster.intersectObjects( objects );
     
            if ( intersects.length > 0 ) {
     
                //创建粒子，便于标识点击位置
                var particle = new THREE.Sprite( particleMaterial );
                particle.position.copy( intersects[ 0 ].point );
                particle.scale.x = particle.scale.y = 1;
                scene.add( particle );
     
                //保存选中点
                points.push( intersects[ 0 ].point );
     
                if( points.length >1 ) {
     
                    var p2 = points[points.length-1];
                    var p1 = points[points.length-2];
     
                    //动画的形式画线
                    drawLine( p1, p2);
                }
     
            }
     
        }
     
        function animate() {
     
            requestAnimationFrame( animate );
     
            render();
            stats.update();
     
        }
     
        function render() {
     
            renderer.render( scene, camera );
     
        }
     
        function drawLine( p1, p2) {
     
            var directionVector = new THREE.Vector3();
            var p3 = new THREE.Vector3();
            directionVector.x = p2.x - p1.x;
            directionVector.y = p2.y - p1.y;
            directionVector.z = p2.z - p1.z;
     
            var length = Math.sqrt( directionVector.x * directionVector.x
                + directionVector.y * directionVector.y
                + directionVector.z * directionVector.z);
     
            var text = Math.round( length ) + "m";
     
     
            var flag = 1;
            var id = setInterval(function () {
                if (flag == 11) {
                    clearInterval(id);
                    flag = 1;
                } else {
     
                    var geometry = new THREE.Geometry();
                    var material = new THREE.LineBasicMaterial( { opacity:1,color:0x000000 } );
     
                    geometry.vertices.push(p1);
     
                    p3.x = p1.x + (directionVector.x/10) * flag;
                    p3.y = p1.y + (directionVector.y/10) * flag;
                    p3.z = p1.z + (directionVector.z/10) * flag;
     
                    geometry.vertices.push(p1);
                    geometry.vertices.push(p3);
     
                    var geo = new THREE.Line(geometry, material);
     
                    scene.add(geo);
     
                    flag++;
                }
     
            }, 10);
     
            initText( text, p2 );
     
        }
     
    //    var font;
    //    var loader = new THREE.FontLoader();
    //    loader.load('js/optimer_bold.typeface.json',function(response) {
    //         font = response;
     
    //    });
        function initText( wordFont, p1){
     
            var particleMaterial = new THREE.SpriteCanvasMaterial( {
     
                color: 0x000000,
                program: function ( context ) {
     
                    context.beginPath();
                    context.font="bold 20px Arial";
                    context.fillStyle="#058";
                    context.transform(-1,0,0,1,0,0);
                    context.rotate(Math.PI);
                    context.fillText( wordFont , 0, 0 );
     
                }
     
            } );
     
            var particle = new THREE.Sprite( particleMaterial );
            particle.position.copy( p1 );
            particle.rotation.x = Math.PI/2;
    //      particle.lookAt( camera );
            scene.add( particle );
     
    //            var textGeometry = new THREE.TextGeometry(wordFont,{
    //                "font": font,
    //                "size" : 10,
    //                "height" : 0,
    //                "color" : 0x000000
    //            })
    //
    //            var text = new THREE.Mesh( textGeometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
    //
    //
    //            text.position.x = p1.x + 2;
    //            text.position.y = p1.y + 2;
    //            text.position.z = p1.z + 2;
    //            text.lookAt(camera.position);
    //            scene.add(text);
     
        }
     
    </script>
     
    </body>
    </html>

效果如下：
关于three.js中添加文字的方式[转]

用到threejs的 精灵材料（SpriteMaterial）

https://threejs.org/docs/index.html#api/zh/materials/SpriteMaterial

下面的属性可以帮助我们实现文字在屏幕上大小不随像机位置变化而放缩！

.sizeAttenuation : Boolean ----标识文字是否自动放缩（false为屏幕尺寸自动放缩）

精灵的大小是否会被相机深度衰减。（仅限透视摄像头。）默认为true。

关于three.js中添加文字的方式[转]的更多相关文章

  1. html css &lt&semi;input&gt&semi; javaScript &period;数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  2. 基础篇：1&period;JavaScript运行在html中，引用有几种方式？—— 6&period;js中常用的输出方式？

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  3. WPF 在绘图控件&lpar;Shape&rpar;中添加文字 &lbrack;2018&period;7&period;15&rsqb;

    原文:WPF 在绘图控件(Shape)中添加文字 [2018.7.15] Q:使用Shape的子类Ellipse画一个圆,如何在圆中添加文字? A:Shape类中不包含Text属性.可使用Shape类 ...

  4. OSG项目经验2&lt&semi;在场景中添加文字面版&gt&semi;

    添加文字版需要用到osg的三个名字空间:                         osgText::Text,这个类用来添加文字和设置文字的一些属性:                     ...

  5. FFmpeg 向视频中添加文字

    原文地址:http://www.cnblogs.com/wanggang123/p/6707985.html FFmpeg支持添加文字功能,具体如何将文字叠加到视频中的每一张图片,FFmpeg调用了文 ...

  6. Ffmpeg 视频教程 向视频中添加文字

    Ffmpeg支持添加文字功能,具体如何将文字叠加到视频中的每一张图片,FFmpeg调用了文字库FreeSerif.ttf.当我们 用到ffmpeg 添加文字功能时 我们需要先下载改文字库,下载地址是h ...

  7. C&num; Excel 中设置文字对齐方式、方向和换行

    在Excel表格中输入文字时,我们常常需要调整文字对齐方式或者对文字进行换行.本文将介绍如何通过编程的方式设置文字对齐方式,改变文字方向以及对文字进行换行. //创建Workbook对象 Workbo ...

  8. 一道面试题关于js中添加动态属性

    js中数据类型包含基本数据类型和引用类型,基本类型包括:string.null.undefined.number.boolean.引用类型即是对象比如:array  .function以及自定义对象等 ...

  9. bootstrap table 生成的表格里动态添加HTML元素按钮，JS中添加点击事件，点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

随机推荐

  1. spark处理大规模语料库统计词汇

    最近迷上了spark,写一个专门处理语料库生成词库的项目拿来练练手, github地址:https://github.com/LiuRoy/spark_splitter.代码实现参考wordmaker ...

  2. 163邮件出错：不允许使用邮箱名称。 服务器响应为&colon; authentication is required&comma;smtp7&comma;C8CowEDpS0&plus;Uke9VvSmXBg--&period;546S2 1441763733

    原因:用163邮箱发邮件,需开启smtp服务,开启服务时,要求使用客户端授权码. 在.net中,使用smtp发邮件,在验证中使用的密码,是上面所讲的客户端授权码,而不是注册和web登录时用的邮箱密码. ...

  3. &lbrack;课程设计&rsqb;Scrum 1&period;5 多鱼点餐系统开发进度

    1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统WEB 5.Sprint 1时间:11.14-11.23 重案 ...

  4. &lbrack;ZZ&rsqb; GTX 280 GPU architecture

    http://anandtech.com/show/2549 Now that NVIDIA’s has announced its newest GPU architecture (the GeFo ...

  5. New Objective-C Feature

    [Advance Objective-C Feature] 1.@import避免反复解析头文件,本地宏对框架API定义无影响. 2.可以导入单独一个头文件. 3.使用了@import后,不再需要选择 ...

  6. Sqlserver数据库分页查询

    Sqlserver数据库分页查询一直是Sqlserver的短板,闲来无事,想出几种方法,假设有表ARTICLE,字段ID.YEAR...(其他省略),数据53210条(客户真实数据,量不大),分页查询 ...

  7. A Bug&&num;39&semi;s Life&lpar;hdu1829种类并查集&rpar;

    题意:有一群虫子,现在给你一些关系,判断这些关心有没有错 思路:向量种类并查集,下面讲一下向量的种类并查集 本题的各个集合的关心有两种0同性,1异性,怎么判断有错, 1.先判断他们是否在一个集合,即父 ...

  8. 国内国外MD5在线解密站点

    -http://www.cmd5.com/english.aspx (457,354,352,282) - http://www.md5crack.com - http://www.hashcheck ...

  9. Server in ASP&period;NET-Core

    .NET-Core Series Server in ASP.NET-Core DI in ASP.NET-Core Routing in ASP.NET-Core Error Handling in ...

  10. js兼容公用方法

    var utils = (function(){ //把类数组转换为数组(兼容所有的浏览器) function toArray(classAry){ var ary = []; try { ary = ...

相关文章