How to apply javascript only on a div

Question

I want to apply a script(from javascript) only in ONE DIV(not at all the page). Is it possible? (I think it's a resize problem if we modify the height of the div it partly works but the width doesn't affect by change(I talk about the div)) Here's my script:

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 );
    }

And is it possible to change the background, it's actually a black background I just want a transparent background. EDIT: Here is the screenshot: the golden rign is my 3d object and the green square is my div image EDIT2: To clarify the problem, I have a page and on the page there is a div just want to apply the three.js function only on this div. So at the end, i could see my golden ring only in the div

For transparent backgrounds, see: https://stackoverflow.com/questions/20495302/transparent-background-with-three-js — Steve, Aug 14 '18 at 15:19
THANKS A LOT IT WORK PERFECTLY ;) ! And now we have to fix the BIG problem :) ! — bosskay972, Aug 14 '18 at 15:21
Does this link answer your question? https://stackoverflow.com/questions/17507525/putting-three-js-animation-inside-of-div — Steve, Aug 14 '18 at 15:32
It's kind of link but i tried something but it doesn't work i will keep trying but if someone can find something before it will be cool — bosskay972, Aug 14 '18 at 15:49

bosskay972 · Answer 1 · 2018-08-14T17:03:13.780

I obtained a "correct" result by grope. Here's the code I modify:

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

then here's the test and canvas class in 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;
}

But now there is another problem. If a I try to call the script on a more complex code it doesn't work ! The console doesn't notice error. Here's the picture describing the situation: img So the golden ring should be on the marker(the logo on the left) and in the black zone there is normally the golden ring rotate normally. Also the blackzone can be fixed with the tips in the com of my first post.

How to apply javascript only on a div

1 Answers1