亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Three.js基礎(chǔ)部分學(xué)習(xí)

 更新時(shí)間:2017年01月08日 15:11:31   作者:Avenstar  
本文主要分享了一個(gè)案例,介紹了使用Three.js繪制旋轉(zhuǎn)立方體的方法與實(shí)現(xiàn)過程。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧

一、關(guān)于使用Three.js幾點(diǎn)理論說明

1.請(qǐng)參考官網(wǎng)地址 https://threejs.org/

2.使用three.js必備條件  <場(chǎng)景 A scene、相機(jī)a camera、渲染器 a renderer  三者缺一不可>

To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.

3.場(chǎng)景 A scene、相機(jī)a camera、渲染器 a renderer 三者之間的關(guān)系  <渲染器的作用就是將相機(jī)拍攝下來(lái)的圖片,放到瀏覽器中去顯示>

三、案例使用Three.js繪制旋轉(zhuǎn)立方體

實(shí)現(xiàn)效果圖如下所示

案例案例源碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>用threejs構(gòu)建室內(nèi)模型</title>
 <style>
 #canvas-frame {
 width: 100%;
 height: 600px;
 }
 </style>
 </head>
 <body onload="threeStart()">
 <div id="canvas-frame" ></div>
 </body>
 <script type="text/javascript" src="./lib/three.js" ></script>
 <script type="text/javascript">
 var renderer, //渲染器
 width = document.getElementById('canvas-frame').clientWidth, //畫布寬
 height = document.getElementById('canvas-frame').clientHeight; //畫布高
 //初始化渲染器
 function initThree(){
 renderer = new THREE.WebGLRenderer({
 antialias : true
 //canvas: document.getElementById('canvas-frame')
 });
 renderer.setSize(width, height);
 renderer.setClearColor(0xFFFFFF, 1.0);
 document.getElementById('canvas-frame').appendChild(renderer.domElement);
 renderer.setClearColor(0xFFFFFF, 1.0);
 }
 //初始化場(chǎng)景
 var scene;
 function initScene(){
 scene = new THREE.Scene();
 }
 var camera;
 function initCamera() { //透視相機(jī)
 camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
 camera.position.x = 50;
 camera.position.y = 150;
 camera.position.z =150;
 camera.up.x = 0;
 camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸
 camera.up.z = 0;
 camera.lookAt({ //相機(jī)的中心點(diǎn)
 x : 0,
 y : 0,
 z : 0
 });
 // camera 正交相機(jī)
 /*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000);
 camera.position.x = 250;
 camera.position.y = 100;
 camera.position.z = 1800;
 camera.up.x = 0;
 camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸
 camera.up.z = 0;
 camera.lookAt({ //相機(jī)的中心點(diǎn)
 x : 0,
 y : 0,
 z : 0
 });*/
 }
 function initLight(){
 // light--這里使用環(huán)境光
 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
 //light.position.set(600, 1000, 800);
 var light = new THREE.AmbientLight(0xffffff); //模擬漫反射光源
 light.position.set(600, 1000, 800); //使用Ambient Light時(shí)可以忽略方向和角度,只考慮光源的位置
 scene.add(light);
 }
 function initObject(){ //初始化對(duì)象
 //初始化地板
 initFloor();
 }
 function initGrid(){ //輔助網(wǎng)格
 var helper = new THREE.GridHelper( 1000, 50 );
 helper.setColors( 0x0000ff, 0x808080 );
 scene.add( helper );
 }
 function initFloor(){
 //創(chuàng)建一個(gè)立方體
 var geometry = new THREE.BoxGeometry(80, 20, 80);
 for ( var i = 0; i < geometry.faces.length; i += 2 ) {
 var hex = Math.random() * 0xffffff;
 geometry.faces[ i ].color.setHex( hex );
 geometry.faces[ i + 1 ].color.setHex( hex );
 }
 var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
 //將material材料添加到幾何體geometry
 var mesh = new THREE.Mesh(geometry, material);
 mesh.position = new THREE.Vector3(0,0,0);
 scene.add(mesh);
 }
 //初始化頁(yè)面加載
 function threeStart(){
 //初始化渲染器
 initThree();
 //初始化場(chǎng)景
 initScene();
 //初始透視化相機(jī)
 initCamera();
 //初始化光源
 initLight();
 //模型對(duì)象
 initObject();
 //初始化網(wǎng)格輔助線
 initGrid();
 renderer.render(scene, camera);
 //實(shí)時(shí)動(dòng)畫
 //animation();
 }
 function animation(){
 //渲染成像
 var timer = Date.now()*0.0001;
 camera.position.x = Math.cos(timer)*100;
 camera.position.z = Math.sin(timer)*100;
 camera.lookAt(scene.position);
 renderer.render(scene, camera);
 requestAnimationFrame(animation);
 }
 </script>
</html>

一.場(chǎng)景 場(chǎng)景就是一個(gè)三維空間。 用 [Scene] 類聲明一個(gè)叫 [scene] 的對(duì)象。

