WebGL筆記(六)_Three.js渲染obj模型並同時渲染全景圖

時間 2020-12-30 標籤 obj 全景 threejs 環境

基本思路簡述：一個模型的渲染的流程是，創建一個場景，並將模型和相機放到場景中合適的位置；然後就會呈現出一個3D模型在屏幕上。全景圖的呈現其實就是在創建一個場景、相機、幾何球。模型和全景同時被呈現在屏幕上就會出現模型被放在全景環境下的樣子。效果圖在後面。

第一步：創建一個demo.html文件將必要的js文件導入。

three.js：渲染模型的必要類庫，去threejs官網下載即可。
OrbitControls.js：模型控制器，這個類庫可以讓模型隨着鼠標進行一些交互操作，例如：隨着鼠標進行旋轉、伸縮等操作。
OBJLoader.js：用來加載.obj格式的模型文件。
jquery.js
加入必要的代碼，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="three.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="OBJLoader.js"></script>
    <script src="jquery.js"></script>

</head>
<body>
</body>


<script> //創建一個div,用來盛放渲染模型的canvas var width = window.innerWidth || 2; var height = window.innerHeight || 2; container = document.createElement( 'div' ); document.body.appendChild( container ); var info = document.createElement( 'div' ); info.style.position = 'absolute'; info.style.top = '30px'; info.style.width = '100%'; info.style.textAlign = 'center'; container.appendChild( info ); //幀動畫事件，這個方法模型渲染是用到的必要方法，因爲模型渲染的過程中是不斷對canvas進行重繪。 var requestAnimationFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); </script>
</html>

後面的代碼是真正調用threejs的api的部分，放在demo.html文件的<script>之間的追加的位置，後面介紹的過程中，省略上面那部分的代碼。

第二步：聲明必要的變量。

<script>

	    var scene; //用來盛放模型的場景
	    var camera; //呈現模型的相機
	    var renderer; //渲染模型的渲染器
	    var control; //操作模型的控制器
	    var objLoader; //加載obj模型的加載器
</script>

第三步：初始化變量。

<script> var scene; //用來盛放模型的場景 var camera; //呈現模型的相機 var renderer; //渲染模型的渲染器 var control; //操作模型的控制器 var objLoader; //加載obj模型的加載器 //場景內模型渲染準備 function prepareRender() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 70, width / height, 1, 10000000000 ); renderer = new THREE.WebGLRenderer(); renderer.autoClear = false; //初始化相機位置。 camera.position.x = 150; camera.position.y = 150; camera.position.z = 150; renderer.setSize( width, height ); //將渲染畫布放到dom元素中，即前面聲明的div。 info.appendChild(renderer.domElement); //聲明控制器，傳入相機和被控制的dom節點。 control = new THREE.OrbitControls(camera, renderer.domElement.parentNode); //控制器在控制元素時圍繞的中心位置。 control.target=new THREE.Vector3(0,0,0); //相機的朝向 camera.aspect = window.innerWidth / window.innerHeight; } </script>

第四步：向場景中加載模型。

<script> //向場景內添加obj模型 function insertObj() { //初始化OBJLoader加載器。 objLoader = new THREE.OBJLoader(); //創建模型的紋理（貼圖）加載器。 var textureLoader = new THREE.TextureLoader(); var texture = textureLoader.load( 'demo_jinyu.jpg' ); //加載模型 objLoader.load( 'demo02.obj',function ( object ) { object.traverse( function ( child ) { //將加載到的紋理給模型的材質 if ( child instanceof THREE.Mesh ) { child.material.map = texture; } } ); //爲了呈現更清晰。將模型放大20倍 object.scale.set(20,20,20); //將模型的位置始終定位在中心點(0,0,0) //這一步的操作是爲了配合模型控制器的效果，前面的模型控制器就是中心點就是設置在(0,0,0)位置的。 //用戶在用鼠標旋轉模型時，好像在圍繞着模型的中心旋轉。 var box = new THREE.Box3().setFromObject(object); var center = box.getCenter();//用一個Box獲取到模型的當前位置。 object.position.set(-center.x, -center.y, -center.z);//將模型移回原點。 scene.add( object ); }, //進度回調函數 function ( xhr ) { console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' ); }, // called when loading has errors function ( error ) { console.log( 'An error happened' ); } ); } </script>

第五步：向場景中添加燈。

<script> //場景內添加燈 function insertOther(){ //環境光 var light = new THREE.AmbientLight( 0x404040 ); // soft white light scene.add( light ); //方向光 var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); scene.add( directionalLight ); } </script>

第六步：渲染

<script> function render() { renderer.render(scene, camera); } function animate() { control.update(); requestAnimationFrame( animate ); render(); } function init() { prepareRender();//變量聲明，渲染準備工作 insertObj();//加載obj模型並加入到場景中 insertOther();//像場景中添加光。 animate();//動畫 } //調用代碼 init(); </script>

到此爲止，模型已經可以呈現出來了。

第七步：像場景添加全景圖片

基本流程與模型渲染一致，直接給出代碼。

<script> var sceneB;//放全景球的場景 var cameraB;//呈現全景的相機 var controlB;//控制全景的控制器 //初始化，構造全景球的函數 function initBackgroud() { sceneB = new THREE.Scene(); cameraB = new THREE.PerspectiveCamera(70, width / height, 1, 1000); //全景相機位置 cameraB.position.set(0,100,0); controlB = new THREE.OrbitControls(cameraB, renderer.domElement.parentNode); controlB.enableZoom = false; controlB.target = new THREE.Vector3(0, 0, 0); //定義了一個幾何體，球。 var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 ); // invert the geometry on the x-axis so that all of the faces point inward geometry.scale( - 1, 1, 1 ); //加載全景圖片資源 var texture = new THREE.TextureLoader().load("1_View02.jpg"); texture.minFilter = THREE.LinearFilter; texture.format = THREE.RGBFormat; var material = new THREE.MeshBasicMaterial(); material.map = texture; var meshB = new THREE.Mesh( geometry, material ); sceneB.add( meshB ); } </script>

第八步：修改原有的渲染代碼

<script> function init() { prepareRender(); insertObj(); initBackgroud();//添加背景渲染的初始化代碼。 insertOther(); animate(); } function render() { renderer.render(sceneB,cameraB);//添加背景渲染代碼。 renderer.render(scene, camera); } </script>