将 three.js 包含到 wordpress 主题中

Question

基本上我想要实现的目标很简单：

我想在我当前的自定义 wordpress 主题中使用 three.js。

遗憾的是，我似乎找不到有关如何执行此操作的任何信息。我通过 functions.php 对所有脚本进行排队，我想这是默认方法。

由于 three.js 必须加载“type=module”，我无法使其正常工作，而且似乎必须以其他方式完成。导入语句应该出现在我的主题 header 中吗？我一直认为这是不好的做法...然后如何将我的 three.js 代码写入外部 js 文件？

有人可以帮帮我吗？

Answer 1

Since three.js has to be loaded with "type=module"

事实并非如此。 three.js 提供一个 ESM (three.module.js) 和两个 UMD 构建 (three.js 和 three.min.js)。在你的 wordpress 主题中包含缩小的 UMD 构建应该可以解决这个问题。以下实例使用此构建文件：

let camera, scene, renderer;
let mesh;

init();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    const material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setAnimationLoop( animation );
    document.body.appendChild( renderer.domElement );

}

function animation( time ) {

    mesh.rotation.x = time / 2000;
    mesh.rotation.y = time / 1000;

    renderer.render( scene, camera );

}

body {
    margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>

将 three.js 包含到 wordpress 主题中

Include three.js into wordpress theme

wordpress

wordpress-theming

three.js