Question

我正在一个项目中，必须将文本垂直放置在实体上，尤其是圆柱体上。我刚刚开始为该项目学习Three.js。完成此操作后，我想用.obj文件替换圆柱体，我想知道是否有更聪明的方法来获得最终结果，即目标文件上的垂直文本。

我在Three.js文档中搜索了如何将文本放在实体上，但是没有找到任何东西。

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
            margin: 0;
            }
            canvas {
            width: 100%;
            height: 100%;
            }
        </style>
        <title>Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.js"></script>
        <script src="https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            window.addEventListener('resize', function() {
                var width = window.innerWidth;
                var height = window.innerHeight;
                renderer.setSize(width, height); 
                camera.aspect = width/height;
                camera.updateProjectionMatrix();
            });

            controls = new THREE.OrbitControls(camera, renderer.domElement);

            var geometry = new THREE.CylinderGeometry(1,1,5,64,64);
            var material = new THREE.MeshPhongMaterial({color: 0x00f9ff, side:THREE.DoubleSide, wireframe: true});
            var cone = new THREE.Mesh(geometry, material);
            scene.add(cone);

            // create a point light
            var pointLight = new THREE.PointLight( 0xFFFFFF );

            // set its position
            pointLight.position.x = 10;
            pointLight.position.y = 50;
            pointLight.position.z = 130;

            // add to the scene
            scene.add(pointLight);

            camera.position.z = 3;

            var render = function () {
                requestAnimationFrame(render);
                // cone.rotation.y += 0.01;
                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>

如果运行此页面，则只会看到一个圆柱体。我想知道并理解在代码中的什么地方应该放置行以在圆柱体上显示文本，以及是否可以轻松地用目标文件替换圆柱体，还是应该在前面放置对象。

如何在Three.js中的实体上添加文本？

0 个答案: