3DFurniture
/
front_end


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="http://www.babylonjs.com/cannon.js"></script>
        <script src="http://www.babylonjs.com/oimo.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>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
        
            // This creates a basic Babylon Scene object (non-mesh)
            var scene = new BABYLON.Scene(engine);
        
            var camera = new BABYLON.ArcRotateCamera('Camera', 1, .8, 28, new BABYLON.Vector3(0, 0, 0), scene);
        	camera.setTarget(BABYLON.Vector3.Zero());
        	camera.attachControl(canvas, false);
        
            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        
            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;
        
            var capsule = createStickMergemesh(scene, {
        		key: "C#C",
        		d: 5,
        		kindA: {
        			symbol: "C",
        			color: [0.5, 0.5, 0.5]
        		},
        		kindB: {
        			symbol: "C",
        			color: [1, 0, 0]
        		}
        	}, 1, 0, 12);
        	
        	capsule.position.x = 0;
        	capsule.position.y = 0;
        	capsule.position.z = 0;
            return scene;
        
        };
        
        function createStickMergemesh(scene, binding, diameter, lodIndex, segments){
        			console.log("create mesh template " + binding.key + " mergemesh " + lodIndex);			
        			var radius = diameter / 2;
        			var cylinderSize = binding.d - (radius/2.5);
        			var halfCylinderSize = cylinderSize/2;
        			var cylinder = BABYLON.Mesh.CreateCylinder("bondtemplate" + binding.key+ "-" + lodIndex, cylinderSize, diameter, diameter, segments, 2, scene, false);
        			var cylinderIndices = cylinder.getIndices();			
        			var sphereA = BABYLON.Mesh.CreateSphere("sphereA" + binding.key+ "-" + lodIndex, segments, diameter, scene, false);
        			sphereA.position.y = -halfCylinderSize;
        			var sphereB = BABYLON.Mesh.CreateSphere("sphereB" + binding.key+ "-" + lodIndex, segments, diameter, scene, false);
        			sphereB.position.y = halfCylinderSize;
        			
        			var capsule = BABYLON.Mesh.MergeMeshes([sphereA, cylinder, sphereB], true);
        			
                	var atomAMat = new BABYLON.StandardMaterial('materialFor' + binding.key + binding.kindA.symbol+ "-" + lodIndex, scene);
        			var atomAColor = binding.kindA.color;
        			atomAMat.diffuseColor = new BABYLON.Color3(atomAColor[0], atomAColor[1], atomAColor[2]);
        			atomAMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
        			atomAMat.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
        			
        			var atomBMat = new BABYLON.StandardMaterial('materialFor' + binding.key + binding.kindB.symbol+ "-" + lodIndex, scene);
        			var atomBColor = binding.kindB.color;
        			atomBMat.diffuseColor = new BABYLON.Color3(atomBColor[0], atomBColor[1], atomBColor[2]);
        			atomBMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
        			atomBMat.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
        			
        			var rootMat = new BABYLON.MultiMaterial('materialFor' + binding.key+ "-" + lodIndex, scene);
        			rootMat.subMaterials.push(atomAMat);
        			rootMat.subMaterials.push(atomBMat);
        			
        			var verticesCount = capsule.getTotalVertices();
        			var indices = capsule.getIndices();
        
        			console.log("has submeshes ? " + capsule.subMeshes.length + " indices " + indices.length);
        			console.log(indices);
        			capsule.subMeshes = [];
        			var halfindices = ((indices.length/2) >> 0);
        			capsule.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, halfindices, capsule));
        			capsule.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, halfindices, indices.length - halfindices, capsule));
        			
					for(var i in rootMat.subMaterials){
						rootMat.subMaterials[i].bumpTexture =  new BABYLON.Texture("textures/bump2.jpg", scene);
					}
					
        			capsule.material = rootMat;
					
					
					
        			
        			return capsule;
        		}
        
        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>