javascript - Positioning the three.js container as an html div - Stack Overflow

admin管理员组

文章数量:1426040

I have an article container which has three aside tags inside it. The third aside element id='menuPuzzleType' contains a Three.js script which makes two cube meshes, and renders them in a Canvas renderer.

<article id="popup">

    <aside id='close'><img src="img/close.png" onClick="aFunction()" /></aside>
    <aside id='msgPuzzleType'>Please choose the puzzle type you want to play</aside>
    <aside id='menuPuzzleType'>
        <script>
        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function render() {
            cube.rotation.y -= 0.03;
            cube2.rotation.y -=0.03;
            renderer2.render(scene2, camera2);
        }
        var container2 = document.getElementById('menuPuzzleType');

        //renderer
        var renderer2 = new THREE.CanvasRenderer();
        renderer2.setSize(400,400);//Was 100,100
        container2.appendChild(renderer2.domElement);

        //Scene
        var scene2 = new THREE.Scene();

        //Camera
        var camera2 = new THREE.PerspectiveCamera(50,50/50,1,1000);
        camera2.position.z = 240;//normal value is 100
        camera2.position.y=60;
        scene2.add(camera2);

        //Axes
        var axes2= new THREE.AxisHelper();

        //Add texture for the cube
        //Use image as texture
        var img2 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
            map:THREE.ImageUtils.loadTexture('img/2d.png') 
        });
        img2.map.needsUpdate = true; //ADDED

        //Add Cube
        var cube = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img2);
        cube.position.x =- 60;
        scene2.add(cube);

        var img3 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
            map:THREE.ImageUtils.loadTexture('img/3d.png') 
        });

        img3.map.needsUpdate = true; //ADDED

        var cube2 = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img3);
        cube2.position.x = 70; cube.position.y = 60; cube2.position.y=60;
        scene2.add(cube2);
        renderer2.render(scene2,camera2);

        animate();
        </script>
    </aside>
</article>

I need to put the two cubes into the article container tag.

Here is my css code:

body{ overflow:hidden; }

article {
    border:solid 1px #00CC33;
    width:420px;
    height:200px;
    font-family: baskerville; 
    font-size: 16px; 
    margin-top: 50px;

    /*For IE9 patibility*/
    behavior: url(border-radius.htc);
    border-radius: 8px;
    position:relative;
}

#popup {
    bottom:50%;
    position:relative;
    margin: 0px; 
    left:30%;
}

#msgPuzzleType{ margin-left:60px; }

img{
    behavior: url(border-radius.htc);
    border-radius: 8px;
    position:relative;
}

#menuPuzzleType{
    background-color:#999999;
    border:solid 1px #3300CC;
    height:200px;
}

How can I move two cubes into the article container tag?

I have an article container which has three aside tags inside it. The third aside element id='menuPuzzleType' contains a Three.js script which makes two cube meshes, and renders them in a Canvas renderer.

<article id="popup">

    <aside id='close'><img src="img/close.png" onClick="aFunction()" /></aside>
    <aside id='msgPuzzleType'>Please choose the puzzle type you want to play</aside>
    <aside id='menuPuzzleType'>
        <script>
        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function render() {
            cube.rotation.y -= 0.03;
            cube2.rotation.y -=0.03;
            renderer2.render(scene2, camera2);
        }
        var container2 = document.getElementById('menuPuzzleType');

        //renderer
        var renderer2 = new THREE.CanvasRenderer();
        renderer2.setSize(400,400);//Was 100,100
        container2.appendChild(renderer2.domElement);

        //Scene
        var scene2 = new THREE.Scene();

        //Camera
        var camera2 = new THREE.PerspectiveCamera(50,50/50,1,1000);
        camera2.position.z = 240;//normal value is 100
        camera2.position.y=60;
        scene2.add(camera2);

        //Axes
        var axes2= new THREE.AxisHelper();

        //Add texture for the cube
        //Use image as texture
        var img2 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
            map:THREE.ImageUtils.loadTexture('img/2d.png') 
        });
        img2.map.needsUpdate = true; //ADDED

        //Add Cube
        var cube = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img2);
        cube.position.x =- 60;
        scene2.add(cube);

        var img3 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
            map:THREE.ImageUtils.loadTexture('img/3d.png') 
        });

        img3.map.needsUpdate = true; //ADDED

        var cube2 = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img3);
        cube2.position.x = 70; cube.position.y = 60; cube2.position.y=60;
        scene2.add(cube2);
        renderer2.render(scene2,camera2);

        animate();
        </script>
    </aside>
</article>

I need to put the two cubes into the article container tag.

Here is my css code:

body{ overflow:hidden; }

article {
    border:solid 1px #00CC33;
    width:420px;
    height:200px;
    font-family: baskerville; 
    font-size: 16px; 
    margin-top: 50px;

    /*For IE9 patibility*/
    behavior: url(border-radius.htc);
    border-radius: 8px;
    position:relative;
}

#popup {
    bottom:50%;
    position:relative;
    margin: 0px; 
    left:30%;
}

#msgPuzzleType{ margin-left:60px; }

img{
    behavior: url(border-radius.htc);
    border-radius: 8px;
    position:relative;
}

#menuPuzzleType{
    background-color:#999999;
    border:solid 1px #3300CC;
    height:200px;
}

How can I move two cubes into the article container tag?

• javascript
• css
• html
• three.js

Share Improve this question Follow edited Dec 9, 2014 at 19:48 isherwood 61.2k1616 gold badges122122 silver badges170170 bronze badges asked Sep 25, 2012 at 13:00 MallocMalloc 16.3k3535 gold badges108108 silver badges196196 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

A "Three.js" solution to your problem is to do this:

renderer2.setSize( 400, 150 );

You also have hardwired the aspect ratio of your PerspectiveCamera, so you need to make it match the canvas dimensions.

var camera2 = new THREE.PerspectiveCamera( 50, 400/150, 1, 1000 );

This will make the canvas smaller so it fits. You then can move the camera closer so your objects are of the size you want.

Using your link provided, i changed the following to put the cubes into the article:

canvas {
    position: absolute;
    top: -80px;
}

本文标签： javascriptPositioning the threejs container as an html divStack Overflow