3D操作按钮（button）
程序员文章站
2022-04-03 22:47:29
...
示例
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 );
});
更多有趣示例 尽在 小红砖社区https://xhz.bos.xyz
上一篇： 环式加载（rings loader ）
下一篇： JavaScript中的闭包