时间戳

首页 > 解决方案 > 如何仅在 div 上应用 javascript

javascript - 如何仅在 div 上应用 javascript

问题描述

我只想在一个 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 图像 EDIT2：为了澄清问题，我有一个页面，页面上有一个 div 只想应用 three.js 函数仅在此 div 上。所以最后，我只能在 div 中看到我的金戒指

标签： javascripthtmlthree.js

解决方案

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

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

那么这是css中的测试和画布类：

.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 中的提示进行修复。

推荐阅读