Редактирование: Цилиндр и наклонная плоскость (48.29)

Перейти к: навигация, поиск

Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.

Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия Ваш текст
Строка 45: Строка 45:
  
 
==Реализация на JavaScript==
 
==Реализация на JavaScript==
 
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy/n4829.html|width=800 |height=600|border=0 }}
 
  
 
== Разработка ==
 
== Разработка ==
Строка 59: Строка 57:
  
 
<head>
 
<head>
     <title>4829</title>
+
     <title>Example 05.01 - Basic 2D geometries - Plane</title>
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\three.js"></script>
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJLoader.js"></script>
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\MTLLoader.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\MTLLoader.js"></script>
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJMTLLoader.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJMTLLoader.js"></script>
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\jquery-1.9.0.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\jquery-1.9.0.js"></script>
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\stats.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\stats.js"></script>
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\dat.gui.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\dat.gui.js"></script>
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\chroma.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\chroma.js"></script>
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\TrackballControls.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\TrackballControls.js"></script>
<script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OrbitControls.js"></script>
+
<script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OrbitControls.js"></script>
     
+
    <style>
 +
        body {
 +
            /* set margin to 0 and overflow to hidden, to go fullscreen */
 +
            margin: 0;
 +
            overflow: hidden;
 +
        }
 
     </style>
 
     </style>
 
</head>
 
</head>
Строка 77: Строка 80:
 
<div id="Stats-output">
 
<div id="Stats-output">
 
</div>
 
</div>
 
+
<!-- Div which will hold the Output -->
 
<div id="WebGL-output">
 
<div id="WebGL-output">
 
</div>
 
</div>
  
 
+
<!-- Javascript code that runs our Three.js examples -->
 
<script type="text/javascript">
 
<script type="text/javascript">
  
 +
    // once everything is loaded, we run our Three.js stuff.
 
     $(function () {
 
     $(function () {
var a = 0;
 
var g = 9.8;
 
var m = 20;
 
var m1 = 15;
 
var stats = initStats();
 
  
 +
        var stats = initStats();
 +
 +
        // create a scene, that will hold all our elements such as objects, cameras and lights.
 
         var scene = new THREE.Scene();
 
         var scene = new THREE.Scene();
  
 +
        // create a camera, which defines where we're looking at.
 
         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 
         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  
         var renderer = new THREE.WebGLRenderer();
+
        // create a render and set the size
 +
         var webGLRenderer = new THREE.WebGLRenderer();
 +
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
 +
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
 +
        webGLRenderer.shadowMapEnabled = true;
 +
 
 +
        var plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));
 +
        // add the sphere to the scene
 +
        scene.add(plane);
 +
 
 +
        // position and point the camera to the center of the scene
 +
        camera.position.x = -20;
 +
        camera.position.y = 30;
 +
        camera.position.z = 40;
 +
        camera.lookAt(new THREE.Vector3(10, 0, 0));
 +
 
 +
 
 +
        // add spotlight for the shadows
 +
        var spotLight = new THREE.SpotLight(0xffffff);
 +
        spotLight.position.set(-40, 60, -10);
 +
        scene.add(spotLight);
 +
 
 +
        // add the output of the renderer to the html element
 +
        $("#WebGL-output").append(webGLRenderer.domElement);
 +
 
 +
        // call the render function
 +
        var step = 0;
 +
 
 +
 
 +
        // setup the control gui
 +
        var controls = new function () {
 +
            // we need the first child, since it's a multimaterial
 +
 
 +
 
 +
            this.width = plane.children[0].geometry.width;
 +
            this.height = plane.children[0].geometry.height;
 +
 
 +
            this.widthSegments = plane.children[0].geometry.widthSegments;
 +
            this.heightSegments = plane.children[0].geometry.heightSegments;
  
        renderer.setClearColor(new THREE.Color(0x7722ff, 1.0));
+
            this.redraw = function () {
        renderer.setSize(window.innerWidth, window.innerHeight);
+
                // remove the old plane
        renderer.shadowMapEnabled = true;
+
                scene.remove(plane);
<!-- var spotLight = new THREE.SpotLight( 0x00ff00 ); -->
+
                // create a new one
<!-- spotLight.position.set( -1000, 0, -10 );  -->
+
                plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments)));
<!-- scene.add(spotLight ); -->
+
                // add it to the scene.
var ugol= 135;
+
                scene.add(plane);
var alpha0 = Math.cos(ugol*Math.PI/180);
+
            };
