Languages

Menu
Sites
Language
three.js

Hi,

I know it might be stupid question but anyway. I've created basic web app, removed all the source and replaced index.html with the following:

<html>
    <head>
        <title>My first Three.js app</title>
        <style>canvas { width: 100%; height: 100% }</style>
    </head>
    <body>
        <script src="./js/three.min.js"></script>
        <script>
            var scene = new THREE.Scene();
            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.CubeGeometry(1,1,1);
            var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            camera.position.z = 5;

            var render = function () {
                requestAnimationFrame(render);

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>

This is just slightly modified code from the official three.js minimal example: http://threejs.org/docs/#Manual/Introduction/Creating_a_scene

I am testing on 480x800 emulator with http://tizen.org/feature/screen.size.normal.480.800 in config.xml. The result is huge scrollable page with expected green cube somewhere in there plus white border around. How can I fix this?

Please note that I am complete beginner in web development and in HTML5 in particular.

Edited by: suioe on 15 Oct, 2013
List

Responses

7 Replies
suioe

UPDATE:

Tested with explicitly declared canvas element:

<html>
    <head>
        <title>My first Three.js app</title>
        <style>canvas { width: 100%; height: 100% }</style>
    </head>
    <body>    
        <canvas id="canvas" width="480" height="800" style="border: none;"></canvas>
        
        <script src="./js/three.min.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, 480/800, 0.1, 1000);
            
            var canvas = document.getElementById("canvas");

            var renderer = new THREE.WebGLRenderer( { canvas: canvas } );
            renderer.setSize(480, 800);
            //document.body.appendChild(renderer.domElement);

            var geometry = new THREE.CubeGeometry(1,1,1);
            var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            camera.position.z = 5;

            var render = function () {
                requestAnimationFrame(render);

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>

The result is the same except that there is more of the white border and the actual scene takes less but still much more than 480x800.

suioe

UPDATE:

Added <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, height=device-height, target-densitydpi=low-dpi">

from the Boules example: https://developer.tizen.org/documentation/articles/custom-3d-graphics-on-tizen

No any effect.

suioe

UPDATE:

Changed to <meta name="viewport" content="width=device-width, user-scalable=0, height=device-height"> by removing initial-scale=1.0, maximum-scale=1.0,

Same thing.

Changed to <meta name="viewport" content="width=480, user-scalable=0, height=800">

Finally looks like the scene is taking 480x800 but the white border is still there.

This is getting interesting. Why width=device-width and width=480 are not the same things on the 480x800 emulator? Same for height=device-height and height=800. Meanwhile the nature of the white border is completely mysterious.

suioe

http://img153.imageshack.us/img153/5254/n6l7.png

suioe

The whole thing looks very strange actually. I would like to get reply from someone from the Tizen team.

konduri sai swathi

Hi,

Try the below code :

<canvas id="canvas" width="480" height="800" style="border: none;margin-left:-10px;margin-top:-10px;"></canvas>

This workaround is removing the white spaces. Couldn't find any other solution than this.

suioe

This will​ probably result in white spaces on the opposite sides on the real device.