实例介绍
【实例简介】室内效果图
【实例截图】
【核心代码】
<!doctype html>
<html lang="en">
<head>
<title>房间布局</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/Three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ThreeBSP.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<!-- people -->
<script src="people/js/three.js"></script>
<script src="people/js/DDSLoader.js"></script>
<script src="people/js/MTLLoader.js"></script>
<script src="people/js/OBJLoader.js"></script>
<script src="people/js/Detector.js"></script>
<script src="people/js/stats.min.js"></script>
<script src="people/js/PathControls.js"></script>
<script src="people/js/Tween.js"></script>
<script src="people/js/RequestAnimationFrame.js"></script>
<!-- ------------------------------------------------------------ -->
<div id="ThreeJS" style="position: absolute; left: 0px; top: 0px"></div>
<script>
// 设置全局变量
var scene, camera, renderer, controls,tween,door;
var keyboard = new THREEx.KeyboardState();//保持键盘的当前状态，可以随时查询
var clock = new THREE.Clock();
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
//var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
var VIEW_ANGLE = 75, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 10000;
var materialArrayA = [];
var materialArrayB = [];
var matArrayA=[];//内墙
var matArrayB = [];//外墙
var dummy= new THREE.Object3D();//仿制品
init();
animate();
//1.场景
function initScene(){
scene = new THREE.Scene();
}
//2.相机
function initCamera(){
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(0,1000,1800);
camera.lookAt(scene.position);
camera.lookAt(0,0,0);
scene.add(camera);
}
//3.渲染器
function initRender(){
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
//设置渲染器的大小为窗口的内宽度，也就是内容区的宽度。
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
renderer.setClearColor(0x4682B4,1.0);
}
//4.事件
function initEvent(){
THREEx.WindowResize(renderer, camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
}
//5.控制
function initControls(){
controls = new THREE.OrbitControls( camera, renderer.domElement );
}
//6.光源
function initLight(){
// 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不同
// A start, 第二个参数是光源强度
var directionalLight = new THREE.DirectionalLight( 0xffffff,1 );//模拟远处类似太阳的光源
directionalLight.position.set( 0, 100, 0).normalize();
scene.add( directionalLight );
//A end
var ambient = new THREE.AmbientLight( 0xffffff,1 ); //AmbientLight,影响整个场景的光源
ambient.position.set(0,0,0);
scene.add( ambient );
//var pointlight = new THREE.PointLight(0x000000,1.5,2000);
//scene.add(pointlight);
}
//创建地板
function createFloor(){
var loader=new THREE.TextureLoader();
loader.load("images/floor.jpg",function(texture){
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );
var floorGeometry = new THREE.BoxGeometry(1600, 1100, 1);
var floorMaterial = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } );
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
});
//茶色：0x58ACFA 透明玻璃色：0XECF1F3
var glass_material=new THREE.MeshBasicMaterial( { color: 0XECF1F3});
glass_material.opacity=0.4;
glass_material.transparent=true;
var left_wall=returnWallObject(20, 200, 1100,0,matArrayB,-801,100,0);
var left_cube=returnWallObject(20, 110, 1100,0,matArrayB,-801,100,0);
createResultBsp(left_wall,left_cube,1);
createCubeWall(1, 110, 1100,0,glass_material,-801,100,0);
var right_wall=returnWallObject(20, 200, 1100,1,matArrayB,801,100,0);
var right_cube=returnWallObject(20, 110, 1100,0,matArrayB,801,100,0);
createResultBsp(right_wall,right_cube,1);
createCubeWall(1, 110, 1100,0,glass_material,801,100,0);
}
//墙上挖门，通过两个几何体生成BSP对象
function createResultBsp(bsp,less_bsp,mat){
switch(mat)
{
case 1:
var material = new THREE.MeshPhongMaterial({color:0x9cb2d1,specular:0x9cb2d1,shininess:30,transparent:true,opacity:1});
break;
case 2:
var material = new THREE.MeshPhongMaterial({color:0xafc0ca,specular:0xafc0ca,shininess:30,transparent:true,opacity:1});
break;
default:
}
var sphere1BSP = new ThreeBSP(bsp);
var cube2BSP = new ThreeBSP(less_bsp);//0x9cb2d1 淡紫,0xC3C3C3 白灰 , 0xafc0ca灰
var resultBSP = sphere1BSP.subtract(cube2BSP);
var result = resultBSP.toMesh(material);
result.material.flatshading = THREE.FlatShading;
result.geometry.computeFaceNormals(); //重新计算几何体侧面法向量
result.geometry.computeVertexNormals();
result.material.needsUpdate = true; //更新纹理
result.geometry.buffersNeedUpdate = true;
result.geometry.uvsNeedUpdate = true;
scene.add(result);
}
//创建墙
function createCubeWall(width, height, depth,angle,material,x,y,z){
var cubeGeometry = new THREE.BoxGeometry(width, height, depth );
var cube = new THREE.Mesh( cubeGeometry, material );
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
cube.rotation.y = angle*Math.PI; //-逆时针旋转, 顺时针
scene.add(cube);
}
//返回墙对象
function returnWallObject(width, height, depth,angle,material,x,y,z){
var cubeGeometry = new THREE.BoxGeometry(width, height, depth);
var cube = new THREE.Mesh( cubeGeometry, material );
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
cube.rotation.y = angle*Math.PI;
return cube;
}
//创建墙纹理
function createWallMaterail(){
matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //前 0xafc0ca :灰色
matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //后
matArrayA.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //上 0xd6e4ec： 偏白色
matArrayA.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //下
matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //左 0xafc0ca :灰色
matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //右
matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //前 0xafc0ca :灰色
matArrayB.push(new THREE.MeshPhongMaterial({color: 0x9cb2d1})); //后 0x9cb2d1：淡紫
matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //上 0xd6e4ec： 偏白色
matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //下
matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //左 0xafc0ca :灰色
matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //右
}
//创建房间布局
function createLayout(){
// 墙面1 立方体比较长的面 左一
createCubeWall(10, 200, 900,0,matArrayB,-651,100,0);
// 墙面2 立方体比较长的面 右一
createCubeWall(10, 200, 900,1,matArrayB,651,100,0);
// 墙面3 门对面的墙 立方体比较短的面
createCubeWall(10, 200, 1310,1.5,matArrayB,0,100,-451);
// 墙面4 带门的面
var wall=returnWallObject(1310, 200,10,0,matArrayB,0,100,455);
// 门框
var door_cube=returnWallObject(100, 180,10,0,matArrayB,0,90,455);
createResultBsp(wall,door_cube,1);
//为墙面安装门,右门
var loader=new THREE.TextureLoader();
loader.load("images/door_right.png",function(texture){
var doorgeometry = new THREE.BoxGeometry(100, 180, 2);
var doormaterial = new THREE.MeshBasicMaterial({map:texture,color:0xffffff});
doormaterial.opacity=1.0;
doormaterial.transparent=true;
door = new THREE.Mesh( doorgeometry,doormaterial);
door.position.set(-50,0,0);
var door1=door.clone();
door1.position.set(50,0,0);
door1.visible=false;
dummy.add(door);
dummy.add(door1);
dummy.position.set(50,90,451)
scene.add(dummy);
});
// 房间A:隔墙1
createCubeWall(10, 200, 250,0,matArrayA,-151,100,325);
//房间A:隔墙2 无门
createCubeWall(10, 200, 220,0.5,matArrayA, -256,100,201);
// 厨房：隔墙3
createCubeWall(350, 200, 10,0,matArrayA, 481,100,131);
// 厨房：隔墙4 无门
createCubeWall(10, 200, 200,0,matArrayA, 301,100,225);
// 房间B
createCubeWall(350, 200, 10,0,matArrayA, -471,100,-50);
//房间B 无门
createCubeWall(200, 200, 10,0.5,matArrayA, 0,100,-350);
// 房间C
createCubeWall(220, 200, 10,0,matArrayA, 540,100,-50);
//房间C 无门
createCubeWall(200, 200, 10,0.5,matArrayA, 250,100,-350);
//厕所
var cube=returnWallObject(10, 200, 260,0.5,matArrayA, 125,100,-250);
//厕所门框
var door_cube1 =returnWallObject(10, 160,80,0.5,matArrayA,155,90, -250);
createResultBsp(cube,door_cube1,2);
//茶色：0x58ACFA 透明玻璃色：0XECF1F3
var glass_material=new THREE.MeshBasicMaterial( { color: 0x58ACFA});
glass_material.opacity=0.6;
glass_material.transparent=true;
createCubeWall(1, 180,80,0.5,glass_material,155,90, -250);
}
//7.初始化OBJ对象
function initObject(){
//墙纹理
createWallMaterail();
createFloor();
createLayout();
}
//初始化函数
function init()
{
initScene();
initCamera();
initRender();
initEvent();
initControls();
initLight();
initObject();
//监听键盘按键
document.addEventListener("keydown",onkeyDown,false);
}
var door_state=true;//默认是门是关闭的
//Enter=13,Space=32;
function onkeyDown(event) {
switch(event.keyCode) {
case 13:
console.log(event.keyCode);
if(door_state){
dummy.rotation.y =0.5*Math.PI;
door_state=false;
}else{
dummy.rotation.y-=0.5*Math.PI;
door_state=true;
}
break;
default:
console.log(event.keyCode);
break;
}
}
function animate()
{
requestAnimationFrame( animate );
renderer.render( scene, camera );
TWEEN.update( );
update();
}
function update()
{
var delta = clock.getDelta();
var moveDistance = 200 * delta;
var rotateAngle = Math.PI / 2 * delta;
controls.update();
}
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论