<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
<script type="text/javascript" src="js/three.js" ></script>
<script type="text/javascript" src="js/TrackballControls.js" ></script>
<script type="text/javascript" src="js/DDSLoader.js" ></script>
<script type="text/javascript" src="js/OBJLoader.js" ></script>
<script type="text/javascript" src="js/OBJMTLLoader.js" ></script>
<title></title>
</head>
<style>
body{
margin: 0;
overflow: hidden;
}
#percent {
position: absolute;
width: 200px;
height: 20px;
color: red;
text-align: center;
border: 1p;
}
</style>
<body>
<div id="percent"></div>
<div id="WebGL-output">
</div>
<script>
/* 攝像頭 */
var camera;
function initCamera() {
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(20, 0, 0);
//設置視野的中心坐標
camera.lookAt(scene.position);
}
/* 燈光 */
$(function(){
//直接開啟幀數檢測
//編輯代碼處
var scene = new THREE.Scene();//場景構建
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//相機構建
var renderer = new THREE.WebGLRenderer();//渲染器構建
renderer.setClearColor(0xEEEEEE);
//陰影
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor(new THREE.Color(0x000000));//設置窗口背景顏色為黑
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.shadowMapEnabled = true;//激活陰影
//
renderer.sortObjects = true;
// renderer.sortObjects = false;
///lkj
//添加材質燈光陰影
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10,20,10);
spotLight.castShadow = true;
scene.add(spotLight);
//11
//構建一個坐標軸
// var axes = new THREE.AxisHelper(20);
// scene.add(axes);
var light,light2,light3;
//平行光
light = new THREE.DirectionalLight(0xFFFFFF);
light.position.set(50, 99, 50).normalize();
light.castShadow = true;;
scene.add(light);
//環境光
light2 = new THREE.AmbientLight(0x999999);
light2.castShadow = true;;
scene.add(light2);
// //點光源
// light3 = new THREE.PointLight(0x00FF00);
// light3.position.set(300, 0, 0);
// scene.add(light3);
var pMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 20,
map: THREE.ImageUtils.loadTexture('./a10-a11pla001.png'),
// blending: THREE.AdditiveBlending,
transparent: true,
depthTest: false,})
//創建控件並綁定在相機上
trackballControls = new THREE.TrackballControls(camera);
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;
trackballControls.noZoom=false;
trackballControls.noPan=false;
trackballControls.staticMoving = true;
trackballControls.dynamicDampingFactor = 0.3;
//設置遮陽板
//加載紋理
var texture = new THREE.Texture();
//加載圖片
var imgLoader = new THREE.ImageLoader();
imgLoader.load('場景/a10-a11pla013.png',function(img)
{
//將圖片值賦於紋理
texture.image = img;
texture.needsUpdate = true;
});
//
// model
var onProgress = function(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
var percent = document.getElementById("percent");
percent.innerText = Math.round(percentComplete, 2) + '% 已經加載';
}
};
var onError = function(xhr) {};
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('場景/');
mtlLoader.load('7777.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('場景/');
objLoader.transparent = true;
objLoader.load('7777.obj', function(object) {
//設置透明貼圖
object.traverse(function(child)
{
if (child instanceof THREE.Mesh)
{
//將貼圖賦於材質
child.material.map = texture;
//重點，沒有該句會導致PNG無法正確顯示透明效果
child.material.transparent = true;
}
});
object.position.y = 0;
object.rotation.y = 0.5;
object.scale.set(0.05, 0.05, 0.05);
object.transparent = true;
scene.add(object);
}, onProgress, onError);
});
//渲染視圖視角
camera.position.x = -30;
camera.position.y = 20;
camera.position.z = 30;
camera.lookAt(scene.position)
$("#WebGL-output").append(renderer.domElement)
renderScene();
function renderScene(){
var clock = new THREE.Clock();
var delta = clock.getDelta();
trackballControls.update(delta);
requestAnimationFrame(renderScene);
renderer.render(scene,camera);
}
})
</script>
</body>
</html>
前端three.js 頁面顯示OBJ格式文件案例 three設置透明貼圖。three打燈光顯示
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。