3D操作

• 示例
• HTML
• CSS
• JS

更多有趣示例 盡在 知屋安磚社區

示例

HTML

<div class="threejs-help-overlay hidden"><div class="threejs-help-overlay-close">x</div><p><b>Rotate</b><br />Use the rotate buttons or left-click and drag.</p><p><b>Move</b><br />Use the arrow buttons or right-click and drag.</p><p><b>Zoom</b><br />Use the + and - buttons or pinch&#8209;to&#8209;zoom.</p> </div> <div class="threejs-btn-wrapper"><button id="threejs-help" class="threejs-btn"><b>?</b></button><button id="threejs-reset" class="threejs-btn">Reset</button><div class="threejs-btn-group"><button id="threejs-zoom-in" class="threejs-btn disabled">+</button><button id="threejs-zoom-out" class="threejs-btn">-</button></div><div class="threejs-btn-group"><button id="threejs-rotate-x" class="threejs-btn"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 240 240" enable-background="new 0 0 240 240" xml:space="preserve"><path d="M187.5,78.3c-19-7.5-43.9-11.7-70.3-11.7c-26.4,0-51.4,4.1-70.3,11.7c-12.9,5.1-34.6,16.8-34.6,37s21.7,31.8,34.6,37 c6.4,2.5,13.4,4.7,20.9,6.4l-0.3-23.9c-4.3-1.2-8.4-2.5-12.1-4c-13.8-5.5-20.1-11.9-20.1-15.5s6.3-10,20.1-15.5 c16.3-6.5,38.3-10.1,61.8-10.1c23.5,0,45.5,3.6,61.8,10.1c13.8,5.5,20.1,11.9,20.1,15.5s-6.3,10-20.1,15.5 c-5.7,2.3-12.1,4.2-19.1,5.7c0,0-8.6,2.2-17.2,3.6l0.4-25.9l-58.7,33.6l57.7,32.7l0.3-18.4c5.2-0.1,11.5-0.6,17.8-2.1 c9.9-1.9,19.1-4.5,27.3-7.7c12.9-5.1,34.6-16.8,34.6-37S200.4,83.5,187.5,78.3z"/></svg></button><button id="threejs-rotate-y" class="threejs-btn"><svg id="threejs-rotate-y-icon" x="0px" y="0px" viewBox="0 0 240 240"><path d="M187.5,78.3c-19-7.5-43.9-11.7-70.3-11.7c-26.4,0-51.4,4.1-70.3,11.7c-12.9,5.1-34.6,16.8-34.6,37s21.7,31.8,34.6,37 c6.4,2.5,13.4,4.7,20.9,6.4l-0.3-23.9c-4.3-1.2-8.4-2.5-12.1-4c-13.8-5.5-20.1-11.9-20.1-15.5s6.3-10,20.1-15.5 c16.3-6.5,38.3-10.1,61.8-10.1c23.5,0,45.5,3.6,61.8,10.1c13.8,5.5,20.1,11.9,20.1,15.5s-6.3,10-20.1,15.5 c-5.7,2.3-12.1,4.2-19.1,5.7c0,0-8.6,2.2-17.2,3.6l0.4-25.9l-58.7,33.6l57.7,32.7l0.3-18.4c5.2-0.1,11.5-0.6,17.8-2.1 c9.9-1.9,19.1-4.5,27.3-7.7c12.9-5.1,34.6-16.8,34.6-37S200.4,83.5,187.5,78.3z"/></svg></button></div><div class="threejs-btn-group threejs-btn-group-directional"><button id="threejs-left" class="threejs-btn"><svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75"><path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z"/></svg></button><div class="threejs-up-down-wrapper"><button id="threejs-up" class="threejs-btn"><svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75"><path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z"/></svg></button><button id="threejs-down" class="threejs-btn"><svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75"><path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z"/></svg></button></div><button id="threejs-right" class="threejs-btn"><svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75"><path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z"/></svg></button></div> </div><div id="threejs-content"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/351064/OrbitControls.js"></script>

CSS

