Редактирование: Цилиндр и наклонная плоскость (48.29)
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 45: | Строка 45: | ||
==Реализация на JavaScript== | ==Реализация на JavaScript== | ||
− | |||
− | |||
== Разработка == | == Разработка == | ||
Строка 59: | Строка 57: | ||
<head> | <head> | ||
− | <title> | + | <title>Example 05.01 - Basic 2D geometries - Plane</title> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\three.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJLoader.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\MTLLoader.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJMTLLoader.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\jquery-1.9.0.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\stats.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\dat.gui.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\chroma.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\TrackballControls.js"></script> |
− | <script type="text/javascript" src=" | + | <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 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 | + | // 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; | ||
− | + | this.redraw = function () { | |
− | + | // remove the old plane | |
− | + | scene.remove(plane); | |
− | + | // create a new one | |
− | + | plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments))); | |
− | + | // add it to the scene. | |
− | + | scene.add(plane); | |
− | + | }; | |
− | + | } | |
− | + | ||
− | + | var gui = new dat.GUI(); | |
− | + | gui.add(controls, 'width', 0, 40).onChange(controls.redraw); | |
− | + | gui.add(controls, 'height', 0, 40).onChange(controls.redraw); | |
− | + | ; | |
− | + | gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw); | |
− | + | ; | |
− | + | gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw); | |
− | + | ; | |
− | + | ||
− | + | ||
− | + | render(); | |
− | + | ||
− | + | function createMesh(geom) { | |
− | + | ||
− | + | // assign two materials | |
− | + | var meshMaterial = new THREE.MeshNormalMaterial(); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | var meshMaterial = new THREE.MeshNormalMaterial( | ||
meshMaterial.side = THREE.DoubleSide; | meshMaterial.side = THREE.DoubleSide; | ||
− | var wireFrameMat = new THREE.MeshBasicMaterial( | + | 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 render() { | |
− | + | stats.update(); | |
− | + | ||
− | + | plane.rotation.y = step += 0.01; | |
− | + | // render using requestAnimationFrame | |
− | + | requestAnimationFrame(render); | |
− | + | webGLRenderer.render(scene, camera); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | 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> |