http://www.cssass.com/blog/index.php/2012/1266.html
使用three.js库,在页面中导入显示3D模型。
- <!DOCTYPEhtml>
- <html>
- <head>
- <metacharset="UTF-8"/>
- <title>MGA-411Mangusa</title>
- <scripttype="text/javascript"charset="utf-8"src="http://www.cssass.com/blog/resource/threejs/three.js"></script>
- <style>body{overflow:hidden;background:#000}</style>
- </head>
- <body>
- <divid="Loading"style="color:#fff">Loading...</div>
- </body>
- <script>
- varWIDTH=document.documentElement.offsetWidth||800,
- HEIGHT=document.documentElement.clientHeight||600;
- varscene=newTHREE.Scene();
- varVIEW_ANGLE=75,
- ASPECT=WIDTH/HEIGHT,
- NEAR=0.1,
- FAR=10000;
- varcamera=newTHREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
- camera.position.set(0,0,1000);
- scene.add(camera);
- varrenderer=newTHREE.WebGLRenderer();
- renderer.setSize(WIDTH,HEIGHT);
- document.body.appendChild(renderer.domElement);
- varlight=newTHREE.DirectionalLight(0xFFFFFF);
- light.position.set(0,0,99).normalize();
- scene.add(light);
- varmaterial=newTHREE.MeshLambertMaterial({color:0xcccccc,wireframe:true}),
- obj;
- varloader=newTHREE.JSONLoader(true);
- loader.load("http://www.cssass.com/blog/resource/threejs/model/MGA.js",function(geometry){
- varloading=document.getElementById("Loading");
- loading.parentNode.removeChild(loading);
- obj=newTHREE.Mesh(geometry,material);
- obj.position.set(0,1,990);
- scene.add(obj);
- varstart=newDate().getTime(),delta;
- (functionanime(){
- delta=newDate().getTime()-start;
- obj.rotation.y=delta/1000;
- renderer.render(scene,camera);
- returnrequestAnimationFrame(anime);
- })();
- });
- </script>
- </html>
预览地址:
http://www.cssass.com/blog/index.php/2012/1266.html
分享到:
相关推荐
完全基于FLEX的WEB3D引擎例子源码及教程.rar
完全基于FLEX的WEB3D引擎例子源码及教程. *.fla 为FLASH的源文件 *.swf 用IE打开. *.as 对应FLEX源码 其它的不说了!
Web3D引擎中三维图形对象拾取的算法与实现 是一篇介绍在三维引擎中拾取算法的论文,供大家在学习拾取算法时参考使用
游戏开发、前端3d引擎。给需要下载的git比较慢的用户 https://github.com/mrdoob/three.js/
HT for Web,通常简称为 HT,这是一个基于 JavaScript 开发的 WebGL 引擎。可用于 2D/3D 可视化开发,其核心文件只有一个,就是 ”ht.js”。在 index.html 中使用 script 标签进入后便可使用。 完全版本效果:...
Wonder.js 是一款功能强大的高性能 3D WebGL 引擎
蓝牛web3d引擎安装包
Block3D是专为3D设计师打造的零代码Web3D开发工具,用于帮助用户实现可交互的3D网页。其中,拼图是实现交互的主要工具,它具有直观、易用、模块化、结构化等优点,通过拖拽就能实现编程,极大地降低了用户的学习成本...
基于WEB的三维地图开发引擎,提供一站式搭建离线/在线地图数据服务器,支持多种地图离线发布;提供快速WEB应用、WMTS、TMS、WMS等地图服务;支持二次开发调用;支持数据集管理、支持矢量数据编辑、自定义数据属性...
Three.js作为一款强大的Web 3D引擎,为开发者提供了丰富的功能和灵活的使用方式。通过掌握其基本概念和使用方法,并结合实用技巧和最佳实践,您可以轻松地创建出令人惊叹的三维场景和动画效果。希望本文能为您的...
企业内部Web3D开发技术分享,Web3D是一种利用Web技术创建和展示3D场景和模型的技术。...Web3D技术通常使用HTML、CSS、JavaScript等Web标准技术进行开发,并使用各种3D引擎和库来实现3D渲染、交互和动画等功能。
f3earth:一个Web 3D GIS引擎
针对煤矿数字化及 BIM 技术的应用现状, 研发了基于开源三维引擎的 Web3D 可视化平台, 以免插件、 轻量化和跨平台的技术路线要求, 对比主流基于 WebGL 的开源三维引擎框架, 设计符合 BIM 模型可视化要求的矿用要素类...
Three.js 作为原生 web3D 引擎,对插件式 web3D 引擎的优势不言而喻:不需要安装插件、在移动端支持好。 Three.js 与其他原生 web3D 引擎对比: Babylon.js:一个强大的 3D 游戏引擎,由 Microsoft 的员
本章提供了一个简单的、被封装成JavaBean的、实现了Web动态图表生成引擎的最基本功能的设计思路及其实现方式。它具有使用和开发都很简单、易于发布/部署、扩展性强(虽然仅仅演示了普通/3D线段图、普通/3D直方图、...
ROYGBIV是一个WebGL引擎,适合那些没有预算购买花哨的3D模型或获得流行引擎许可的预算但仍然希望为移动和台式机制作60 FPS Web应用程序的程序员。 这种程序员之一是在图形的THREE.js低级功能和物理学的CANNON.js之上...
G3D 是一款基于 WebGL 的 javascript 3D 绘图引擎。与其他的 WebGL 3D 引擎相比,G3D 是更加「纯粹」的渲染引擎,也就是说,它完全不依赖任何 DOM API,而是仅仅依赖一个 canvas 对象(或者类 canvas 对象)
1、Unity3D引用System.Web.DLL打包发布的问题及解决 2、Unity3d中使用HttpUtility,如果直接在plugins中引入 System.Web.DLL的话,在对Unity3d项目打包的时候会报错,在U3D环境中,编译运行一切正常,但在打包发布...
Simple React Webpack Babel入门套件 厌倦了具有超过250MB依赖关系的复杂启动器,这些依赖...打开Web浏览器到http://localhost:8080/ 去测试 要运行单元测试: npm run test 制作生产包装 npm run build 埃斯林特 .e
Godot 2D和3D跨平台游戏引擎源码,可以自己编译使用,Godot 2D和3D跨平台游戏引擎是一个功能丰富的跨平台游戏引擎,可通过统一界面创建2D和3D游戏。**它提供了一个全面的通用工具集,使用户可以专注于制作游戏 无需...