var step = 0;
+
        }
var plane = createMesh0(new THREE.PlaneGeometry(1000, 2000, 50, 50));
+
 
scene.add(plane);
+
        var gui = new dat.GUI();
var cube = createMesh(new THREE.CubeGeometry(2, 200, 800));
+
        gui.add(controls, 'width', 0, 40).onChange(controls.redraw);
cube.position.x=0;
+
        gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
cube.position.y=0;
+
        ;
cube.position.z=0;
+
        gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw);
scene.add(cube);
+
        ;
var cylinder1 = createMesh1(new THREE.CylinderGeometry(25, 25, 80, 25, 1));
+
        gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw);
cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
+
        ;
cylinder1.position.y=cube.position.y;
+
 
cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
+
 
var c = cylinder1.position.x;
+
        render();
var d = cylinder1.position.z;
+
 
scene.add(cylinder1);
+
        function createMesh(geom) {
var group1 = new THREE.Object3D();
+
 
group1.add(cube);
+
            // assign two materials
group1.add(cylinder1);
+
             var meshMaterial = new THREE.MeshNormalMaterial();
group1.position.x = 0;
 
group1.position.y = 0;
 
group1.position.z=0;
 
scene.add(group1);
 
 
function createMesh0(geom) {
 
             var meshMaterial = new THREE.MeshNormalMaterial( { color: 0x550000 } );
 
 
             meshMaterial.side = THREE.DoubleSide;
 
             meshMaterial.side = THREE.DoubleSide;
             var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
+
             var wireFrameMat = new THREE.MeshBasicMaterial();
 
             wireFrameMat.wireframe = true;
 
             wireFrameMat.wireframe = true;
 +
 +
            // create a multimaterial
 
             var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
 
             var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
 +
 
             return plane;
 
             return plane;
 
         }
 
         }
        function createMesh(geom) {
 
            var meshMaterial = new THREE.MeshNormalMaterial( { color: 0xffffff } );
 
            meshMaterial.side = THREE.DoubleSide;
 
            var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0x9999ff } );
 
            wireFrameMat.wireframe = true;
 
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
 
            return mesh;
 
        }
 
function createMesh1(geom) {
 
            var mat = new THREE.MeshNormalMaterial( { color: 0xffff00 } );
 
var mesh = new THREE.Mesh(geom,mat);
 
return mesh;
 
        }
 
  
         camera.position.x = 0;
+
         function render() {
        camera.position.y = -1300;
+
            stats.update();
        camera.position.z = 1500;
+
 
        camera.lookAt(scene.position);
+
            plane.rotation.y = step += 0.01;
  
$("#WebGL-output").append(renderer.domElement);
+
            // render using requestAnimationFrame
renderer.render(scene, camera);
+
            requestAnimationFrame(render);
var stats = initStats();
+
            webGLRenderer.render(scene, camera);
cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
 
cameraControls.maxDistance = 900;
 
cameraControls.minDistance = 0.5;
 
cameraControls.update();
 
var controls = new function() {
 
this.Speed = 0.1;
 
this.ugol = 135;
 
this.m = 20;
 
this.m1 = 15;
 
this.a='0'
 
 
         }
 
         }
var obj = { start_again:function(){
 
step=0;
 
cube.position.x=0;
 
cube.position.y=0;
 
cube.position.z=0;
 
cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
 
cylinder1.position.y=cube.position.y;
 
cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
 
group1.position.x = 0;
 
group1.position.y = 0;
 
group1.position.z=0;
 
}};
 
