Цилиндр и наклонная плоскость (48.29) — различия между версиями
(→Разработка) |
|||
| Строка 10: | Строка 10: | ||
Файл '''"4829.html"''' | Файл '''"4829.html"''' | ||
<syntaxhighlight lang="javascript" line start="1" enclose="div"> | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
| − | |||
| − | <html> | + | <html> |
| − | <head> | + | <head> |
| − | + | Задача 48.29 | |
<script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script> | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script> | ||
<script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script> | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script> | ||
| Строка 28: | Строка 27: | ||
</style> | </style> | ||
| − | </head> | + | </head> |
| − | <body> | + | <body> |
| − | <div id="Stats-output"> | + | <div id="Stats-output"> |
| − | </div> | + | </div> |
| − | <div id="WebGL-output"> | + | <div id="WebGL-output"> |
| − | </div> | + | </div> |
| − | <script type="text/javascript"> | + | <script type="text/javascript"> |
$(function () { | $(function () { | ||
| Строка 91: | Строка 90: | ||
var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); | var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); | ||
return plane; | return plane; | ||
| − | + | } | |
function createMesh(geom) { | function createMesh(geom) { | ||
var meshMaterial = new THREE.MeshNormalMaterial(); | var meshMaterial = new THREE.MeshNormalMaterial(); | ||
| Строка 99: | Строка 98: | ||
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); | var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); | ||
return mesh; | return mesh; | ||
| − | + | } | |
function createMesh1(geom) { | function createMesh1(geom) { | ||
var mat = new THREE.MeshNormalMaterial(); | var mat = new THREE.MeshNormalMaterial(); | ||
var mesh = new THREE.Mesh(geom,mat); | var mesh = new THREE.Mesh(geom,mat); | ||
return mesh; | return mesh; | ||
| − | + | } | |
camera.position.x = 0; | camera.position.x = 0; | ||
| Строка 124: | Строка 123: | ||
this.m1 = 15; | this.m1 = 15; | ||
this.a='0' | this.a='0' | ||
| − | + | } | |
var obj = { start_again:function(){ | var obj = { start_again:function(){ | ||
step=0; | step=0; | ||
Версия 21:52, 15 декабря 2017
- "Задача - Мещерский (48.29)"
Разработка
Текст программы на языке JavaScript (разработчик Вараев Владислав):
Файл "4829.html" <syntaxhighlight lang="javascript" line start="1" enclose="div">
<html>
<head>
Задача 48.29
<script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script> <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script> <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\MTLLoader.js"></script> <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\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="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\stats.js"></script> <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\dat.gui.js"></script> <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\chroma.js"></script> <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\TrackballControls.js"></script>
<script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OrbitControls.js"></script>
</style> </head> <body>
<script type="text/javascript">
$(function () {
var a = 0; var g = 9.8; var m = 20; var m1 = 15; var stats = initStats();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( -100, 0, -10 ); //-40, 60, -10 scene.add(spotLight ); var ugol= 135; 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 cube = createMesh(new THREE.CubeGeometry(2, 200, 800)); cube.position.x=0; cube.position.y=0; cube.position.z=0; scene.add(cube); var cylinder1 = createMesh1(new THREE.CylinderGeometry(25, 25, 60, 15, 1)); 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; var d = cylinder1.position.z; scene.add(cylinder1); var group1 = new THREE.Object3D(); group1.add(cube); group1.add(cylinder1); group1.position.x = 0; group1.position.y = 0; group1.position.z=0; scene.add(group1);
function createMesh0(geom) {
var meshMaterial = new THREE.MeshNormalMaterial();
meshMaterial.side = THREE.DoubleSide;
var wireFrameMat = new THREE.MeshBasicMaterial();
wireFrameMat.wireframe = true;
var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
return plane;
}
function createMesh(geom) {
var meshMaterial = new THREE.MeshNormalMaterial();
meshMaterial.side = THREE.DoubleSide;
var wireFrameMat = new THREE.MeshBasicMaterial();
wireFrameMat.wireframe = true;
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
return mesh;
}
function createMesh1(geom) {
var mat = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geom,mat); return mesh;
}
camera.position.x = 0;
camera.position.y = -1300;
camera.position.z = 1500;
camera.lookAt(scene.position);
$("#WebGL-output").append(renderer.domElement); renderer.render(scene, camera); var stats = initStats(); cameraControls = new THREE.OrbitControls(camera, renderer.domElement); cameraControls.maxDistance = 800; 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,0.2); gui.add(controls, 'ugol',90,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.6*a; if (cylinder1.position.z<=25*Math.sin((180-ugol)*Math.PI/180)) { 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; } 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();
stats.setMode(0); // 0: fps, 1: ms
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
</script> </body> </html>
