保存到桌面加入收藏设为首页
java开发
当前位置:首页 > java开发

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>

      渲染的效果是:

     

     


最近更新

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)