Three.js与WordPress集成：求分步实现方法及模块导入错误解决

错误原因 #

你遇到的cannot use import outside module错误，是因为自定义JS文件未被声明为ES模块，导致浏览器不识别import语法。以下是具体解决和实现步骤：

步骤1：正确注册并声明模块脚本 #

在WordPress中引入Three.js和自定义脚本时，必须将自定义脚本标记为type="module"，同时确保Three.js以模块形式加载。

方法A：使用CDN快速实现 #

在主题的functions.php中添加以下代码：

function enqueue_three_js_assets() {
    // 加载Three.js核心模块（CDN方式）
    wp_enqueue_script( 
        'three-js-core', 
        'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js', 
        array(), 
        '0.160.0', 
        true // 放在页面底部加载
    );

    // 加载你的自定义Three.js脚本
    wp_enqueue_script( 
        'custom-three-app', 
        get_template_directory_uri() . '/js/three-app.js', // 替换成你的脚本路径
        array('three-js-core'), // 依赖Three.js核心
        '1.0', 
        true 
    );

    // 给自定义脚本添加type="module"属性
    add_filter( 'script_loader_tag', function( $tag, $handle ) {
        if ( 'custom-three-app' === $handle ) {
            return str_replace( ' src', ' type="module" src', $tag );
        }
        return $tag;
    }, 10, 2 );
}
add_action( 'wp_enqueue_scripts', 'enqueue_three_js_assets' );

方法B：本地安装Three.js（适合开发场景） #

如果习惯用npm管理依赖：

1. 在主题根目录打开终端，运行npm install three
2. 同样在functions.php中注册自定义脚本并标记为模块，脚本路径指向你编译后的文件（或直接引用node_modules中的文件）

步骤2：编写你的Three.js业务代码 #

创建js/three-app.js文件（路径对应上面注册的路径），现在可以正常使用import语法：

import * as THREE from 'three';
// 如需附加模块（如控制器），直接导入
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 初始化场景
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 = 5;

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到页面（可指定容器，比如#three-container）
document.body.appendChild(renderer.domElement);

// 添加示例立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x2194ce });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// 添加轨道控制器（可选）
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    
    // 立方体旋转动画
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    controls.update();
    renderer.render(scene, camera);
}
animate();

// 监听窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

步骤3：测试与调试 #

• 刷新WordPress页面，检查是否正常渲染Three.js内容
• 如果仍有错误：
  • 确认自定义脚本的路径正确，type="module"已成功添加到script标签中（可通过浏览器开发者工具查看）
  • 本地开发避免使用file://协议，建议用WordPress本地服务器（如XAMPP、Local by Flywheel）
  • 若使用子主题，将get_template_directory_uri()替换为get_stylesheet_directory_uri()

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