使用Three.js实现的3D文字效果在浏览器中无法显示，请求排查

你的代码存在以下几个关键问题： #

• 模块导入与全局脚本冲突：HTML中同时引入了three.min.js全局脚本，又在script.js里用import * as THREE from 'three'做模块导入，会造成变量冲突。而且script.js作为模块脚本，HTML里的<script>标签必须添加type="module"属性。
• FontLoader使用错误：fontLoader.load回调返回的font已经是THREE.Font实例，不需要再用new THREE.Font(font)包装，这会导致字体加载失效。
• 缺少光照：MeshPhongMaterial依赖场景中的光源才能显示颜色，没有光源的话文字会是黑色，在空白页面上完全看不到。
• 文字位置未居中：TextGeometry生成的文字默认不在原点，可能超出相机视野范围，需要手动居中。
• 重复添加Canvas：已经指定渲染器使用页面上的<canvas id="canvas">，不需要再执行document.body.appendChild(renderer.domElement)，这会导致页面重复添加Canvas元素。

修复后的完整代码： #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Text Effect</title>
    <!-- 模块脚本必须添加type="module" -->
    <script src="script.js" type="module"></script>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

script.js代码

import * as THREE from 'three';

const canvas = document.getElementById("canvas");

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0); // 设置浅灰色背景，方便观察文字

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10; // 调整相机位置，确保文字在视野内

const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

// 添加光源，让Phong材质显示颜色
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

const fontLoader = new THREE.FontLoader();
// 确保字体文件路径正确，可从Three.js官方示例的examples/fonts目录复制字体文件
fontLoader.load('fonts/droid/droid_sans_bold.typeface.json', function(font) {
    const textGeometry = new THREE.TextGeometry("Hello Three.js", {
        font: font, // 直接使用回调返回的font实例
        size: 2,
        height: 0.5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.2,
        bevelSize: 0.1
    });

    // 让文字居中，确保相机能拍到完整内容
    textGeometry.center();

    const textMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
    const textMesh = new THREE.Mesh(textGeometry, textMaterial);

    scene.add(textMesh);

    function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }

    render();
});

// 监听窗口大小变化，实时调整渲染器和相机参数
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

额外注意事项： #

• 确认字体文件droid_sans_bold.typeface.json的路径正确，如果找不到文件，浏览器控制台会出现404错误，可直接从Three.js官方仓库复制字体文件到项目对应目录。
• 启动Live Server后，打开浏览器开发者工具（F12）查看控制台，能快速定位路径错误、语法错误等问题。

内容的提问来源于stack exchange，提问作者Vigowebs