|
锁定老帖子 主题：3D模型（three.js）
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-02-24
使用three.js库，在页面中导入显示3D模型。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MGA-411 Mangusa</title>
<script type="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>
<div id="Loading" style="color:#fff">Loading...</div>
</body>
<script>
/* 场景 */
var WIDTH = document.documentElement.offsetWidth || 800,
HEIGHT = document.documentElement.clientHeight || 600;
var scene = new THREE.Scene();
/* 摄像头 */
var VIEW_ANGLE = 75,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(0, 0, 1000);
scene.add(camera);
/* 渲染器 */
var renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH , HEIGHT);
document.body.appendChild(renderer.domElement);
/* 灯光 */
var light = new THREE.DirectionalLight(0xFFFFFF);
light.position.set(0, 0, 99).normalize();
scene.add(light);
/* 显示对象 */
var material = new THREE.MeshLambertMaterial({ color: 0xcccccc, wireframe: true }),
obj;
var loader = new THREE.JSONLoader(true);
loader.load("http://www.cssass.com/blog/resource/threejs/model/MGA.js", function ( geometry ) {
var loading = document.getElementById("Loading");
loading.parentNode.removeChild(loading);
obj = new THREE.Mesh(geometry, material);
obj.position.set(0,1,990);
scene.add(obj);
var start = new Date().getTime(),delta;
(function anime(){
delta = new Date().getTime() - start;
obj.rotation.y = delta / 1000;
renderer.render(scene, camera);
return requestAnimationFrame(anime);
})();
});
</script>
</html>
预览地址：http://www.cssass.com/blog/index.php/2012/1266.html 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2012-02-27
awesome project
|
| 返回顶楼 | |
|
发表时间：2012-02-27
chrome浏览器测试不通过，仅显示黑屏，一个"loading......"
|
| 返回顶楼 | |
|
发表时间：2012-02-27
沙舟狼客 写道 chrome浏览器测试不通过，仅显示黑屏，一个"loading......" 模型数据有点大，1.7M，http://www.cssass.com/blog/resource/threejs/model/MGA.js。可以先把这个打开再试试 |
| 返回顶楼 | |
|
发表时间：2012-02-27
IE9也同样的问题，打不开，黑屏，只显示“loading……”
|
| 返回顶楼 | |
|
发表时间：2012-02-27
ie要到10才会支持WebGL
|
| 返回顶楼 | |
|
发表时间：2012-02-28
awesome
|
| 返回顶楼 | |
|
发表时间：2012-02-28
个人觉得很牛X嘛，问下那个机器人为何没有头。呵呵
|
| 返回顶楼 | |
|
发表时间：2012-02-28
fanfq 写道 个人觉得很牛X嘛，问下那个机器人为何没有头。呵呵 呵呵。我也不知道，用的是这个模型：http://thedarkbanditking.deviantart.com/gallery/?q=MANGUSA+#/da621z |
| 返回顶楼 | |
|
发表时间：2012-02-28
最后修改：2012-02-28
ONEBOYS 写道 ie要到10才会支持WebGL
不过，three.js支持三种渲染模式：canvas，webgl，svg 只需改变渲染器的类方法，WebGLRenderer为CanvasRenderer或SVGRenderer就能支持ie9还有opera11吧。 不过，性能会差很多 |
| 返回顶楼 | |
