3D - web秀

#3D#

共找到 3D 相关内容 15 条

translate3D有什么作用？

4年前

545627 3260 0

6年前

前端迈进3D时代-Three.js初识

前端迈进3D时代-Three.js初识

初识Three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景。Three.js学习之前，我们需要了解他的三个关键对象：1.场景（场景对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象）2.相机（Camera相当于人的眼睛，从坐标的那个视点去观察目标，相当于投影出立体感。）3.渲染器（渲染器可以视为是canvas标签，相机可以视为画布。注意画布和canvas标签不是同一个东西，canvas标签是画布的容器。画布就好比一张图片，而canvas标签就像im

558038 3788 0

6年前

前端迈进3D时代-three.js高阶（3D图片预览）

前端迈进3D时代-three.js高阶（3D图片预览）

前言前面通过一篇简单的文章，讲述了three.js是干什么的，有哪些主要的对象，今天我们来学习一下更深层次的知识。下面是上一期文章。《前端迈进3D时代-Three.js初识》核心代码材质中使用纹理，这里的纹理就是图片，添加到场景中THREE.ImageUtils.loadTexture(url,{},function(){}）控制器controls=newTHREE.OrbitControls(camera,renderer.domElement)控制器参数//鼠标控制是否可用controls.enabl

557918 3866 0

5年前

CSS3实现3D水晶立方体效果

CSS3实现3D水晶立方体效果

前言前段时间写过一篇《CSS3实现美美哒的图片倒影效果》，里面最后一步，“我们使倒影倾斜一个角度，让整个倒影效果更具有立体效果”，不知道大家有没有联想到用倾斜，我们可以制作一个立方体呢？？？今天我们就来用纯css制作一个立方体，主要用到的知识就是transform:rotate，没有了解的可以点击下方文章了解：《CSS3中transition、transform傻傻分不清楚》效果预览图：解析立方体，是由6个面组成的，所以我们主要是操作6个面，组合成一个立方体就可以实现。观察者方向的为z轴的正值方向rota

555752 3768 0

4年前

CSS3D世界，纯CSS如何绘制三棱锥

CSS3D世界，纯CSS如何绘制三棱锥

非常抱歉，断更了半年，原因也是有很多，疫情期间在老家也是没有电脑，上班后非常的忙，种种原因吧。让小伙伴们久等了，非常抱歉！后续还是保持正常更新，不辜负小伙伴们的信任。下面还是回归今天的主题：CSS如何制作三棱锥？结构三棱锥，大家看图，应该能看到它共有4个面，分别是3个侧面，1个底面。我们将其细分为，前面、左面、右面和底面。用html表示如下：<ulclass="cones-inner"><liclass="front"></li><liclass="right"&

548553 3350 0

4年前

CSS 3D世界，360°旋转水晶魔方

CSS 3D世界，360°旋转水晶魔方

你家有类似的水晶魔方吗？我第一次见到它的时候，就觉得这个东西真不错，所以我家现在有2个。不过一个已经坏掉了，坐车放在箱子里面，颠簸导致水晶的四个角都破损了，大家如果要携带一定要小心哦。现在我们来制作一个永远不会破损的水晶魔方，用代码实现，要不代码出bug，永远不坏。CSS3实现水晶魔方效果。结构水晶是一个正方体，所以有6个面，用html表示如下：<ulclass="cube-inner"><liclass="top"></li><liclass="bottom"&

548853 3276 0

4年前

CSS 3D世界，3D 透视照片墙

CSS 3D世界，3D 透视照片墙

有了前面2章内容，大家应该对CSS3D的构建，都有了一定认知了，动手能力强的小伙伴可能已经开始自己做好看的效果了。今天我们就来滚固一下前面学的知识，下面有一个"3D照片墙"示例来加深一下我们所学的知识。结构用一个容器div.photo，装六个面<divclass="photo"><divclass="example"></div><divclass="example"></div><divclass="example"></di

547518 3381 0

4年前

CSS3之3D魔方鼠标控制酷炫效果

CSS3之3D魔方鼠标控制酷炫效果

前面文章有制作水晶魔方，这次我们升级一下它的功能，通过鼠标控制魔方旋转。大家先看效果这酷炫的效果，你怎么看？鼠标事件这次效果，咱们需要用JS实现。主要是监听鼠标事件，计算鼠标滑动距离，改变魔方的rotateX、rotateYJS有哪些鼠标事件呢？1、click：单击事件。2、dblclick：双击事件。3、onmousedown：鼠标按下时触发事件，不管按住左键/右键还是滑轮都可以4、onmousemove：鼠标移动实时触发事件5、onmouseup：鼠标松开时触发事件6、mousemove：鼠标移动事件

547398 3303 0

2年前

3D 穿梭效果？使用 CSS 轻松搞定

3D 穿梭效果？使用 CSS 轻松搞定

背景周末在家习惯性登陆Apex，准备玩几盘。在登陆加速器的过程中，发现加速器到期了。我一直用的腾讯网游加速器，然而点击充值按钮，提示最近客户端升级改造，暂不支持充值（这个操作把我震惊了~）。只能转头下载网易UU加速器。打开UU加速器首页，映入眼帘的是这样一幅画面：瞬间，被它这个背景图吸引。出于对CSS的敏感，盲猜了一波这个用CSS实现的，至少也应该是Canvas。打开控制台，稍微有点点失望，居然是一个.mp4文件：再看看Network面板，这个.mp4文件居然需要3.5M？emm，瞬间不想打游戏了。这么个

546760 3298 0

2年前

奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

本文将从比较多的方面详细阐述如何利用CSS3D的特性，实现各类有趣、酷炫的动画效果。认真读完，你将会收获到：了解CSS3D的各种用途激发你新的灵感，感受动画之美对于提升CSS动画制作水平会有所帮助CSS3D基础知识本文默认读者掌握一定的CSS3D知识，能够绘制初步的3D动画效果。当然这里会再简单过一下CSS3D的基础知识。使用transform-style启用3D模式要利用CSS3实现3D的效果，最主要的就是借助transform-style属性。transform-style只有两个值可以选择：//语法

545708 3315 0

下拉加载更多