摘要:本文是一篇簡單的構建三維視圖的入門教程,你可以了解到利用創建簡單的三維圖形,并且控制圖形運動。然后將其加入到中。三創建對象大多數時候,我們需要講繪制的圖形整合到一起進行控制。在軸上運動的完整代碼這個入門教程就到這里了,感謝閱讀。
本文是一篇簡單的webGL+threejs構建web三維視圖的入門教程,你可以了解到利用threejs創建簡單的三維圖形,并且控制圖形運動。若有不足,歡迎指出。
本文使用的框架是three.js
github地址:https://github.com/mrdoob/three.js,
官網:http://threejs.org/,
文檔:http://threejs.org/docs/,
本文中的示例已上傳github,地址:https://github.com/RizzleCi/three.js-demo
一、創建場景我們所見的視圖由兩個部分共同創建,scene和camera。
首先定義一個場景:
var scene = new THREE.Scene();
然后定義一個相機:
var camera = new THREE.PerspectiveCamera( 90, width/height, 0.1, 1000 );
等等,定義相機需要視窗的長寬。現在我要讓我的繪圖顯示在頁面的一個區域(
var container = document.getElementById("canvasdiv"); var width = canvasdiv.clientWidth; var height = canvasdiv.clientHeight;
這樣再加上前面的一行代碼,我們就完成了對相機的定義。然后把相機位置設定在z軸上方便觀察。
camera.position.set(0,0,10)
現在我們需要一個渲染器把定義好的場景渲染出來。
var renderer = new THREE.WebGLRenderer();
給這個渲染器合適的大小。
renderer.setSize( width, height );
然后將其加入到dom中。
canvasdiv.appendChild( renderer.domElement );
(運行以后發現這其實就是一個canvas元素。其實我們也可以在html中創建canvas元素再將renderer綁定到它上面。var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("mainCanvas") });)
最后進行渲染。
renderer.render(scene,camera);
這樣,就建立了一個簡單的3d場景。
二、繪制圖形我將threejs中的物體理解為模型+材料。以一個長方體為例。
創建模型:
var geometry = new THREE.BoxGeometry( 1,2,1 );
定義材料:
var material = new THREE.MeshBasicMaterial( { color: 0x645d50 } );
有了這兩者,我們就可以構建一個長方體方塊了。
var cube = new THREE.Mesh( geometry, material );
我們將其添加到場景中顯示。
scene.add( cube );
這樣,一個三維的長方體就繪制完成了
關于其他形狀的繪制,張雯莉的threejs入門指南中介紹的很詳細,在此不多贅述。
這部分的完整代碼如下:
Document
看上去它只是一個長方形而已,但是它確實是一個立體圖形,你可以改變一下camera的位置來觀察一下。
camera.position.set( 5,3,10 );
好了,這樣看起來是一個立體的長方體了吧。
大多數時候,我們需要講繪制的圖形整合到一起進行控制。此時,我們便需要一個3d對象。
創建一個自己的對象在上面繪制的那個長方體上面再放一個球。
var geometry = new THREE.SphereGeometry( 0.5,100,100 ); var material = new THREE.MeshBasicMaterial( { color: 0xb9c16c } ); var ball = new THREE.Mesh( geometry,material ); ball.position.set( 0,0,1 ); scene.add(ball);
另說一句,默認放置mesh的位置是( 0,0,0 ),和改變相機位置一樣,我們可以用ball.position.set方法來改變圖形或對象的位置。因此動畫也利用這個方法來實現。
然后要把它們整合成一個對象。
首先我們創建一個對象。
var myobj = new THREE.Object3D();
然后把我們畫的圖形添加到對象里就ok啦。
myobj.add( cube ); myobj.add( ball );
這時候我們已經有了一個3d對象,它包含我們剛剛繪制的長方形和球。于是就沒有必要像原來那樣把圖形一個一個地放置到場景里,只需要把剛剛創建的對象放置到場景里。
scene.add( myobj );
完整代碼如下:
外部導入.obj文件Document
threejs支持從外部導入.obj文件,聽說這種文件是用3DsMax繪制的,用PS也可以編輯。我們需要引入OBJMTLLoader.js,MTLLoader.js文件;也有一個OBJLoader.js,但利用這個庫只能導入模型而不能導入繪制obj時添加的材質,個人感覺不是非常實用,就不做介紹了。這時候,我們需要把文件們放到一個服務器上,否則會出現跨域問題。
為了讓圖像更明顯,我們添加一些光線。
scene.add( new THREE.AmbientLight( 0xffffff ) );
這里,我們通過導入圖片來設置這個對象的紋理。
var texture = new THREE.Texture(); var loader = new THREE.ImageLoader( ); loader.load( "tank.jpg", function ( image ) { texture.image = image; texture.needsUpdate = true; } );
開始導入我們的3D對象!
var loader = new THREE.OBJMTLLoader(); loader.load("tank.obj","tank.mtl",function(object){ tank = object; object.traverse(function(child){ if (child instanceof THREE.Mesh){ //將貼圖賦于材質 child.material.map = texture; child.material.transparent = true; } }); object.position.set(0,0,0); scene.add( object ); camera.lookAt( object.position ); renderer.render( scene,camera ); });
模型導入進去了,但是看起來還是很奇怪,這就要我們加一些其他光線渲染一下。在這里我們添加平行光線。
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 ); directionalLight.position.set( 1, 1, 1 ) scene.add( directionalLight );
變得光澤多了。
從外部導入obj的完整代碼:
四、動畫Document
現在我們想辦法讓這些圖形動起來。
在threejs中運用最多的動畫是用requestAnimationFrame()方法。也可以利用傳統的setInterval()做,但用這個會掉幀。
這里我們做一個render函數,來進行渲染和動畫調用。這里以前面添加了myobj對象的代碼為基礎。
現在來不斷地改變對象的角度方便對其進行觀察。
對動畫進行控制Document
接著讓我們對動畫進行控制。
在我實現的項目中,是通過websocket連接后臺傳入參數來控制對象運動的,這里就介紹一下使用參數控制吧。
這里有一個問題,就是requestAnimationFrame回調的函數不能帶有參數,否則會出現奇怪的bug。所以我選擇用一個全局對象來進行控制。
var control={ s:0, p:0, q:0, j:0, }
這里s是運動的速度,p,q,j分別是myobj將要運動到的位置的x,y,z坐標。我們先寫一個控制它在x軸上運動的函數:
var run = function () { if ( myobj.position.xcontrol.p ) { myobj.position.x -= control.s; requestAnimationFrame( run ); renderer.render( scene,camera ) }; }
再在render函數中添加對run的調用requestAnimationFrame( run )。這樣就可以在命令行中改變對象control的值實現控制myobj的運動。但是在運動停止后我的瀏覽器為什么會變得很卡,而且運動速度回有變化。我還不知道原因。不知道有沒有朋友和我有同樣的問題。于是我把函數拆成了兩個,這樣瀏覽器性能好些。
var run = function () { if ( myobj.position.xcontrol.p ) { myobj.position.x -= control.s; requestAnimationFrame( runx ); }; renderer.render( scene,camera ) }
同樣的,也可以寫出在y,z軸上運動的函數。
在x軸上運動的完整代碼:
Document
這個入門教程就到這里了,感謝閱讀。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86079.html
摘要:在文末,我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字,但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一,它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...
摘要:次時代傳統的方式就是創建次時代模型,對應中的材質是高光網格材質對象,通常貼圖文件包含顏色貼圖法線貼圖和高光貼圖。 產品在線展示案例預覽 玉鐲在線預覽:http://www.yanhuangxueyuan.co... 汽車在線預覽:http://www.yanhuangxueyuan.co... Web3D技術歷史 可通過插件或WebGL技術實現Web3D,在線網頁上預覽操作三維...
摘要:數據驅動的三維圖形可視化在信息暴漲的年間,冷暴力的扁平化確實有效降低用戶的信息焦慮感,使有限的精力更高效處理過多的信息流。 數據驅動的三維圖形可視化 在信息暴漲的2010-2016年間,冷暴力的扁平化確實有效降低用戶的信息焦慮感,使有限的精力更高效處理過多的信息流。二維平面化扁平化在蘋果等大頭引領下,成為大眾用戶機器交流默認的語言。然后,隨著PC、平板、手機、智能家居等用戶持有終端的性...
摘要:首先是這個地球,得看看它是真還是假因為很多效果是拿雪碧圖做的,比如這里的旋轉的飛機,結果找到了并且在網站文件中搜到了,那就是沒跑了。 上個月底,在朋友圈看到一個號稱這可能是地球上最美的h5的分享,點進入后發現這個h5還很別致,思考了一會,決定要不高仿一個? 到今天為止,高仿基本完成, 線上地址 github地址 除了手機端的media控制沒有去兼容,其他的基本都給仿了。 那為了讓你...
閱讀 3110·2021-11-24 09:39
閱讀 968·2021-09-07 10:20
閱讀 2389·2021-08-23 09:45
閱讀 2255·2021-08-05 10:00
閱讀 566·2019-08-29 16:36
閱讀 833·2019-08-29 11:12
閱讀 2813·2019-08-26 11:34
閱讀 1839·2019-08-26 10:56