|
由于OBJ沒(méi)有紋理信息， 需要threejs來(lái)加載外部貼圖，來(lái)指定給模型！
//模型需要紋理Texture
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
loader.load( 'knotTex.png', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
} );
//obj加載的類如圖：
//obj加載,構(gòu)造函數(shù)的參數(shù)是LoadingManager
var loader = new THREE.OBJLoader(manager);
//加載方法有4個(gè)參數(shù)，分別是obj文件路徑，加載完畢回調(diào)，加載進(jìn)度回調(diào)，錯(cuò)誤回調(diào)。
//我們先把幾個(gè)回調(diào)寫好
//加載完畢回調(diào)如下，加載完畢，我們做的就是把模型加載到場(chǎng)景中
var onLoad = function(object){
//加載模型如何指定Texture呢？
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
scene.add( object);
}
我們給個(gè)加載進(jìn)度吧，
使用CSS做2個(gè)塊樣式，頁(yè)面頂部div progress，顯示加載進(jìn)度百分比。
<style type="text/css">
#progress{
margin:0;
line-height:40px;
font-weight:bold;
color:#fff;
text-align:center;
background-color:#ff0000;
}
</style>
主體窗口div canvas3d 顯示3D場(chǎng)景
<style type="text/css">
#canvas3d{
margin:0;
/*border:1px solid red;*/
width:100%;
height:600px;
}
</style>
另外，網(wǎng)頁(yè)窗口變化，3D場(chǎng)景比例也要適配：
//窗口變化時(shí)，3D窗口也會(huì)動(dòng)態(tài)適配
window.onresize = function(){
var w = document.getElementById("canvas3d").clientWidth;
var h = document.getElementById("canvas3d").clientHeight;
camera.aspect = w/h;
camera.updateProjectionMatrix();
renderer.setSize(w,h);
}
完整代碼：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<script src="../build/three.js" type="text/javascript" ></script>
<script src="../examples/js/Detector.js" type="text/javascript" ></script>
<script src="../examples/js/loaders/OBJLoader.js" type="text/javascript" ></script>
<style type="text/css">
#canvas3d{
margin:0;
/*border:1px solid red;*/
width:100%;
height:600px;
}
</style>
<style type="text/css">
#progress{
margin:0;
line-height:40px;
font-weight:bold;
color:#fff;
text-align:center;
background-color:#ff0000;
}
</style>
</head>
<body>
<div id="canvas3d">
<div id = "progress">
<p></p>
</div>
</div>
<script type="text/javascript">
if(Detector.webgl){
//alert('瀏覽器支持');
//瀏覽器支持，我們就做初始化工作。不然js處理半天，瀏覽器不支持也白搭
init();
animate();
}else{
alert('瀏覽器不支持');
}
var scene,camera,renderer;
//初始化
function init(){
var w = document.getElementById("canvas3d").clientWidth;
var h = document.getElementById("canvas3d").clientHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45,w/h,0.1,1000);
camera.position.z= 250;
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer();
//下面setSize()可以不寫，畫面也會(huì)顯示默認(rèn)指定300*150的大小，很小。所以肯定要手動(dòng)設(shè)定一下大小
renderer.setSize(w,h);
renderer.setClearColor(0xf0f0f0);
//別忘記了這個(gè)要寫滴...不然就真看不見(jiàn)畫面。
document.getElementById('canvas3d').appendChild(renderer.domElement);
//開(kāi)始模型導(dǎo)入的一些工作
//我們看看官方提供的OBJLoad.js腳本的構(gòu)造函數(shù)
//構(gòu)造函數(shù)的參數(shù)是一個(gè)manager，這是什么呀？看到圖中他是集成自THREE.DefaultLoadingManager,
//
//然后我們?nèi)hree.js里面DefaultLoadingManager看看是什么？看到了，是LoadingManager對(duì)象；
//
//里面搜了一遍，沒(méi)有找到LoadingManager的類，我們?cè)倏纯磘hree.module.js
//在這里發(fā)現(xiàn)了function LoadingManager( onLoad, onProgress, onError ) {...}
//這個(gè)管理器有
//接下來(lái)我們聲明一個(gè)LoadingManager
var manager = new THREE.LoadingManager();
//模型需要紋理Texture
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
loader.load( 'knotTex.png', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
} );
//obj加載的類如圖：
//obj加載,構(gòu)造函數(shù)的參數(shù)是LoadingManager
var loader = new THREE.OBJLoader(manager);
//加載方法有4個(gè)參數(shù)，分別是obj文件路徑，加載完畢回調(diào)，加載進(jìn)度回調(diào)，錯(cuò)誤回調(diào)。
//我們先把幾個(gè)回調(diào)寫好
//加載完畢回調(diào)如下，加載完畢，我們做的就是把模型加載到場(chǎng)景中
var onLoad = function(object){
//加載模型如何指定Texture呢？
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
scene.add( object);
}
//加載過(guò)程，可以顯示進(jìn)度值
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
document.getElementById('progress').innerText= Math.round(percentComplete, 2) + '%下載' ;
}
};
//錯(cuò)誤回調(diào)，因?yàn)榫W(wǎng)頁(yè)調(diào)試有報(bào)錯(cuò)，這里可以不做處理
var onError = function ( xhr ) {
};
//回調(diào)寫好了，現(xiàn)在可以用加載的方法加載模型了。
loader.load('knot.obj',onLoad,onProgress,onError);
}
//窗口變化時(shí)，3D窗口也會(huì)動(dòng)態(tài)適配
window.onresize = function(){
var w = document.getElementById("canvas3d").clientWidth;
var h = document.getElementById("canvas3d").clientHeight;
camera.aspect = w/h;
camera.updateProjectionMatrix();
renderer.setSize(w,h);
}
// 渲染
function render(){
renderer.render(scene,camera);
}
//循環(huán)渲染
function animate() {
requestAnimationFrame( animate );
render();
}
</script>
</body>
</html>
|
