Three.js之如何創造一個場景

上一面講述了在場景中加入物件物件。這篇準備把每個功能點細細的敘述一遍，一方面是為了加深自己的理解。另一方面希望能夠

幫助到有需要的人。

一、在學習WEBGL的時候，你應該先了解要建立一個WebGL程式需要哪些步驟。就跟弄梅菜扣肉一樣，需要哪些步驟。

• 初始化WebGL繪圖上下文

• 初始化著色器程式

• 建立模型與資料快取

• 完成繪製和動畫

這是一個面向過程程式設計。然而three.js不一樣，是物件導向程式設計。主要建構三個物件 scene(場景) camera(相機) renderer(渲染器).。

這三個東西是什麼意思呢？聽起來完全不懂是啥。舉個小列子：就拿電影來說。場景（scene)就好比整個版面空間，相機(camera)相當於

拍攝期。而渲染器相當於(renderer)把拍攝的電影轉換成膠卷也就是電腦的螢幕。

場景和空間包含了3D和資料模型，而renderer包含了著色器和WebGL繪圖上下文。

二、THREE.JS創建場景，相機，渲染器

nbsp;html><meta><title>Demo1(three入门第一篇)</title><script></script><script>var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
        远景相机，相当于人眼观察模式
        肯定有人会有疑问，这几个参数是什么意思呢？
        第一个 75 是 视角
        width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
        的width/height图形就不会被压变形。
        下面两个是近裁剪面。和远裁剪面。     */var renderer = new THREE.WebGLRenderer();  //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。    renderer.setSize(width,height);
    document.getElementsByTagName(&#39;body&#39;)[0].appendChild(renderer.domElement);</script>

電影，場景，膠卷都準備好了，那如何才能展示演員呢？也就是上面一篇說 的如何在場景中加入物件物件呢？

三、新增演員（3D立方體）。

 //演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh);  //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。renderer.render(scene,camera); //把画面转换成相机，并播放

這樣這個演員就入鏡了。

四、如何讓這位演員動起來呢？

    //懂动起来。function loop(){
        requestAnimationFrame(loop);
        mesh.rotation.x += 0.1;  //X选择mesh.rotation.y += 0.1;  //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放    }
    loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
     比如浏览器Tab切换后停止渲染以节约资源、
     和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
     简直就是动画神奇     */

演員入鏡，並有了，打動效果。第一個小短篇算完成了吧。

五、整個程式碼(本來想託管到githup上)。發現太慢了。

nbsp;html>


    <meta>
    <title>Demo1(three入门第一篇)</title>




<script></script>
<script>var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
        远景相机，相当于人眼观察模式
        肯定有人会有疑问，这几个参数是什么意思呢？
        第一个 75 是 视角
        width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
        的width/height图形就不会被压缩。
        下面两个是近裁剪面。和远裁剪面。     */var renderer = new THREE.WebGLRenderer();  //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。    renderer.setSize(width,height);
    document.getElementsByTagName(&#39;body&#39;)[0].appendChild(renderer.domElement);//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:&#39;red&#39;});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh);  //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。//懂动起来。function loop(){
        requestAnimationFrame(loop);
        mesh.rotation.x += 0.1;  //X选择mesh.rotation.y += 0.1;  //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放    }
    loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
     比如浏览器Tab切换后停止渲染以节约资源、
     和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
     简直就是动画神奇     */</script>

六、在WebGL中three.js扮演了重要的角色，然而中文api真的少。只有一個一個的慢慢累積。

 

以上是Three.js之如何創造一個場景的詳細內容。更多資訊請關注PHP中文網其他相關文章！