CODEWITHSUNDEEP
htmlthree.js
RebelInc
RebelInc

Reputation: 59

Combine three.js scene with webpage as a background

I have created two separate html documents. One where three.js scene is rendered and basic html page. My question is how can I correctly combine them ? My goal is to create rotating green cube in left corner and moving red cube, which would move from left side to right side. And red cube should be invisible when moving under grey content area.

Three. js :

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>Cube_v2</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="build/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xf0f0f0 );

        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        //cube.position.x = 100;
        //cube.translateX = 100;
        //three.cube.position.x = 100;
        scene.add( cube );

        camera.position.z = 10;     
        camera.position.x = 10;

        var geometry_2 = new THREE.BoxGeometry( 2, 2, 2 );
        var material_2 = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
        var cube_2 = new THREE.Mesh( geometry_2, material_2 );
        scene.add( cube_2 );


        function animate() {
        requestAnimationFrame( animate );
        cube.rotation.y += 0.01;
        cube_2.position.x += 0.05;
        renderer.render( scene, camera );
        }
        animate();
    </script>
</body>
</html>

Note: i tried to move green cube with cube.position.x , cube.translateX and three.cube.position.x . But that didnt work so i fixed the issue by moving camera but i don't believe that's correct way of doing that.

HTML document where i want to import scene can be found here JSfiddle

Upvotes: 2

Views: 2042

Answers (1)

Normal
Normal

Reputation: 547

If you want to implement the three.js scene inside your webpage, make a div in the basic HTML page where you want it to be.

<div id="myScene"></div>

and in the script instead of:

document.body.appendChild( renderer.domElement );

write:

document.getElementById("myScene").appendChild( renderer.domElement );

Code snippet: 
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById("myScene").appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
//cube.position.x = 100;
//cube.translateX = 100;
//three.cube.position.x = 100;
scene.add( cube );

camera.position.z = 10;    
camera.position.x = 10;

var geometry_2 = new THREE.BoxGeometry( 2, 2, 2 );
var material_2 = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var cube_2 = new THREE.Mesh( geometry_2, material_2 );
scene.add( cube_2 );


function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.01;
cube_2.position.x += 0.05;
renderer.render( scene, camera );
}
animate();
canvas { 
    width: 100%;
    height: 100% 
}
.blue {
    color: #ffffff;  
    background-color: red;
    display: block;
    float: none;
    width: 400px;
    margin: 0 auto;
    text-align: center;
}
p {
   text-align: center;
   color: #ffffff;
}
.content {
    background-color: #e6e6e6;
    display: block;
    float: none;
    margin: 0 auto;
    overflow:hidden;
    width:400px;
    min-height: calc(100vh - 121px);
}
.footer {
    color: #ffffff;  
    background-color: red;
    display: block;
    float: none;
    width: 400px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:30px;
}
body {
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    font-size: 14px;
    overflow-x:hidden;
    min-height: 100%;
}
html {
    position:relative;
    min-height: 100%;
}
<div >
    <div class=blue>Header</div>
    <p style=color:red>LOGO</p>
    <div class="blue">Navigation Bar</div>
    <div id="myScene" class="content">
        Content.
        <div class="footer">Footer</div>
    </div>
</div>

<script src="https://threejs.org/build/three.min.js"></script>

Upvotes: 4

Related Questions