用Three.js实现简单布局的3D房间

转载

biyusr216 2022-04-07 17:13:54 博主文章分类：threejs

文章标签 2d html ide 文章分类 代码人生

废话不说了，直接上成果图。

代码如下

<!doctype html>

<head>

content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

</head>

<body>

// 设置全局变量

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

})); //右