3D操作按钮（button）

最新推荐文章于 2022-03-08 10:46:42 发布

Super_Calvin

最新推荐文章于 2022-03-08 10:46:42 发布

阅读量1.9k

点赞数 2

分类专栏： # 页面布置文章标签： button css js html 3D

本文链接：https://blog.csdn.net/weixin_45544796/article/details/104613071

版权

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