var gui = new dat.GUI();
 
gui.add(controls, 'Speed',0.1,0.3);
 
gui.add(controls, 'ugol',89.9999,180);
 
gui.add(controls, 'm',0.1,50);
 
gui.add(controls, 'm1',0.1,50);
 
gui.add(controls,'a').listen();
 
gui.add(obj,'start_again');
 
var step = 0;
 
function render() {
 
cameraControls.update();
 
requestAnimationFrame(render);
 
renderer.render(scene, camera);
 
step += controls.Speed
 
ugol = controls.ugol
 
controls.a=a;
 
m = controls.m
 
m1=controls.m1
 
if(ugol<=135) {
 
group1.rotation.y=Math.cos(ugol*Math.PI/180);
 
}
 
else {
 
group1.rotation.y=Math.cos(ugol*Math.PI/180)+Math.cos((ugol-55)*Math.PI/180);
 
}
 
cylinder1.rotation.y = step*step;
 
a = -(g*m1*Math.sin(2*(180-ugol)*Math.PI/180))/(3*(m1+m)-2*m1*((Math.cos((180-ugol)*Math.PI/180))*(Math.cos((180-ugol)*Math.PI/180))));
 
var v =0.65*a;
 
  
if (cylinder1.position.z<=25*Math.sin((180-ugol)*Math.PI/180)) {
+
         function initStats() {
cylinder1.position.x = 25;
+
 
cylinder1.position.z = 25*Math.sin((180-ugol)*Math.PI/180);
 
cylinder1.rotation.y = 0;
 
group1.position.x =group1.position.x+v;
 
if (group1.position.x<=-500) {
 
step=0;
 
cube.position.x=0;
 
cube.position.y=0;
 
cube.position.z=0;
 
cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
 
cylinder1.position.y=cube.position.y;
 
cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
 
group1.position.x = 0;
 
group1.position.y = 0;
 
group1.position.z=0;
 
}
 
}
 
else {
 
group1.position.x = (a*step*step)/2;
 
cylinder1.position.x=26; 
 
cylinder1.position.z=d-g*Math.sin((180-ugol)*Math.PI/180)*step*step/2;
 
}
 
}
 
         render();
 
function initStats() {
 
 
             var stats = new Stats();
 
             var stats = new Stats();
 
             stats.setMode(0); // 0: fps, 1: ms
 
             stats.setMode(0); // 0: fps, 1: ms
 +
 +
            // Align top-left
 
             stats.domElement.style.position = 'absolute';
 
             stats.domElement.style.position = 'absolute';
 
             stats.domElement.style.left = '0px';
 
             stats.domElement.style.left = '0px';
 
             stats.domElement.style.top = '0px';
 
             stats.domElement.style.top = '0px';
 +
 
             $("#Stats-output").append(stats.domElement);
 
             $("#Stats-output").append(stats.domElement);
 +
 
             return stats;
 
             return stats;
 
         }
 
         }
 
     });
 
     });
 +
 +
 
</script>
 
</script>
 
</body>
 
</body>
Вам запрещено изменять защиту статьи. Edit Создать редактором

Обратите внимание, что все добавления и изменения текста статьи рассматриваются как выпущенные на условиях лицензии Public Domain (см. Department of Theoretical and Applied Mechanics:Авторские права). Если вы не хотите, чтобы ваши тексты свободно распространялись и редактировались любым желающим, не помещайте их сюда.
Вы также подтверждаете, что являетесь автором вносимых дополнений или скопировали их из источника, допускающего свободное распространение и изменение своего содержимого.
НЕ РАЗМЕЩАЙТЕ БЕЗ РАЗРЕШЕНИЯ МАТЕРИАЛЫ, ОХРАНЯЕМЫЕ АВТОРСКИМ ПРАВОМ!

To protect the wiki against automated edit spam, we kindly ask you to solve the following CAPTCHA:

Отменить | Справка по редактированию  (в новом окне)