Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <title>Babylon.js Window</title>
    
    <!-- babylon core files -->
  <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
    <script src="http://www.babylonjs.com/babylon.js"></script>
    
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    
    
</head>
<body>
​
<canvas id="renderCanvas"></canvas>
<script type="text/javascript">
​
        // Get the canvas element from our HTML above
        var canvas = document.getElementById("renderCanvas");
        
        // Load the BABYLON 3D engine
        var engine = new BABYLON.Engine(canvas, true);
        
        // This begins the creation of a function that we will 'call' just after it's built
        var createScene = function () {
            
            // --- scene ---
        
            // Now create a basic Babylon Scene object 
            var scene = new BABYLON.Scene(engine);
            
            // --- camera ---
            
            // This creates and positions a rotating camera
            // Parameters : name, alpha, beta, radius, target, scene
            // alpha: Math.PI / 2 is looking to the side of the object, just axis x & y
            // beta: Math.PI / 2 is looking to the side of the object, just axis x & y
            var camera = new BABYLON.ArcRotateCamera("Camera", -(Math.PI / 3), Math.PI / 2.5, 10, BABYLON.Vector3.Zero(), scene);
            
            // This attaches the camera to the canvas
            camera.attachControl(canvas, false);
            
            // --- lights ---
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.diffuse = new BABYLON.Color3(1, 1, 1);
            light.specular = new BABYLON.Color3(1, 1, 1);
            light.groundColor = new BABYLON.Color3(0, 0, 0);
            
            // --- axis ---
            
            drawAxes(scene);
            
            // --- draw stuff ---
            
            var positions = [
                0, 0, 0,
                0, 2, 0,
                2, 2, 0,
                2, 1, 0,
                3, 1, 0,
                3, 0, 0
            ];
            
            var extruded_polygonal_positions = extrude(positions, 8);
            drawExtrusion(scene, extruded_polygonal_positions);
​
            // Leave this function
            return scene;
        
        };  // End of createScene function
        
        // takes array of x/y/z positions that trace, in order, round the 2d face to be extruded
        // one axis must be all zero
        function extrude(positions, depth){
            var extruded_polygonal_positions = [];
            
            // determine which axis to extrude down
            var extrusion_axis = determine_extrusion_axis(positions);
            if(extrusion_axis){
                
                for(var i = 0; i <= (positions.length - 3); i += 3){
                    var is_last_position = (i + 3) == positions.length ? 1 : 0;
                    
                    var current_position = { "x": positions[i], "y": positions[i+1], "z": positions[i+2] };
                    var next_position = {
                        "x": is_last_position ? positions[0] : positions[i+3], 
                        "y": is_last_position ? positions[1] : positions[i+4], 
                        "z": is_last_position ? positions[2] : positions[i+5]
                    };
                    
                    var current_extruded = {};
                    for( var key in current_position )
                         current_extruded[ key ] = current_position[ key ];
                    current_extruded[extrusion_axis] += depth;
                    
                    var next_extruded = {};
                    for( var key in next_position )
                         next_extruded[ key ] = next_position[ key ];
                    next_extruded[extrusion_axis] += depth;
                    
                    extruded_polygonal_positions.push(current_position["x"], current_position["y"], current_position["z"]);
                    extruded_polygonal_positions.push(current_extruded["x"], current_extruded["y"], current_extruded["z"]);
                    extruded_polygonal_positions.push(next_extruded["x"], next_extruded["y"], next_extruded["z"]);
                    extruded_polygonal_positions.push(next_position["x"], next_position["y"], next_position["z"]);
                    extruded_polygonal_positions.push(current_position["x"], current_position["y"], current_position["z"]);
                    extruded_polygonal_positions.push(next_extruded["x"], next_extruded["y"], next_extruded["z"]);
                }
            }
            return extruded_polygonal_positions;
        }
        
        function determine_extrusion_axis(positions){
            var axes = { 0: 'x', 1: 'y', 2: 'z' };
            for(var axis = 0; axis <= 2; axis++){
                var axis_last_array_offset = axis == 2 ? 1 : (axis == 1 ? 2 : 3);
                var this_axis_all_zero = 1;
                for(var i = axis; i <= (positions.length - axis_last_array_offset); i += 3){
                    if(positions[i] != 0){
                        this_axis_all_zero = 0;
                    }
                }
                if(this_axis_all_zero == 1){
                    return axes[axis];
                }
            }
            return false;
        }
        
        function drawExtrusion(scene, extruded_polygonal_positions){
            var triangle = new BABYLON.Mesh('triangle', scene);
            
            var normals = [];
            for(var i = 0; i < extruded_polygonal_positions.length - 2; i += 3){
                normals.push(-1, 0, 0);
            }
            
            var indices = [];
            for(var i = 0; i < (extruded_polygonal_positions.length / 3); i++){
                indices.push(i);
            }
            //console.log("positions: " + extruded_polygonal_positions.length + "; normals: " + normals.length +  "; indices: " + indices.length);
            
            // Finally, we load everything in our mesh:
            triangle.setVerticesData(BABYLON.VertexBuffer.PositionKind, extruded_polygonal_positions, true);
            triangle.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals, true);
            triangle.setIndices(indices);
            //triangle.convertToFlatShadedMesh();
        }
        
        function drawAxes(scene) {
            
            // x axis: red
            var x_axis_lines = BABYLON.Mesh.CreateLines("lines", [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(10, 0, 0),
            ], scene);
            x_axis_lines.color = new BABYLON.Color3(1,0,0);
            
            // y axis: green
            var y_axis_lines = BABYLON.Mesh.CreateLines("lines", [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(0, 10, 0),
            ], scene);
            y_axis_lines.color = new BABYLON.Color3(0,1,0);
            
            // z axis: blue
            var z_axis_lines = BABYLON.Mesh.CreateLines("lines", [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(0, 0, 10),
            ], scene);
            z_axis_lines.color = new BABYLON.Color3(0,0,1);
        }
        
        // Now, call the createScene function that you just finished creating
        var scene = createScene();
        
        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
            scene.render();
        });
        
        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
            engine.resize();
        });
        
    </script>
</body>
</html>
​
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers