如何仅在 div 上应用 javascript

Posted 2023-02-27

【中文标题】如何仅在 div 上应用 javascript

【英文标题】：How to apply javascript only on a div

【发布时间】：2019-01-21 12:05:06

【问题描述】：

我只想在一个 DIV 中应用一个脚本（来自 javascript）（而不是整个页面）。可能吗？ （我认为如果我们修改 div 的高度，它会部分起作用，但宽度不受更改影响（我谈论的是 div），这是一个调整大小的问题） 这是我的脚本：

var camera2, scene2;
    function init2() 
        var container, stats;

        container = document.createElement( 'div' );
        document.body.appendChild( container );
        camera2 = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera2.position.z = 250;

        scene2 = new THREE.Scene();
        var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
        scene2.add( ambientLight );
        var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
        camera2.add( pointLight );
        scene2.add( camera2 );

        var loader = new THREE.OBJLoader();

        var mtlLoader = new THREE.MTLLoader();

        mtlLoader.load( "3d_models/OBJ/ano/ano.mtl", function( materials ) 
            materials.preload();
            console.log(materials);
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials( materials );
            objLoader.load("3d_models/OBJ/ano/ano.obj", function ( object ) 
                console.log(object.children[0])
                scene2.add( object );
                onRenderFcts.push(function()
                            object.rotation.y += 0.03;
                )
            );
        ,
        function ( xhr ) 
            console.log( 'OBJ ' + ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        ,
        function ( error ) 
            console.log(error);
        );
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );
    

是否可以改变背景，它实际上是一个黑色的背景，我只想要一个透明的背景。 编辑：这是屏幕截图：金色框是我的 3d 对象，绿色方块是我的 div image EDIT2：为了澄清问题，我有一个页面，页面上有一个div，只想在这个div上应用three.js函数。所以最后，我只能在 div 中看到我的金戒指

【问题讨论】：

透明背景见：***.com/questions/20495302/…

非常感谢它完美地工作；）！现在我们必须解决大问题:)！

这个链接能回答你的问题吗？ ***.com/questions/17507525/…

这是一种链接，但我尝试了一些东西，但它不起作用我会继续尝试，但如果有人能在它之前找到一些东西会很酷

【参考方案1】：

我通过摸索得到了一个“正确”的结果。这是我修改的代码：

container = document.createElement( 'div' );
            var att = document.createAttribute("class");
            att.value = "test";
            container.setAttributeNode(att);
            document.body.appendChild( container );

那么这里是css中的test和canvas类：

.test
    width:100px;
    height:100px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;


canvas
    width:500px;
    height:500px;
    margin-top: -275px;
    margin-left: -630px;

但是现在还有另一个问题。如果我尝试在更复杂的代码上调用脚本，它就不起作用！控制台没有注意到错误。这是描述情况的图片：img 所以金戒指应该在标记上（左边的标志），在黑色区域通常有金戒指正常旋转。黑区也可以通过我第一篇文章的 com 中的提示进行修复。