javascript - html,css中的三维曲率拟合

javascript - html,css中的三维曲率拟合,第1张

我见过人们使用变换来获得三维效果。

但如果我们只需要轮换<div>的某些部分,我就找不到任何有用的东西。

我想知道我们如何应用转换来获得凹凸,类型等三维效果。

如果我们只想转换此<div>的10%,或者我们想要一个从左到右或从上到下增加和减少的转换,该怎么办?

或者,考虑一个球体,让我们假设您要在其上包裹<div>,这怎么可能实现呢?

最佳答案:

2 个答案:

答案 0 :(得分:1)

在撰写本文时, HTML元素是平的 即使CSS3引入3D Tranforms,这些仅用于转换,而不是用于渲染形状。

你实际上可以用这样的变换渲染由6个平面HTM元素组成的3d立方体,但它们仍然是平坦的。

see this David Walsh article on how to make a CSS Cube

我们可能会调整这个想法来创建一个球体,但对于像 smooth 这样的球体,如下图所示,它将涉及200个多边形,这意味着200个不同的元素,每个元素都具有独特的{ {1}}声明,您必须将内容分解为这些元素中的每一个。

javascript - html,css中的三维曲率拟合,a not so smooth sphere,第2张
我会让你找到数学做这样的事情......

要在网页中呈现3d对象,您可以使用html5 transform元素引入的WebGL API。

所以,一个解决方案,如果你真的需要你的内容来获得这个3D效果,那就是首先使用像html2canvas这样的库来获取元素的快照,然后将它用作webgl上下文中的纹理。
以下是使用three.js库的示例。

<canvas>
var div = document.querySelector('div');
	html2canvas(div, {
	  onrendered: function(canvas) {
	    initCanvas(div, canvas.toDataURL());
	  }
	});

	function initCanvas(replacedElement, src) {
	  var size = replacedElement.getBoundingClientRect();

	  var scene = new THREE.Scene();
	  var camera = new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
	  var renderer = new THREE.WebGLRenderer();

	  renderer.setSize(size.width, size.height);
	  renderer.domElement.setAttribute('style', 'top:'   size.top   'px; left:'   size.left   'px; position:absolute;');
	  replacedElement.parentNode.insertBefore(renderer.domElement, replacedElement.nextNode);

	  var geometry = new THREE.SphereGeometry(0.5, 32, 32)
	  var material = new THREE.MeshPhongMaterial()


	  var sphere = new THREE.Mesh(geometry, material);
	  scene.add(sphere);
	  material.map = THREE.ImageUtils.loadTexture(src)
	  material.map.minFilter = THREE.LinearFilter;
	  var light = new THREE.PointLight('#FFF', 10, 100);
	  light.position.set(32, 32, 80);
	  scene.add(light);
	  camera.position.z = 1;

	  function render() {
	    requestAnimationFrame(render);
	    renderer.render(scene, camera);
	    sphere.rotation.x  = .01
	    sphere.rotation.y  = .01
	  }
	  render();
	}

window.onresize=function(){	html2canvas(div, {
	  onrendered: function(canvas) {
        var c = document.querySelector('canvas');
        if(c)c.parentNode.removeChild(c);
	    initCanvas(div, canvas.toDataURL());
	  }
	});}
div {
  background-color: rgba(255, 255, 255, 0.5);
}

