搜索
创作
提问
登录注册
展开

关键词

JS 3D 模型

这是一个简单的 JS 3D 模型，能跑在包括 IE6 的所有浏览器上，结合一下 tween 缓动算法，理论上已经可以完美模拟像 http://www.cu3ox.com/ 这个网站上方 banner 的各种变换效果了 介绍一下实现细节，矢量绘图仍然用的是 Raphael 库，Raphael 我在《如何用 JS 实现 3D ×××效果》这篇文章里有过介绍。 关于画家算法 渲染器工作时，会从他的角度上能看到的所有物体都描绘出来，即用 2D 的手法去描述 3D 的物体。

91220

three.js 运行3D模型

文件 <script src="<em>js</em>/threejs/three.<em>js</em>"></script> <script src="<em>js</em>/threejs/Detector.<em>js</em>"></script > <script src="<em>js</em>/threejs/stats.min.<em>js</em>"></script> <script src="<em>js</em>/threejs/ColladaLoader.<em>js</em>">< --3D模型加载器--> <script src="<em>js</em>/threejs/DDSLoader.<em>js</em>"></script> <script src="<em>js</em>/threejs/OrbitControls.<em>js</em> "></script> <script src="<em>js</em>/threejs/VTKloader.<em>js</em>"></script> <script src="<em>js</em>/threejs/TrackballControls.<em>js</em> "></script> //初始化 调用 函数 <script src="resources/controller.<em>js</em>"></script> </body> </html> model.js 实例指向的原型方法

