ThreeJS載入3D模型
效果:
程式碼:
<!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> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- T
three.js載入obj模型
直接上js程式碼吧。我寫了挺多註釋。 <canvas id="scene" width="890px" height="500px"> <script> /* http://mamboleoo.be/learnThree/ */ var