рддреАрди.js - 3 рдбреА рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдЗрдВрдЬрди


рд╡рд╣рд╛рдБ рдПрдХ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ-рдЧреБрд░реБ, mr.doob рд╣реИ , рдпрд╣рд╛рдБ рддрдХ рдХрд┐ Habr├й рдкрд░ рднреА рдЙрдирдХрд╛ рдХрд╛рдо рдкрд╣рд▓реЗ рд╣реА рд╕рд╛рдордиреЗ рдЖ рдЪреБрдХрд╛ рд╣реИ ред
рд╕рдм рдХреЗ рд╕рдм, рдпрд╣ рдПрдХ рдмрд╣реБрдд рд╢рдХреНрддрд┐рд╢рд╛рд▓реА рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ 3 рдбреА рд░реВрдкрд░реЗрдЦрд╛ рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИ

Three.js


рдЙрджрд╛рд╣рд░рдг рд╣реИрдВ, рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ, рдкреНрд░рднрд╛рд╡рд╢рд╛рд▓реАред рдЖрдзреБрдирд┐рдХ рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдХреЗ рдирд╡реАрдирддрдо рд╕рдВрд╕реНрдХрд░рдгреЛрдВ рдореЗрдВ рдпрд╣ рдЖрд╕рд╛рдиреА рд╕реЗ рдФрд░ рдЦреВрдмрд╕реВрд░рддреА рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

рдореИрдВ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдЧреЗрдВрджреЛрдВ рдХреЗ рдмреАрдЪ рдЙрдбрд╝рд╛рди рдореЗрдВ рджреЗрд░реА рдХрд░ рд░рд╣рд╛ рдерд╛ рдФрд░ рдордиреЛрд░рдо рдЗрдВрдЬрди рд╕реЗ рдкреНрд░рд╕рдиреНрди рдерд╛ ред
рдФрд░ рдЬреЛ рдХреЛрдИ рднреА WebGL рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ - рд╡рд╣ рдмрд┐рд▓рдХреБрд▓ рдирд╣реАрдВ рд╣реИ - рд╡рд╣рд╛рдВ рдЖрдк рдФрд░ Minecraft рдФрд░ рд╡рд╣ рд╕рдм рдХреБрдЫ рдЬреЛ рдЖрдк рдЪрд╛рд╣рддреЗ рд╣реИрдВ)



var camera, scene, renderer, geometry, material, mesh; init(); animate(); function init() { camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; scene = new THREE.Scene(); geometry = new THREE.Cube( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.addObject( mesh ); renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } function animate() { // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility. requestAnimationFrame( animate ); render(); } function render() { mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); } 

рдлрд┐рд░ рд╕реЗ рд▓рд┐рдВрдХ рдХрд░реЗрдВ:

Three.js

Source: https://habr.com/ru/post/In117772/


All Articles