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

发布时间：2024-12-13 20:06

家居空间布局体现主人的生活哲学：简约不等于简单，讲究实用与艺术的结合 #生活知识# #家居生活# #居家生活哲学# #家居生活哲学应用#

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

代码如下

<!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 = 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();

function initScene() {

scene = new THREE.Scene();

}

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);

}

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);

}

function initEvent() {

THREEx.WindowResize(renderer, camera);

THREEx.FullScreen.bindKey({

charCode : 'm'.charCodeAt(0)

});

}

function initControls() {

controls = new THREE.OrbitControls(camera, renderer.domElement);

}

function initLight() {

var directionalLight = new THREE.DirectionalLight(0xffffff, 1);

directionalLight.position.set(0, 100, 0).normalize();

scene.add(directionalLight);

var ambient = new THREE.AmbientLight(0xffffff, 1);

ambient.position.set(0, 0, 0);

scene.add(ambient);

}

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);

});

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);

}

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);

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

}));

matArrayA.push(new THREE.MeshPhongMaterial({

color : 0xafc0ca

}));

matArrayA.push(new THREE.MeshPhongMaterial({

color : 0xd6e4ec

}));

matArrayA.push(new THREE.MeshPhongMaterial({

color : 0xd6e4ec

}));

matArrayA.push(new THREE.MeshPhongMaterial({

color : 0xafc0ca

}));

matArrayA.push(new THREE.MeshPhongMaterial({

color : 0xafc0ca

}));