Hello everyone,
I have been facing issue with 3d models and css script, I am unable to run all the 3d models.Once i run them they automatically gets blurred and could not see anything.Please help me ,should i add any libraries or any css script coding problem or anything .please help me.
thank you.
Below is my code for 3d models.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Create 3D models using glTF.">
<meta name="cesium-sandcastle-labels" content="Tutorials,Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Apps/Sandcastle/Gallery/Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl : '../../../Source',
waitSeconds : 60
});
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html" data-sandcastle-title="Cesium + require.js">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
require(['Cesium'], function(Cesium) {
"use strict";
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
function createModel(url, height) {
height = Cesium.defaultValue(height, 0.0);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height));
scene.primitives.removeAll(); // Remove previous model
var model = scene.primitives.add(Cesium.Model.fromGltf({
url : url,
modelMatrix : modelMatrix,
minimumPixelSize : 128
}));
model.readyToRender.addEventListener(function(model) {
// Play and loop all animations at half-spead
model.activeAnimations.addAll({
speedup : 0.5,
loop : Cesium.ModelAnimationLoop.REPEAT
});
// Zoom to model
var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center);
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
var camera = scene.camera;
camera.transform = transform;
camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
var controller = scene.screenSpaceCameraController;
controller.ellipsoid = Cesium.Ellipsoid.UNIT_SPHERE;
controller.enableTilt = false;
var r = 1.25 * Math.max(model.boundingSphere.radius, camera.frustum.near);
controller.minimumZoomDistance = r * 0.25;
camera.lookAt(new Cesium.Cartesian3(r, r, r), Cesium.Cartesian3.ZERO, Cesium.Cartesian3.UNIT_Z);
});
}
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(
function (movement) {
var pick = scene.pick(movement.endPosition);
if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
// Output glTF node and mesh under the mouse.
console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);
}
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
///////////////////////////////////////////////////////////////////////////
var options = [{
text : 'Aircraft',
url : '../models/CesiumAir/Cesium_Air.json',
height : 5000.0
}, {
text : 'Ground vehicle',
url : '../models/CesiumGround/Cesium_Ground.json'
}, {
text : 'Skinned character',
url : '../models/CesiumMan/Cesium_Man.json'
}];
createModel(options[0].url, options[0].height);
Sandcastle.addToolbarMenu(options, function() {
var option = options[this.selectedIndex];
createModel(option.url, option.height);
});
Sandcastle.finishedLoading();
});
</script>
</body>
</html>