1.4K30
  • 广告
    关闭

    什么是世界上最好的编程语言？丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿！

    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    网页|JS实现3D旋转相册

    问题描述 3D旋转相册是通过perspective属性的盒子1产生向网页内部的延伸感，并让装有图片沿z轴平移后的盒子2在拥有perspective属性的盒子1内凭transform属性产生的3d效果沿盒子 解决方案 1.属性介绍 (1)perspective属性： 多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。 注意：perspective 属性只影响 3D 转换元素。 (2)transform属性： 应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 border: 1px solid black; transform-style: preserve-3d; /*实现3d 这时候为装有图片的盒子加上transform:rotateX(-15deg);便能看到较为完整的3d效果了，此时实现盒子绕y轴转动便可实现旋转木马的效果。 ?

    1.1K10

    three.js 绘制3d地图

    这篇郭先生就来说说使用three.js几何体制作3D地图。 在线案例点击3D中国地图 地图的数据是各个地图块的点数组，通过THREE.ExtrudeGeometry方法挤压出地图的版块，然后通过THREE.Line方法画出地图的分割线。 } }, 主要代码部分就是这样，我们也可以在颜色改变时加入一些渐变动画，three.js可以写出各种各样的地图，这是入门级的版本，希望给萌新一些启发。 转载请注明地址：郭先生的博客

    2.4K20

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

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

    1.1K10

    js实现图片3D轮播效果（收藏）

    3D的图片轮播效果很炫，写到这里只是为了不丢代码，不为别的。 效果预览： ? html代码： <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js实现3D图片逐张轮播幻灯片 /img/3D轮播效果/btn.png) left bottom no-repeat;left:0px} #focus_Box .next{background:url(.. /js/3D轮播效果/ZoomPic.js"></script>

    Three.js - 走进3D的奇妙世界

    本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。 Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。 一、Three.js相关概念 1.1 Three.JS Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。 二、Three.js应用场景 利用Three.JS可以制作出很多酷炫的3D动画，并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互，在页面上增加一些3D动画和3D交互可以产生更好的用户体验。 在电商行业利用Three.JS可以实现产品的3D效果，这样用户就可以360度全方位地观察商品了，给用户带来更好的购物体验。另外，使用Three.JS还可以制作类似微信跳一跳那样的小游戏。

    2.2K20

    Three.js - 走进3D的奇妙世界

    本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。 Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。 一、Three.js相关概念 1.1 Three.JS Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。 二、Three.js应用场景 利用Three.JS可以制作出很多酷炫的3D动画，并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互，在页面上增加一些3D动画和3D交互可以产生更好的用户体验。 在电商行业利用Three.JS可以实现产品的3D效果，这样用户就可以360度全方位地观察商品了，给用户带来更好的购物体验。另外，使用Three.JS还可以制作类似微信跳一跳那样的小游戏。

    4K40

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

    初识 Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景。 Three.js学习之前，我们需要了解他的三个关键对象： 1.

    46420

    vtk.js、three.js在浏览器展示3d图形

    用paraview对vtk进行extract surface后再另存为vtk可以转成polydata类型的vtk，可以在three.js上显示，但不能在vtk.js里显示。 在静态页面中，而不是vue中，可以这样来使用three.js： <! DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - loaders - vtk loader</title> <meta head> <body>

    3D拓扑自动布局之Node.js篇

    上篇将3D弹力布局的算法运行在Web Workers后台，这篇我们将进一步折腾，将算法运行到真正的后台：Node.js，事先申明Node.js篇和Web Workers篇一样，在这个应用场景下并不能提高性能 io = require('socket.io').listen(8036); ht = require('ht.js').ht; require("ht-forcelayout.js"); reloadModel 插件都是可运在Web Workers和Node.js的非GUI环境，因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储。 2、Util.js定义的reloadModel函数我增加了this.reloadModel = reloadModel;的逻辑，这样才能在Node.js后台代码reloadModel = require ，我打开了两个页面，这样就会有两个socket分别连接后台Node.js，而Node.js默认是单线程的，如果正在一个请求函数密集运算处理，则其他请求只能排队等待处理，这也是视频中我拖拽一个页面布局是，

    589100

    原 3D拓扑自动布局之Node.js篇

    上篇将3D弹力布局的算法运行在Web Workers后台，这篇我们将进一步折腾，将算法运行到真正的后台：Node.js，事先申明Node.js篇和Web Workers篇一样，在这个应用场景下并不能提高性能 的类库肯定不能操作window和document之类的页面特定元素对象，从这点说很多考虑不周全的类库会把自己限制死只能在页面主线程运行，这点HT for Web考虑得很周到，不仅ht.js包括所有ht-forcelayout.js 插件都是可运在Web Workers和Node.js的非GUI环境，因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储。 2、Util.js定义的reloadModel函数我增加了this.reloadModel = reloadModel;的逻辑，这样才能在Node.js后台代码reloadModel = require ，我打开了两个页面，这样就会有两个socket分别连接后台Node.js，而Node.js默认是单线程的，如果正在一个请求函数密集运算处理，则其他请求只能排队等待处理，这也是视频中我拖拽一个页面布局是，

    29730

    基于 three.js 的 3D 粒子动效实现

    three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API帮助我们去实现3D动效，本文主要介绍如何使用three.js实现粒子过渡效果，以及基本的鼠标交互操作 THREE里面实现了几种相机：PerspectiveCamera（透视相机）、 OrthographicCamera（正交投影相机）、CubeCamera（立方体相机或全景相机）和 StereoCamera（3D 创建、导出并加载模型文件loader** 创建模型，可以使用three.js editor进行创建或者用three.js的基础模型生成类进行生成，相对复杂的或者比较特殊的模型需要使用建模工具进行创建（c4d 采用GPU渲染方式** 编写片元着色器代码，利用webgl可以为canvas提供硬件3D加速，浏览器可以更流畅地渲染页面。 本文中的案例为大家展示了3D粒子动效如何实现，大家可以根据自己的实际需求去制作更炫酷的动态效果。

    2.2K30

    vue.js + three.js轻松构建3d场景的动画图形

    3d场景实现 实现彩色正方体旋转 <template lang="html">

    使用 Babylon.js 在 HTML 页面加载 3D 对象

    五一 Windwos Blogs 推了一篇博客， Babylon.js v3.2 发布了。因为一直有想要在自己博客上加载 3D 对象的冲动，这两天正好看到了，就动手研究研究。 期待美好而炫酷的未来ing Babylon.js 是什么 Babylon.js 是一个 JavaScript 开源框架，可以在浏览器或 Web 应用程序中简单便捷的构建 3D 游戏和 WebGL、WebVR 等 3D 体验。 Babylon.js 非常强大，强大到可以去构建商业游戏。毕竟我才花了两天时间去了解它，只用来加载 3D 对象确实是大材小用了，文档和 GitHub 地址在下面。 / 基本代码 Babylon.js 并不是所有的 3D 对象都支持，支持的类型： .glTF 、 .obj 、 .stl 、 .babylon 。

    1.2K120

    Three.js 的 3D 粒子动画：群星送福

    Three.js 的动画库是 Tween.js。 总之，3D 粒子动画就是顶点的 x、y、z 属性的变化，会用动画库来计算中间的属性值。 福字模型的顶点肯定不能随机，自己画也不现实，这种一般都是在建模软件里画好，然后导入到 Three.js 来渲染， 我找了这样一个福字的 3D 模型： 模型是 fbx 格式的，使用 FBXLoader /js/three.js"></script> <script src="./<em>js</em>/tween.<em>js</em>"></script> <script src=". /<em>js</em>/FontLoader.<em>js</em>"></script> <script src="./<em>js</em>/TextGeometry.<em>js</em>"></script> <script src=". 福字则是加载创建好的 <em>3D</em> 模型，拿到其中的顶点位置。 有了开始、结束位置，就可以实现粒子动画了，过程中的 x、y、z 值使用动画库 Tween.<em>js</em> 来计算，可以指定加速、减速等时间函数。

    13300

    使用Three.js构建基础3D场景 | 《Three.js零基础直通03》

    创建我们第一个3D场景 现在准备好用 Three.js 在网页里来创建我们的第一个3D场景。 要创建一个场景，使用Scene这个类： // Scene const scene = new THREE.Scene() 3D对象 3D对象可以是很多东西，比如一些最基本的几何体，导入的3D模型，粒子 ，灯光等等都是3D对象。 相机Camera 相机虽然也是一种3D对象，并且需要添加到场景中，但它本身是不可见的。当我们对3D场景进行渲染时，渲染器将从相机所在的角度来看。 因为我们没有指定3D立方体的位置，也没有设置相机的位置，它们默认的位置都在0,0,0，这是场景的中心，也就是说，相机此时正在立方体的内部。一般情况下，我们是无法从内部看到3D对象的。

    14940

    使用 Babylon.js 在 HTML 页面加载 3D 对象

    五一 Windwos Blogs 推了一篇博客， Babylon.js v3.2 发布了。因为一直有想要在自己博客上加载 3D 对象的冲动，这两天正好看到了，就动手研究研究。 期待美好而炫酷的未来ing Babylon.js 是什么 Babylon.js 是一个 JavaScript 开源框架，可以在浏览器或 Web 应用程序中简单便捷的构建 3D 游戏和 WebGL、WebVR 等 3D 体验。 Babylon.js 非常强大，强大到可以去构建商业游戏。毕竟我才花了两天时间去了解它，只用来加载 3D 对象确实是大材小用了，文档和 GitHub 地址在下面。 / 基本代码 Babylon.js 并不是所有的 3D 对象都支持，支持的类型： .glTF 、 .obj 、 .stl 、 .babylon 。

    85050

    Three.js基础之变换3D对象 | 《Three.js零基础直通04》

    前言 经过上一小节《使用Three.js构建基础3D场景 | 《Three.js零基础直通03》》，基础场景已经有了，现在我们来探索Three.js的一些功能。 让三维场景中的3D对象发生变换，有很多方式，甚至不需要操作3D对象本身。比如在前一小节中，我们已经通过使相机向后移动camera.position.z = 3来实现了立方体的缩小。 我们可以从Three.js的文档中看到类的继承关系。 这些属性最终将被转换成我们对应的矩阵数值。Three.js，WebGL和GPU内部都使用矩阵Matrix来进行变换。 这些是在3D空间中用于定位的3个轴向。 每个轴的方向并不能单纯的用水平垂直纵深去描述，因为它可以根据环境而变化，比如旋转。在Three.js中采用右手笛卡尔坐标系，y轴向上，z轴向后，x轴向右。 不过，好在我们可以使用Three.js提供的轴辅助工具 AxesHelper。

    11320
    点击加载更多

    相关产品

    • Serverless SSR

      Serverless SSR

      Serverless SSR 基于云上 Serverless 服务，开发了一系列服务端渲染框架组件，目前支持 Next.js, Nuxt.js 等常见 SSR 框架的快速部署，帮助用户实现框架迁移, “0”配置，SEO 友好，首屏加载速度快，为用户提供了便捷实用，开发成本低的网页应用项目的开发/托管能力。

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2022 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 京公网安备 11010802017518 粤B2-20090059-1

      扫码关注腾讯云开发者

      领取腾讯云代金券