示例

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‑to‑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）相关推荐

「UG/NX」BlockUI 操作按钮Button
目录控件说明界面效果公有属性对话框标题 DialogLabel(仅创建) 控件灰显 Enable 分组 Group(仅创建) 控件显隐 Show 控件标题 Label 国籍文本 AllowIn ...
3D Button Suite
原文来自方案网 http://www.fanganwang.com/Product-detail-item-1169.html,欢迎转载. 关键字: 3D Button Suite是一个包含了三个产品 ...
3D Button Visual Editor
原文来自方案网 http://www.fanganwang.com/Product-detail-item-1172.html,欢迎转载. 关键字: 3D Button Visual Editor是一 ...
python制作解压工具_使用python制作一个解压缩软件
python实现解压缩的重要模块就是--zipfile,其次是os 安装zipfile模块首先得安装zipfile模块,打开cmd输入一下命令即可安装 pip install zipfile os是 ...
python编写一个软件-使用python制作一个解压缩软件
python实现解压缩的重要模块就是――zipfile,其次是os 安装zipfile模块首先得安装zipfile模块,打开cmd输入一下命令即可安装 pip install zipfile os是 ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
python如何制作一个工程软件_使用python制作一个解压缩软件
python实现解压缩的重要模块就是--zipfile,其次是os 安装zipfile模块首先得安装zipfile模块,打开cmd输入一下命令即可安装 pip install zipfile os是 ...
python如何制作一个工程软件_如何利用python制作一个解压缩软件-Go语言中文社区...
如何利用python制作一个解压缩软件 python实现解压缩的重要模块就是--zipfile,其次是os 安装zipfile模块首先得安装zipfile模块,打开cmd输入一下命令即可安装 pip ...
Kanzi学习-待继续更新
Kanzi的学习(1):kanzi里的常用的一些控件: 1.内容控制管理节点: Image. 使用Image节点可以显示一个位图图像: Model. 使用 Model 节点显示导入kanzi应用的模型 ...

3D操作按钮（button）

3D操作

示例

HTML

CSS

JS

3D操作按钮（button）相关推荐

最新文章

热门文章