Three.js基础探寻一-安度博客

时间：2019-02-04 14:53:25 作者：来源：阅读：145 评论：0

内容摘要：1.webGL　　一种网络尺度，界说了一些较底层的图形接口。2.Three.js　　一个3Djs库，webGL开源框架中较量优秀的一个。除了webGL以外，Three.js还提供了基于Canvas、SVG标签的渲染器。　　这是一个开源项目。3.情况　　找一个喜欢的jsIDE。调试......

1.webGL

　　一种网络尺度，界说了一些较底层的图形接口。

2.Three.js

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

　　这是一个开源项目。

3.情况

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

4.下载

　　传送门

5.使用

<head> <script type=&＃39;text/javascript&＃39; src=&＃39;js/three.js&＃39;></script></head>

　　webGL的渲染需要canvas，Three.js可以生成，也可以自界说canvas：

<body onload=&＃39;init()&＃39;> <canvas id=&＃39;mainCanvas&＃39; width=&＃39;400px&＃39; height=&＃39;300px&＃39; ></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(400300);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使用的坐标系是右手坐标系：

　　相机分正投影相机和透视投影相机。这里先界说一直透视投影的照相机，：

var camera = new THREE.PerspectiveCamera(454/311000);//四个参数划分对应：视角、近处的裁面的距离、远处的裁面的距离、实际窗口的纵横比（后面会详细讨论）camera.position.set(005);//设置相机位置scene.add(camera);//添加加入景中。

9.长方体

　　建设一个xyz偏向长度划分为1、2、3的红色长方体：

var cube = new THREE.Mesh(new THREE.CubeGeometry(123)　　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=&＃39;UTF-8&＃39;><title>3.js测试一</title></head><body onload=&＃39;init()&＃39;><canvas id=&＃39;mainCanvas&＃39; width=&＃39;400px&＃39; height=&＃39;300px&＃39; ></canvas><script type=&＃39;text/javascript&＃39; src=&＃39;js/three.min.js&＃39;></script><!--路径改成你的--> <script type=&＃39;text/javascript&＃39;> function init() { // renderer 渲染器 var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(&＃39;mainCanvas&＃39;)　　//绑定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>

　　渲染的效果是：

分享到：微信新浪微博腾讯微博 QQ空间腾讯朋友百度新首页

上一篇：前端资源多个产品整站一键打包&包版本管理（二）如何在bower的配置文件加上注释-安度博客
下一篇：校招季献给前端求职路上的你们（JS）-安度博客

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考，不作任何商业用途，不以营利为目的，专注分享快乐，欢迎收藏本站！

所有信息均来自：百度一下 (威尼斯人官网)

Three.js基础探寻一-安度博客

最近更新

精彩推荐

阅读排行