<!DOCTYPE html>
<html>
<head>
<title>Tea</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script src="/threejs/three.min.js"></script>
<script src="/threejs/OrbitControls.js"></script>
<script src="/threejs/OBJLoader.js"></script>
<script src="/threejs/MTLLoader.js"></script>
<style>
body,canvas{margin:0;padding:0;overflow:hidden}
.changeColor{position:absolute;top:0;left:0;z-index:1}
</style>
</head>
<body>
<div class="changeColor">
<span id="green">綠色</span>
<span id="red">紅色</span>
<span id="blue">藍色</span>
<span id="yellow">黃色</span>
</div>
<script>
document.getElementById('green').onclick = function(){
createTea('green');
}
document.getElementById('red').onclick = function(){
createTea('red');
}
document.getElementById('blue').onclick = function(){
createTea('blue');
}
document.getElementById('yellow').onclick = function(){
createTea('yellow');
}
function createTea(color){
var MTLLoader = new THREE.MTLLoader();//材質文件加載器
MTLLoader.load('/threejs/obj/'+color+'.mtl', function(material){
var OBJLoader = new THREE.OBJLoader();//obj加載器
OBJLoader.setMaterials(material);
OBJLoader.load('/threejs/obj/'+color+'.obj', function(obj){
scene.remove(tea);
tea = obj;
scene.add(tea);
});
});
}
var width,height,position,scene,camera,renderer,tea;
//尺寸
function commonSet(){
width = window.innerWidth;
height = window.innerHeight;
}
//場景
function scene(){
scene = new THREE.Scene();
}
//攝像機
function camera(){
camera = new THREE.PerspectiveCamera(60, width/height, 0.1, 10000);
camera.position.set(200,200,200);
camera.lookAt(scene.position);
}
//渲染器
function renderer(){
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width, height);
renderer.setClearColor(0xdddddd);
document.body.appendChild(renderer.domElement);
}
//輔助工具
function assist(){
var orbit = new THREE.OrbitControls(camera,renderer.domElement);
}
//光源
function light(){
var ambientLight = new THREE.AmbientLight(0x444444);
scene.add(ambientLight);
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(100,100,100);
scene.add(light);
}
//繪製模型
function model(){
createTea('green');
}
//渲染
function render(){
renderer.render(scene, camera);
requestAnimationFrame(render);
}
//初始化
function init(){
commonSet();
scene();
camera();
renderer();
assist();
light();
model();
render();
}
init();
</script>
</body>
</html>
幾個js在threejs文件夾中都能找到，這裏不再留地址了，物體使用的是3dmax導出的內置模型茶壺，導出茶壺的時候記得定位茶壺的座標爲(0,0,0)，否則加載到場景中可能因爲座標的原因找不到物體。