二.關(guān)于上述案例中PerspectiveCamera透視相機(jī)注意點(diǎn)說明

  1. 照相機(jī)默認(rèn)的觀察方向是指向z軸負(fù)方向(就是朝向屏幕),所以當(dāng)變化坐標(biāo)以后,就要將照相機(jī)指向原點(diǎn),才能觀察到物體。

  2.利用 lookAt 方法來(lái)設(shè)置相機(jī)的視野中心。 「lookAt()」的參數(shù)是一個(gè)屬性包含中心坐標(biāo)「x」「y」「z」的對(duì)象。

  3.案例中使用透視相機(jī)(從視點(diǎn)開始越近的物體越大、遠(yuǎn)處的物體繪制的較小的一種方式、和日常生活中我們看物體的方式是一致的。)

  4.設(shè)置相機(jī)的上方向?yàn)檎较騳軸 camera.up.x = 0; camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸camera.up.z = 0;

camera.up.x = 0;
camera.up.y = 1; //相機(jī)朝向--相機(jī)上方為y軸
camera.up.z = 0;

三.關(guān)于透視相機(jī)相關(guān)參數(shù)說明

new THREE.PerspectiveCamera(fov, aspect , near,far)  透視相機(jī)

  視野角:fov 這里視野角(有的地方叫拍攝距離)越大,場(chǎng)景中的物體越小,視野角越小,場(chǎng)景中的物體越大

  縱橫比:aspect

  相機(jī)離視體積最近的距離:near

  相機(jī)離視體積最遠(yuǎn)的距離:far

上述案例動(dòng)畫原理  相機(jī)圍繞y軸旋轉(zhuǎn),并且保持場(chǎng)景中的物體一直再相機(jī)的視野中,實(shí)時(shí)將相機(jī)拍攝下來(lái)的圖片,放到瀏覽器中去顯示

function animation(){
 //相機(jī)圍繞y軸旋轉(zhuǎn),并且保持場(chǎng)景中的物體一直再相機(jī)的視野中
 //實(shí)時(shí)渲染成像
 var timer = Date.now()*0.0001;
 camera.position.x = Math.cos(timer)*100;
 camera.position.z = Math.sin(timer)*100;
 camera.lookAt(scene.position);
 renderer.render(scene, camera);
 requestAnimationFrame(animation);
}

四.渲染器  三維空間里的物體映射到二維平面的過程被稱為三維渲染。 一般來(lái)說我們都把進(jìn)行渲染的操作叫做渲染器。

【參考資料】 

   http://www.hewebgl.com/article/getarticle/50

   http://www.xyhtml5.com/threejs-star-moving-particles.html

   https://read.douban.com/reader/ebook/7412854/

以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

  • 一份老外寫的XMLHttpRequest代碼多瀏覽器支持兼容性

    一份老外寫的XMLHttpRequest代碼多瀏覽器支持兼容性

    一份老外寫的XMLHttpRequest代碼多瀏覽器支持兼容性...
    2007-01-01
  • echarts大屏字體自適應(yīng)的方法步驟

    echarts大屏字體自適應(yīng)的方法步驟

    這篇文章主要介紹了echarts大屏字體自適應(yīng)的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • 詳解webpack多頁(yè)面配置記錄

    詳解webpack多頁(yè)面配置記錄

    本篇文章主要介紹了詳解webpack多頁(yè)面配置記錄,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2018-01-01
  • 原生JS實(shí)現(xiàn)實(shí)時(shí)鐘表

    原生JS實(shí)現(xiàn)實(shí)時(shí)鐘表

    這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)實(shí)時(shí)鐘表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘

    js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫的圖片時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • jsp js鼠標(biāo)移動(dòng)到指定區(qū)域顯示選項(xiàng)卡離開時(shí)隱藏示例

    jsp js鼠標(biāo)移動(dòng)到指定區(qū)域顯示選項(xiàng)卡離開時(shí)隱藏示例

    jsp js 鼠標(biāo)移動(dòng)到指定區(qū)域顯示選項(xiàng)卡示例,離開時(shí)隱藏,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以了解下哈,希望對(duì)你有所幫助
    2013-06-06
  • 使用js畫圖之圓、弧、扇形

    使用js畫圖之圓、弧、扇形

    這篇文章主要介紹了使用js繪制幾何圖形教程,本文主要是教大家繪制圓、弧、扇形,需要的朋友可以參考下
    2015-01-01
  • js克隆對(duì)象、數(shù)組的常用方法介紹

    js克隆對(duì)象、數(shù)組的常用方法介紹

    以下幾種方法都是復(fù)制一個(gè)新的對(duì)象或者數(shù)組,但是如果直接通過parent【iframe情況】的方式去父窗口的對(duì)象的時(shí)候會(huì)有問題,感興趣的朋友可以了解下
    2013-09-09
  • JavaScript Class類實(shí)例講解

    JavaScript Class類實(shí)例講解

    ES6提供了更接近面向?qū)ο?注意:javascript本質(zhì)上是基于對(duì)象的語(yǔ)言)語(yǔ)言的寫法,引入了Class(類)這個(gè)概念,作為對(duì)象的模板,下面這篇文章主要給大家介紹了關(guān)于JavaScript ES6中class定義類的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • js 實(shí)現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)

    js 實(shí)現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)

    下面小編就為大家?guī)?lái)一篇js 實(shí)現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2016-08-08

最新評(píng)論