Three.js的学习历程(一) -

dragonrxl

浏览: 1262 次
性别:
来自: 济南

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-11 ( 1)
更多存档...

Three.js的学习历程(一)

博客分类：

WebGL 3D

Three WebGL 3D 三维

WebGL之Three.js的学习之路，WebGL本身学习起来不太容易，偶尔发现Three.js库封装的很好，简单记录下学习语法。

首先Three分三大块来组装:

(1)场景(scene)

(2)相机(camera)

(3)渲染器(renderer)

如何创建这三大块呢？直接代码来展示

场景:

var scene = new THREE.Scene(); // 创建场景

相机:(分多种，下面是透视相机的生成代码)

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); //透视相机

渲染器:

var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(400, 300); // 设置渲染器的宽度和高度
document.body.appendChild(renderer.domElement); // 添加到页面当中

OK，基本框架完成。

第二步:将物体添加到场景中去

var geometry = new THREE.CubeGeometry(1, 1, 1); // 生成立方体，参数是X轴 Y轴 Z轴的长度
var material = new THREE.MeshBasicMaterial({color: 0xff0000}); // 立方体纹理
var cube = new THREE.Mesh(geometry, material); // 将纹理覆盖到立方体上

scene.add(cube); // 将立方体添加到场景中

第三步:渲染

下面使用渲染器将立方体渲染到页面中去，实现这功能的函数是:

renderer.render(scene, camera); // 看参数名字就知道 scene是场景，camera是相机

OK，接下来看全部代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="../js/three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>

分享到：

2015-11-21 11:49
浏览 1262
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Three.js的学习历程(一)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Three.js的学习历程(一)

评论

发表评论

相关推荐

最近访客更多访客>>