Question

我只想在一个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 );
    }

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

Answer 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 因此，金戒指应该在标记上（左侧的徽标），并且在黑色区域中，通常金戒指可以正常旋转。 Blackzone也可以通过我的第一篇文章com中的技巧进行修复。

如何仅在div上应用JavaScript

1 个答案: