gpt4 book ai didi

wordpress - WordPress 网站上的 Three.js JavaScript 3D 库

转载 作者:行者123 更新时间:2023-12-03 12:32:47 27 4
gpt4 key购买 nike

我想在我的 WordPress 网站上使用 Three.js JavaScript 3D 库,因此我尝试了以下位置的 Three.min.js:

  1. 帖子正文
    <code><script src="/three.min.js"></script></code>

  2. 然后是页脚
    <code><script type='text/javascript' src='/three.min.js'></script></code>

  3. 现在是 Pinboard:主题函数 (functions.php) 文件
    <code>function pinboard_enqueue_scripts() {
    wp_register_script('three.min', '/three.min.js', true);
    wp_enqueue_script( 'three.min' );
    }
    add_action( 'wp_enqueue_scripts', 'pinboard_enqueue_scripts' );</code>

不幸的是来自Mr.doob’s page的立方体没有出现在我的 Cube page 上.

如果您能帮助我在我的 WordPress 网站上运行 Three.js,我们将不胜感激。

谢谢。

最佳答案

这与 CSS 也有很大关系 ^^ 我在 http://lizkats.com 上也做了同样的事情。 ,也许能从中得到一些灵感。在 WordPress 主题编辑器中,我编辑了头文件 (header.php) 以包含库和脚本。我使用了绝对 URL(即我作弊了,也许你有更多耐心并找到更好的方法)并插入了库和脚本,如下所示:

</head>
<body <?php body_class(); ?>>
<!-- Here (after head & body in Heaper.php) starts the stuff I added myself -->
<div id="3dcontainer" style="position: fixed; z-index: -1;"></div>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner" style="overflow: visible;">


<script src="http://lizkats.com/wp-content/fromGame/three.js"></script>
<script src="http://lizkats.com/wp-content/fromGame/models/modelMeerkatPoseWeb.js"></script>
<script>

var container, stats;

var camera, scene, renderer, objects;

var clock = new THREE.Clock();


function init() {

container = document.getElementById('3dcontainer');

camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.5, 200 );
camera.position.set( 0.4, 0.42, 0.9 );

scene = new THREE.Scene();

// ...

// Renderer

renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( 0x453326, 1);
renderer.setSize( window.innerWidth, window.innerHeight);

container.appendChild( renderer.domElement );

animate();
}

init();

function animate() {

requestAnimationFrame( animate );


render();
}

function render() {

var delta = clock.getDelta();

renderer.render( scene, camera );
}
</script>

3dcontainer 是我插入 Canvas 对象的位置。

此外,您还必须更新 style.css,以使其看起来像您想要的那样。这是我当前(整个)样式表的粘贴:http://pastebin.com/9uUiAZhY

祝你好运!

关于wordpress - WordPress 网站上的 Three.js JavaScript 3D 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23855806/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com