html, body {font-family: Calibri, sans-serif;font-size: 36px;height: 100%;margin: 0;overflow: hidden; }canvas {height: 100%;width: 100%; }.threejs-btn-wrapper {position: absolute; }.threejs-btn-group {margin: 1em;width: 1.5em; }.threejs-btn {background: #fff;border: thin solid #aaa;border-radius: 0.25em;color: #555;cursor: pointer;font-size: inherit;height: 1.5em;margin: 1em 0 0 1em;min-width: 1.5em;padding: 0 0.4em;; }.threejs-btn svg {fill: #555;margin-top: 0.1em; }.threejs-btn:hover {border-color: #777;box-shadow: 0.03em 0.05em 0.1em rgba(0,0,0,.2);color: #000; }.threejs-btn:active {background: #ddd;box-shadow: none; }.threejs-btn:hover svg {fill: #000; }.threejs-btn:focus {outline: thin dotted;outline-offset: -0.2em; }.threejs-btn.disabled {background: #bababa;color: #888;pointer-events: none; }.threejs-btn.disabled svg {fill: #888; }.threejs-btn-group button {margin: 0; }.threejs-btn-group .threejs-btn:last-of-type {border-radius: 0 0 0.25em 0.25em; }.threejs-btn-group .threejs-btn:first-of-type {border-radius: 0.25em 0.25em 0 0; }#threejs-rotate-y-icon {transform: rotate(90deg); }button[id^="threejs-rotate"] {padding: 0.1em 0.2em; }.threejs-btn-group.threejs-btn-group-directional {align-items: center;display: flex;left: 2.75em;position: absolute;top: 2.5em;width: 5em; }.threejs-btn-group.threejs-btn-group-directional .threejs-btn {border-radius: 0.25em;margin: 0.1em;padding: 0.05em 0.15em; }#threejs-down svg {transform: rotate(90deg); }#threejs-up svg {transform: rotate(-90deg); }#threejs-left svg {transform: rotate(180deg); }.threejs-help-overlay {align-items: center;background: rgba(0,0,0,.75);display: flex;height: 100%;justify-content: space-around;position: absolute;width: 100%;z-index: 10; }.threejs-help-overlay.hidden {display: none; }.threejs-help-overlay-close {color: #fff;cursor: pointer;position: absolute;right: 1.25em;top: 1em; }.threejs-help-overlay p {color: #fff;font-weight: normal;text-align: center;padding: 0 .75em;font-size: 0.8em;line-height: 1.1; }.threejs-help-overlay b {font-size: 1.25em;line-height: 1.4; }

JS

var zoom = 20; var xPos = 0; var yPos = 0; var container, camera, scene, renderer; var geometry, material, mesh; var targetRotationX = 0; var targetRotationY = 0; var targetRotationOnMouseDownX = 0; var targetRotationOnMouseDownY = 0; var mouseX = 0; var mouseY = 0; var mouseXOnMouseDown = 0; var mouseYOnMouseDown = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2;init(); animate();function init() {renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setClearColor( 0xf0f0f0 );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );$('#threejs-content').append( renderer.domElement );scene = new THREE.Scene();camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );camera.position.set( 0, 0, 20 );scene.add( camera );scene.add( new THREE.AmbientLight( 0x222222 ) );var light = new THREE.PointLight( 0xffffff, 0.8 );camera.add( light );geometry = new THREE.BoxGeometry( 5, 5, 5 );material = new THREE.MeshPhongMaterial( {color: 0x00aafa} );mesh = new THREE.Mesh( geometry, material );scene.add( mesh );document.addEventListener( 'mousedown', onDocumentMouseDown, false );document.addEventListener( 'touchstart', onDocumentTouchStart, false );document.addEventListener( 'touchmove', onDocumentTouchMove, false );window.addEventListener( 'resize', onWindowResize, false ); }function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight ); } // function onDocumentMouseDown( event ) {event.preventDefault();document.addEventListener( 'mousemove', onDocumentMouseMove, false );document.addEventListener( 'mouseup', onDocumentMouseUp, false );document.addEventListener( 'mouseout', onDocumentMouseOut, false );mouseXOnMouseDown = event.clientX - windowHalfX;mouseYOnMouseDown = event.clientY - windowHalfY;targetRotationOnMouseDownX = targetRotationX;targetRotationOnMouseDownY = targetRotationY; } function onDocumentMouseMove( event ) {mouseX = event.clientX - windowHalfX;mouseY = event.clientY - windowHalfY;targetRotationX = targetRotationOnMouseDownX + ( mouseX - mouseXOnMouseDown ) * 0.02;targetRotationY = targetRotationOnMouseDownY + ( mouseY - mouseYOnMouseDown ) * 0.02; } function onDocumentMouseUp( event ) {document.removeEventListener( 'mousemove', onDocumentMouseMove, false );document.removeEventListener( 'mouseup', onDocumentMouseUp, false );document.removeEventListener( 'mouseout', onDocumentMouseOut, false ); } function onDocumentMouseOut( event ) {document.removeEventListener( 'mousemove', onDocumentMouseMove, false );document.removeEventListener( 'mouseup', onDocumentMouseUp, false );document.removeEventListener( 'mouseout', onDocumentMouseOut, false ); } function onDocumentTouchStart( event ) {if ( event.touches.length == 1 ) {event.preventDefault();mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;targetRotationOnMouseDownX = targetRotationX;targetRotationOnMouseDownY = targetRotationY;} } function onDocumentTouchMove( event ) {if ( event.touches.length == 1 ) {event.preventDefault();mouseX = event.touches[ 0 ].pageX - windowHalfX;mouseY = event.touches[ 0 ].pageY - windowHalfY;targetRotationX = targetRotationOnMouseDownX + ( mouseX - mouseXOnMouseDown ) * 0.05;targetRotationY = targetRotationOnMouseDownY + ( mouseY - mouseYOnMouseDown ) * 0.05;} } // function animate() {requestAnimationFrame( animate );render(); }function render() {mesh.rotation.y += ( targetRotationX - mesh.rotation.y )*0.05;mesh.rotation.x += ( targetRotationY - mesh.rotation.x )*0.05;renderer.render( scene, camera ); }$("#threejs-help").click(function(e){$(".threejs-help-overlay").toggleClass('hidden'); });$(".threejs-help-overlay-close").click(function(e){$(".threejs-help-overlay").addClass('hidden'); });$( "#threejs-reset" ).click(function(e){camera.position.x = 0;camera.position.y = 0;camera.position.z = 20;zoom = 20;yPos = 0;xPos = 0;targetRotationX = 0;targetRotationY = 0;cameraLocation(); });$( "#threejs-zoom-in" ).click(function(e){zoom -= 10;camera.position.z = zoom;cameraLocation(); });$( "#threejs-zoom-out" ).click(function(e){zoom += 10;camera.position.z = zoom;cameraLocation(); });$( "#threejs-up" ).click(function(e){yPos += 1;camera.position.y = yPos;cameraLocation(); });$( "#threejs-down" ).click(function(e){yPos -= 1;camera.position.y = yPos;cameraLocation(); });$( "#threejs-left" ).click(function(e){xPos += 1;camera.position.x = xPos;cameraLocation(); });$( "#threejs-right" ).click(function(e){xPos -= 1;camera.position.x = xPos;cameraLocation(); });function cameraLocation() {if (yPos >= 4) {$('#threejs-up').addClass('disabled');}if (yPos < 4) {$('#threejs-up').removeClass('disabled');}if (yPos <= -4) {$('#threejs-down').addClass('disabled');}if (yPos > -4) {$('#threejs-down').removeClass('disabled');}if (xPos >= 4) {$('#threejs-left').addClass('disabled');}if (xPos < 4) {$('#threejs-left').removeClass('disabled');}if (xPos <= -4) {$('#threejs-right').addClass('disabled');}if (xPos > -4) {$('#threejs-right').removeClass('disabled');}if (zoom <= 20) {$('#threejs-zoom-in').addClass('disabled');}if (zoom <= 40) {$('#threejs-zoom-out').removeClass('disabled');}if (zoom > 20) {$('#threejs-zoom-in').removeClass('disabled');}if (zoom > 40) {$('#threejs-zoom-out').addClass('disabled');} }$( "#threejs-rotate-x" ).click(function(e){requestAnimationFrame( animate );mesh.rotation.y += 1;renderer.render( scene, camera ); });$( "#threejs-rotate-y" ).click(function(e){requestAnimationFrame( animate );mesh.rotation.x += 1;renderer.render( scene, camera ); });

總結

以上是生活随笔為你收集整理的3D操作按钮（button）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。