如何将脚本移动到 div 容器中

Question

所以我正在为客户开发一个网站，我想将我在 codepen 中构建的脚本移动到 html elementor 中的 div 容器中，每次我将它添加到网站中时（元素）它将 window 放在页面底部而不是容器中。

更新

尝试将 JS 移动到 Div 容器中以添加到网站的特定部分，document.getElementById 可行吗？我该怎么办？？

我试图通过 wordpress 将它添加到 Web 构建器中，但是当我通过 elementor 附加 JS 时，它获取脚本并在页脚下的页面底部应用/查看它，我只想要脚本在特定部分可见。

HTML

<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/build/three.min.js"></script>
<!-- OrbitControls.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/controls/OrbitControls.js"></script>
<!-- DRACOLoader.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/loaders/DRACOLoader.js"></script>
<!-- GLTFLoader.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/loaders/GLTFLoader.js"></script>

<div id="container">
  *debug* add js element to this container
  
</div>

JS

let gltf = null;
let mixer = null;
let clock = new THREE.Clock();
let controls;
let camera;

init();
animate();
  
function init() {
    width = window.innerWidth;
    height = window.innerHeight;
    
    scene = new THREE.Scene();
    
  let light = new THREE.PointLight( 0xffffcc, 20, 200 );
light.position.set( 4, 30, 80 );
scene.add( light );

let light2 = new THREE.AmbientLight( 0x20202A, 20, 100 );
light2.position.set( 30, -10, 30 );
scene.add( light2 );

  
    camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 10000 );
    camera.position.set(0, 3, 10);

    let geometry = new THREE.BoxGeometry(100, 5, 100);
    let material = new THREE.MeshLambertMaterial({
        color: "#707070"
    });
    
 
    let manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {
        console.log( item, loaded, total );
    };

    let loader = new THREE.GLTFLoader();
    loader.setCrossOrigin( 'anonymous' ); 
    loader.setDRACOLoader( new THREE.DRACOLoader() );
    
    let scale = 0.01;
    let url = "https://8ad.studio/wp-content/uploads/3D%20Assets/8AD_LOGO.gltf";
    
    loader.load(url, function (data) {
        gltf = data;
        let object = gltf.scene;
        object.scale.set(scale, scale, scale);
        //object.position.y = -5;
        //object.position.x = 4;
        object.castShadow = true;
        object.receiveShadow = true;

        let animations = gltf.animations;
        if ( animations && animations.length ) {
            mixer = new THREE.AnimationMixer( object );
            for ( let i = 0; i < animations.length; i ++ ) {
                let animation = animations[ i ];
                mixer.clipAction( animation ).play();
            }
        }
        scene.add(object);
    });

    

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xffffff );
    renderer.shadowMap.enabled = true;
    
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.rotateSpeed = 0.3;
controls.zoomSpeed = 0.9;

controls.minDistance = 12;
controls.maxDistance = 12;

controls.minPolarAngle = 0; // radians
controls.maxPolarAngle = Math.PI /2; // radians

controls.enableDamping = true;
controls.dampingFactor = 0.05;

    renderer.setSize( width, height );
    renderer.gammaOutput = true;
    document.body.appendChild( renderer.domElement );
}

function animate() {
    requestAnimationFrame( animate );
    if (mixer) mixer.update(clock.getDelta());
    controls.update();
    render();
}

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

Answer 1

如果您想让 threejs canvas 出现在 div 中，您必须更改 canvas 在 DOM 中出现的位置。这是在 Threejs 中使用 renderer.domElement

完成的

// change this:
document.body.appendChild( renderer.domElement );
// to this:
document.getElementById('container').appendChild( renderer.domElement );

查看 my codepen 示例。传统上，如果您向客户展示产品的 3d 模型，并且您希望将 canvas 嵌入到 DOM 的容器中，则可能会使用此方法。但是现在你的模型的位置不正常了。您只需要配置相机 position/zoom

如何将脚本移动到 div 容器中

How to move a script into a div container

html

javascript

elementor