Three.js基础探寻一

1.webGL

  一种网络标准,定义了一些较底层的图形接口。

2.Three.js

  一个3Djs库,webGL开源框架中比较优秀的一个。除了webGL以外,Three.js还提供了基于Canvas、SVG标签的渲染器。

  这是一个开源项目

3.环境

  找一个喜欢的jsIDE。调试建议使用Chrome或者Firefox。

4.下载

  传送门

5.使用

<head>

    <script type="text/javascript" src="js/three.js"></script>

</head>

  webGL的渲染需要canvas,Three.js可以生成,也可以自定义canvas:

<body onload="init()">

    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>

</body>

在js中定义一个init函数,在HTML加载后执行:

function init(){

  // ...

}

  Three.js程序要包括三大组建:

  场景(Scene)、相机(Camera)、渲染器(Renderer),以及你创建的物体。

6.渲染器(Renderer)

  渲染器将和Canvas元素进行绑定,接着上面的:

var renderer = new THREE.WebGLRenderer({

    canvas: document.getElementById(‘mainCanvas’)

});

  如果想要Three.js生成Canvas元素,在HTML中就不需要定义canvas,在js中可以这样写:

var renderer = new THREE.WebGLRenderer();

renderer.setSize(400,300);

document.getElementsByTagName(‘body’)[0].appendChild(renderer.domElement);

  第二行设置了Canvas的宽高。第三行将渲染器对应的Canvas元素添加到<body>中。

  下面这句可以设置背景为黑色:

renderer.setClearColor(0x000000);

7.场景(Scene)

  在Three.js中添加的物体都是添加到场景中的。在程序最开始的时候进行实例化,然后将物体添加到场景中即可。

var scene = new THREE.Scene();

8.照相机(Camera)

  webGL和Three.js使用的坐标系是右手坐标系:

Three.js基础探寻一

  相机分正投影相机和透视投影相机。这里先定义一直透视投影的照相机,:

var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);

//四个参数分别对应:视角、近处的裁面的距离、远处的裁面的距离、实际窗口的纵横比(后面会详细讨论)

camera.position.set(0,0,5);//设置相机位置

scene.add(camera);//添加到场景中。

9.长方体

  创建一个x,y,z方向长度分别为1、2、3的红色长方体:

var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),

  new THREE.MeshBasicMaterial({
 
    color: 0xff0000   }) ); scene.add(cube);

  其中,THREE.Mesh表示网格模型;THREE.CubeGeometry表示立方体盒子;MeshBasicMaterial是一种材质:对光照无感,给几何体一种简单的颜色或显示线框。最后添加到场景中。

10.渲染

  在定义了场景中的物体,设置好的照相机之后,渲染器就知道如何渲染出二维的结果了。调用渲染器的渲染函数,就能使其渲染一次了。

renderer.render(scene, camera);

11.示例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>3.js测试一</title>

</head>

<body onload="init()">

<canvas id="mainCanvas" width="400px" height="300px" ></canvas>

<script type="text/javascript" src="js/three.min.js"></script><!--路径改成你的-->

        <script type="text/javascript">

            function init() {

                // renderer 渲染器

                var renderer = new THREE.WebGLRenderer({

                    canvas: document.getElementById('mainCanvas')  //绑定canvas

                });

                renderer.setClearColor(0x000000); // black 

                // scene 场景

                var scene = new THREE.Scene();  //实例化场景

                // camera 照相机

                var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);  //透视投影相机参数设置

                camera.position.set(0, 0, 5);  //相机位置设置

                scene.add(camera);  //添加到场景

                // a cube in the scene 创建的物体

                var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),  //创建网格,参数一:几何体(立方体)

                        new THREE.MeshBasicMaterial({  //参数二:材质(网格基础材质)
color: 0xff0000  //设置颜色 }) ); scene.add(cube);  //添加到场景 // render 渲染 renderer.render(scene, camera); } </script> </body> </html>

  渲染的效果是:

Three.js基础探寻一

  下一篇: Three.js基础探寻二

  整理自张雯莉《Three.js入门指南》

  其他参考:WebGL中文网

上一篇:laravel 数据库查询的一些函数意义(未完)


下一篇:Linux命令行下载文件百度云盘