ThreeJS載入3D模型

阿新 • • 發佈：2019-01-21

效果：

程式碼：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Bunny</title>
		<style>body{background:#EEEEEE;margin:0;padding:0;}</style>
		<script src="js/three.min.js"></script>
		<script src="js/loaders/VTKLoader.js"></script>
	</head>
	<body>
		<script>
		var width = window.innerWidth*98/100;		//設定width為視窗顯示區域寬度的98%
		var height = window.innerHeight*98/100;		//設定height為視窗顯示區域高度的98%
		
		var scene = new THREE.Scene();		//建立場景
		
		var camera = new THREE.PerspectiveCamera(60, width/height, 0.001, 1e10);	//60：視角；width/height：寬高比；0.001：近平面；1e10（即10的十次方）：遠平面
		camera.position.z = 0.2;	//設定camera的位置
		scene.add(camera);
		
		var dirLight = new THREE.DirectionalLight(0xffffff);	//白色的方向光
		dirLight.position.set(200,200,1000).normalize();		//設定光源位置
		camera.add(dirLight);		//新增光源到場景中
		camera.add(dirLight.target);
		
		var material = new THREE.MeshLambertMaterial({color:0xffffff,side:THREE.DoubleSide});	//建立材質
		
		var loader = new THREE.VTKLoader();		//建立載入器
		loader.load("models/vtk/bunny.vtk",function(geometry){		//載入模型
			geometry.computeVertexNormals();	//計算頂點法線
			var mesh = new THREE.Mesh(geometry, material);		//建立物體
			mesh.position.setY(-0.09);		//設定物體位置
			scene.add(mesh);		//新增物體到場景中
		});
		
		var renderer = new THREE.WebGLRenderer();	//建立渲染器
		renderer.setSize(width, height);		//設定渲染器大小
		renderer.setClearColor(0xeeeeee);		//設定預設顏色
		document.body.appendChild(renderer.domElement);		//新增渲染器的DOM元素到body中
		
		function render(){
			renderer.render(scene, camera);		//進行渲染
			requestAnimationFrame(render);		//動畫幀迴圈
		}
		render();
		</script>
	</body>
</html>

可以在three.js的原始碼檔案中找到three.min.js和VTKLoader.js，筆者當前使用的版本是r69。

例子完整原始碼：

ThreeJS載入3D模型

效果：程式碼： <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Bunny</title> <style>body{backgro

OpenGL ES 載入3D模型

前面繪製的矩形、立方體確實確實讓人看煩了，並且實際生活中的物體是非常複雜的，我們不可能像前面哪樣指定頂點來繪製，因此本篇部落格就說明通過OpenGL ES載入一個3D模型。這樣複雜物體的設計工作就可以交給專業的設計師來做了，進行3D建模的工具比如3dmax、maya等。設計師通過這些軟

【three.js : 3D】【load】threejs：3D模型匯入問題

轉載：threejs：3D模型匯入問題想想複雜的模型就交給3D設計師進行創作，而我們開發時只需引入模型檔案，是不是很美滋滋？當然，如果你時間充裕，又對模型創作感興趣，那你確實可以花時間好好學習3D建模軟體的使用，這樣以後就可以自己建立所需模型，由自己匯出與匯入模型檔案。

Cesium.js 載入3D模型

一、Cesuimjs介紹Cesiunjs是一套GIS行業中進行地圖渲染的js庫，該庫使用的WebGL進行地圖渲染。並且結合HTML5進行相應，從而實現3D中渲染地圖。本篇文章則介紹如何將字尾名為max的檔案載入到Cesiumjs中去。二、載入過程因為cesium只支援GLTF

使用Cesium.js載入3D模型

最近專案中用到室外三維模型與室內三維地圖互動，室外三維模型的載入我們採用了cesium js來實現,在使用的過程中遇到了許多的問題，閒暇之餘將其實現及遇到的問題記錄下來，以備將來再用到時少走彎路。一、開發環境準備 1、下載cesium js cesiu

教你如何利用threejs對3D模型面板進行DIY

一步一步教你如何利用threejs載入gltf模型來實現DIY換膚功能。 ### 模型準備 - ***模型製作*** 模型可以通過網上下載，也可以自己通過c4d、maya、blender等模型製作軟體得到。這裡就不敘述有關模型製作的問題，本文中會在blender進行模型的有關設定。 - ***模型

Threejs 開發3D地圖實踐總結

操作 moved ons pro 變化 delta otto api flat 　　前段時間連續上了一個月班，加班加點完成了一個3D攻堅項目。也算是由傳統web轉型到webgl圖形學開發中，坑不少，做了一下總結分享。 1、法向量問題　　法線是垂直於我們想要照亮的物體表

NGUI研究之3D模型坐標轉2D屏幕坐標-血條

uic bject blank orm 組成自己 index lan rac ?? 剛好今天有朋友問我，比較典型的樣例就是遊戲裏面人物的血條。原理非常easy就是把3D點換算成2D的點。可是因為NGUI自身是3D所以我們須要先把NGUI下的點轉成2D點。然後在把他轉成

3D模型瀏覽器的實現思路

想是 ... logs 三維開發技術無向圖需要結構前段時間正好瀏覽了數據結構中關於圖的部分，突然就意識到一個問題，3D模型就是用無向圖來存儲的。仔細想一想是不是這樣呢? 一個3D模型去掉材質之後剩下的部分就是點以及點和點之間的連線了，點我們用三維坐標表示即可，假

3D模型的建立還有這樣的方法，厲害！

ref aar tex 啟動 http png 激活 eval 方法化學中，要想了解某個分子結構的特征，建立它的3D模型是非常有幫助的，可以清楚地看出每個分子的分布和構成，那麽有什麽化學軟件可以建立3D模型呢？下面就一起來學習具體的方法。 ChemOffice是專業的化學

洛谷—— P1187 3D模型

100% times pic 個數字 oid 文件的 tdi 測試數據 log https://www.luogu.org/problem/show?pid=1187 題目描述一座城市建立在規則的n×m網格上，並且網格均由1×1正方形構成。在每

cesium導入3D模型（obj轉gltf）

出現移動 mark 簡單批處理 -s default 發現 pri cesium中支持載入3D模型，不過只支持gltf格式。gltf是khronos組織（起草OpenGL標準的那家）定義的一種交換格式，用於互聯網或移動設備上展現3d內容，充分支持opengl，webgl

Luogu P1187 3D模型

esp 技術必須 names 3d模型輸入輸出格式建築 cdn 明顯題目描述一座城市建立在規則的n×m網格上，並且網格均由1×1正方形構成。在每個網格上都可以有一個建築，建築由若幹個1×1×1的立方體搭建而成（也就

unity下3d模型的透明處理

HA sha 點擊 col 其他改變 ade diff unit 1.若只是改變模型的透明度：點擊模型，在Inspector中可以看到很多模型的屬性。找到要改變透明度的地方，更改shader渲染的方式選中Transparent（透明度）的diffuse,之後調節Main

Altium制作DC002的PCB封裝和3D模型

模型類型可能通過分享 lib .cn 等等理發 Altium制作DC002的PCB封裝和3D模型常用的電源連接器（Dc Power Jack Connector）DC002、DC005等等型號的3D模型在網上很難找到合適的，我們可以選擇CUI 公司生產的電源連

Cesium： 3D 模型

轉：https://blog.csdn.net/UmGsoil/article/details/74572877 Cesium支援3D模型，包括關鍵幀動畫，面板的改變還有單個節點的選擇等，Cesium還提供了了一個基於網路的工具，將COLLADA模型轉換為glTF，方便和優化模型新增還記得

unity動態載入FBX模型（Http下載到Rescources檔案，場景Load直接呼叫）：

using UnityEngine; using System.Collections; using System.IO; using System.Net; using System; using UnityEditor; public class WWWLo

Python3利用Axes3D庫畫3D模型圖

Python3利用Axes3D庫畫3D模型圖最近在學習機器學習相關的演算法，用python實現。自己實現兩個特徵的線性迴歸，用Axes3D庫進行建模。 python程式碼 import numpy as np from scipy import stats import mat

cesium載入飛機模型，entity方式和primitive方式載入，縮放至模型處

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <!-- T

three.js載入obj模型

直接上js程式碼吧。我寫了挺多註釋。 <canvas id="scene" width="890px" height="500px"> <script> /* http://mamboleoo.be/learnThree/ */ var

ThreeJS載入3D模型

相關推薦