但是<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet bibendum augue, nec convallis enim bibendum non. Donec sagittis finibus lorem nec porttitor. Donec vel tincidunt ante. Praesent semper luctus arcu, at eleifend nibh dapibus sit amet. Aenean maximus ex in luctus bibendum. Nullam in ligula quis tellus convallis rutrum. Vivamus id placerat metus. Morbi efficitur sem at cursus bibendum. Ut fermentum odio in lectus posuere accumsan. Etiam imperdiet metus at ornare tempus. Suspendisse nulla metus, aliquam viverra elementum sed, consequat ac est. Sed lorem neque, finibus ac ultricies vel, ullamcorper ut nibh. Praesent est nulla, dictum eu commodo nec, sollicitudin condimentum ante. </p> <p> Donec metus nulla, rutrum ultrices elementum quis, blandit ac nisl. Etiam fermentum pharetra dui, vel eleifend ante blandit nec. Nunc varius eget arcu sit amet fermentum. Sed lorem turpis, mattis suscipit orci ut, feugiat volutpat dolor. Ut eu est dolor. Nulla aliquam libero at libero maximus, eget porta lorem malesuada. Curabitur in odio dolor. Praesent iaculis feugiat ipsum at malesuada. Nulla sed commodo leo, at fringilla arcu. Nulla tempus tellus sit amet augue sodales efficitur. Vestibulum tristique nunc et eros ornare, et mollis mi pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <p> Donec eu posuere sem. Etiam et massa non purus vehicula feugiat. Integer porta velit metus, eget tempor purus posuere non. Nam aliquam, lectus nec finibus venenatis, nunc urna porta lorem, commodo vehicula ex ante at augue. Vivamus nec erat sit amet nibh congue ullamcorper eget a eros. Integer varius turpis ut ex mollis, nec scelerisque est pretium. Phasellus nec lorem convallis, tincidunt ligula nec, ornare metus. Vivamus at lorem eget augue rhoncus varius. Curabitur hendrerit, nibh ut sagittis ultrices, ipsum elit tempus arcu, ac ullamcorper metus magna in lacus. Morbi elementum imperdiet magna in ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed fermentum leo, ac cursus sapien. Proin neque nisi, tempor vel massa et, consectetur eleifend sem. </p> <p> Aliquam erat volutpat. Donec lectus velit, rhoncus non euismod in, scelerisque sed libero. Nunc et neque est. Nam viverra ac quam interdum auctor. Nulla sed lacus mauris. Proin sit amet ultricies lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nulla sed cursus neque. </p> <p> Curabitur blandit ipsum fermentum mauris consequat, ut feugiat nisl consequat. Nullam sit amet commodo diam. Etiam fringilla felis et augue mattis, sed dapibus massa tristique. Mauris ut nisi eget ex faucibus hendrerit. Mauris ut nisi nulla. Aenean et urna dolor. Aenean consectetur metus urna, a mattis orci pretium nec. Pellentesque non augue magna. In accumsan nisl tellus, id porttitor nisi feugiat eu. Curabitur eleifend urna ac augue congue tincidunt. </p> </div>元素只渲染像素图像,而不是HTML元素,这意味着内容将不再可选,链接将被破坏等... *并且您将面临{{3 }}。 *请注意,您可以解决那些经过大量计算的人

另一个解决方案,如果你真的不需要对内容产生这种影响,那就是伪造它,使用CSS径向渐变和边界半径,正如html2canvas' limitations在{{3}中提出的那样。 }}:

<canvas>
var div = document.querySelector('div');
var pt=-100;
function animBG(){
	pt=((pt 101)00)-100;
	div.style.backgroundImage= 'radial-gradient(ellipse at ' pt '% ' pt '% , rgb(255, 255, 255) 0%, rgb(214, 214, 214) 45%, rgb(174, 176, 173) 58%)';
	requestAnimationFrame(animBG)
	}
animBG();
div {
		  height: 600px;
		  width: 600px;
		  border-radius: 100%;
		  background: transparent radial-gradient(ellipse at 30% 20%, rgb(255, 255, 255) 0%, rgb(214, 214, 214) 45%, rgb(174, 176, 173) 58%) repeat scroll 0% 0%;
		  text-align: center;
		  position: relative;
          box-shadow: inset 0px 0px 15px rgba(60,60,60,.5);
		}
		div>p {
		  width: 344px;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  color: rgba(0, 0, 0, .7)
		}

答案 1 :(得分:0)

在这种情况下,css transitions会有所帮助,请以这种方式查看链接,您可以调整div from left to right以及您想要的任何方向。或者,如果您想为div设置div的动画效果,请@keyframecss

中使用utf-8从一个地方移动到另一个地方
DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
教程弟学习网站 » javascript - html,css中的三维曲率拟合

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情