// 鼠标点击
var outlineMesh;
document.addEventListener("mousedown", onDocumentMouseDown, false);
init();
animate();
function init() {
scr();
objects();
lights();
addfloor();
others();
}
// var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
// var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
function lights() {
var ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0xffffff, 0.1);
// scene.add(pointLight);
// var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var pointLight = new THREE.PointLight(0xffffff, 1);
// scene.add(pointLight);
camera.add(pointLight);
}
function objects() {
// loadcontainer();
addHospital()
}
function addHospital() {
var hospital = createHospital()
// hospital.position.y = 20
scene.add(hospital)
}
function createHospital() {
var hospital = new THREE.Object3D()
var frontMainCoords = [
[0, -20],
[-30, 0],
[0, 20],
[30, 0],
]
var frontMainShape = utils.makeShape(frontMainCoords)
var frontMainGeometry = utils.makeExtrudeGeometry(frontMainShape, 20)
var frontMainMaterial = new THREE.MeshPhongMaterial({ map: textures.window() })
// var phongmaterial = new THREE.MeshPhongMaterial({color: 0x677784, transparent: true, opacity: 0.85});
// var phongmes = new THREE.Mesh(frontMainMaterial, phongmaterial);
frontMainMaterial.map.repeat.set(0.1, 0.04)
var alldate = []
//楼层总列表
for(var i=0;i<6;i++){
/* var frontMain = new THREE.Mesh(frontMainGeometry, frontMainMaterial)
hospital.add(frontMain)
renderScene()*/
var obj = "sta"+i;
alldate.push(obj)
}
var layerList1 = []
var layerList2 = []
for(var j=0;j<5;j++){
var onedata = new THREE.Mesh(frontMainGeometry, frontMainMaterial);
// var onedata =createMesh(frontMainGeometry, "stone.jpg");
hospital.add(onedata);
layerList1.push(onedata)
}
for(var j=5;j<alldate.length;j++){
// var onedata =createMesh(frontMainGeometry, "stone.jpg");
var onedata = new THREE.Mesh(frontMainGeometry, frontMainMaterial);
hospital.add(onedata);
layerList2.push(onedata)
}
function createMesh(geom, imageFile) {
// var texture =
var mat = new THREE.MeshPhongMaterial();
mat.normalMap = new THREE.TextureLoader().load("/seismis/js/3djs/assets/textures/general/" + imageFile);
// mat.specular = new THREE.Color(0xffffff);
mat.needsUpdate = true;
mat.shininess = 10;
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
//中间立体图形
// var polyhedron1 = createMesh(cubeGeometry, "stone.jpg");
renderScene();
var step1 = 0;
var step2 = 0;
function renderScene() {
step1 += 0.1;
for(var i=0;i<layerList1.length;i++){
var frontMain = layerList1[i];
frontMain.position.x = 0 + ( (2+i) * (Math.cos(step1)));
frontMain.position.y = 0+i*20 + ( 2 * Math.abs(Math.sin(step1)));
frontMain.position.z = 0 + ( (2+i) * (Math.cos(step1)));
}
step2 += 0.1;
for(var k=0;k<(layerList2.length);k++){
var frontMain = layerList2[k];
frontMain.position.x = 0 + ( (2+k+5) * (Math.cos(step2)));
frontMain.position.y = 0+(k+5)*20 + ( 2 * Math.abs(Math.sin(step2)));
frontMain.position.z = 0 + ( (2+k+5) * (Math.cos(step2)));
}
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// call the render function
var step = 0;
initModel()
function initModel() {
//辅助工具
var helper = new THREE.AxisHelper(10);
scene.add(helper);
var cubeGeometry = new THREE.Geometry();
//创建立方体的顶点
var vertices = [
new THREE.Vector3(0, 0, 20), //v0
new THREE.Vector3(30, 0, 0), //v1
new THREE.Vector3(0, 0,-20), //v2
new THREE.Vector3(-30, 0, 0), //v3
new THREE.Vector3(-30,220,0), //v4
new THREE.Vector3(-22,220,10), //v5
new THREE.Vector3(22,220,10), //v6
new THREE.Vector3(30,220,0), //v7
new THREE.Vector3(22,220,-10), //v8
new THREE.Vector3(-22,220,-10), //v9
];
cubeGeometry.vertices = vertices;
//创建立方的面
var faces=[
new THREE.Face3(0,1,2),
new THREE.Face3(0,2,3),
new THREE.Face3(3,0,5),
new THREE.Face3(3,5,4),
new THREE.Face3(3,4,9),
new THREE.Face3(3,9,2),
new THREE.Face3(2,9,8),
new THREE.Face3(8,1,2),
new THREE.Face3(8,7,1),
new THREE.Face3(6,1,7),
new THREE.Face3(6,0,1),
new THREE.Face3(0,6,5),
new THREE.Face3(5,6,7),
new THREE.Face3(5,7,8),
new THREE.Face3(5,8,9),
new THREE.Face3(5,9,4),
];
cubeGeometry.faces = faces;
//生成法向量
cubeGeometry.computeFaceNormals();
function createMesh(geom, imageFile) {
// var texture =
var mat = new THREE.MeshPhongMaterial();
mat.map = new THREE.TextureLoader().load("/seismis/js/3djs/assets/textures/general/" + imageFile);
// mat.specular = new THREE.Color(0xffffff);
mat.needsUpdate = true;
mat.shininess = 10;
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
//中间立体图形
// var polyhedron1 = createMesh(cubeGeometry, "stone.jpg");
// scene.add(polyhedron1);
/* var frontMainMaterial = new THREE.MeshPhongMaterial({ map: textures.window() })
frontMainMaterial.map.repeat.set(0.01, 0.04)*/
var polyhedron1 = createMesh(cubeGeometry, "bathroom-normal.jpg");
polyhedron1.position.x = 0;
polyhedron1.position.y = 120;
polyhedron1.position.z = 0;
scene.add(polyhedron1);
/* var textureLoader = new THREE.TextureLoader();
textureLoader.load( "/seismis/js/3djs/assets/textures/general/bathroom-normal.jpg", function( texture ){
// 加载法向贴图
textureLoader.load("/seismis/js/3djs/assets/textures/general/bathroom-normal.jpg", function( normalTexture ){
var geometry = new THREE.BoxGeometry( 50, 50, 50 );
var material = new THREE.MeshBasicMaterial({
map: texture,
normalMap: normalTexture // 只要将法向贴图赋给材质的normalMap属性即可
});
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
});*/
//12面体
/* var frontMainMaterial = new THREE.MeshPhongMaterial({ map: textures.window() })
var polyhedron2 = new THREE.Mesh(new THREE.IcosahedronGeometry(150, 0), frontMainMaterial);
// var polyhedron2 = createMesh(new THREE.IcosahedronGeometry(50, 0), "stone.jpg");
polyhedron2.position.x = 112;
scene.add(polyhedron2);*/
var cubeGeometry1 = new THREE.Geometry();
//创建立方体的顶点
var vertices = [
new THREE.Vector3(-30,0,0), //v4 0
new THREE.Vector3(-22,0,10), //v5 1
new THREE.Vector3(-22,0,-10), //v9 2
new THREE.Vector3(-30,35,0) //v10 3
];
cubeGeometry1.vertices = vertices;
//创建立方的面
var faces=[
new THREE.Face3(0,1,3),
new THREE.Face3(3,2,0),
new THREE.Face3(2,0,1),
new THREE.Face3(1,2,3)
];
cubeGeometry1.faces = faces;
//生成法向量
cubeGeometry1.computeFaceNormals();
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x6a5e74});
cube = new THREE.Mesh(cubeGeometry1, cubeMaterial);
cube.position.x = 0;
cube.position.y = 340;
cube.position.z = 0;
scene.add(cube);
var cubeGeometry2 = new THREE.Geometry();
//创建立方体的顶点
var vertices = [
new THREE.Vector3(30,0,0), //v7 0
new THREE.Vector3(22,0,10), //v6 1
new THREE.Vector3(22,0,-10), //v8 2
new THREE.Vector3(30,35,0) //v11 3
];
cubeGeometry2.vertices = vertices;
//创建立方的面
var faces=[
new THREE.Face3(0,2,1),
new THREE.Face3(2,1,3),
new THREE.Face3(3,1,0),
new THREE.Face3(3,0,2),
];
cubeGeometry2.faces = faces;
//生成法向量
cubeGeometry1.computeFaceNormals();
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x6a5e74});
cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial);
cube2.position.x = 0;
cube2.position.y = 340;
cube2.position.z = 0;
scene.add(cube2);
//顶部
var cubeGeometry3 = new THREE.Geometry();
//创建立方体的顶点
var vertices = [
new THREE.Vector3(-27,0,4), // 0
new THREE.Vector3(-27,0,-4), // 1
new THREE.Vector3(-30,11,0), // 2
new THREE.Vector3(30,11,0), // 3
new THREE.Vector3(27,0,4), // 4
new THREE.Vector3(27,0,-4), // 5
];
cubeGeometry3.vertices = vertices;
//创建立方的面
var faces=[
new THREE.Face3(0,2,1),
new THREE.Face3(1,2,3),
new THREE.Face3(1,3,5),
new THREE.Face3(3,2,0),
new THREE.Face3(3,0,4),
new THREE.Face3(3,4,5),
];
cubeGeometry3.faces = faces;
//生成法向量
cubeGeometry1.computeFaceNormals();
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x6a5e74});
cube2 = new THREE.Mesh(cubeGeometry3, cubeMaterial);
cube2.position.x = 0;
cube2.position.y = 364;
cube2.position.z = 0;
scene.add(cube2);
}
function render() {
// stats.update();
polyhedron.rotation.y = step += 0.01;
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
return hospital
}
function createWindow() {
var windowObj = new THREE.Object3D()
var glassGeometry = new THREE.PlaneGeometry(20, 20)
var glass = utils.makeMesh('phong', glassGeometry, 0x6a5e74)
windowObj.add(glass)
var windowBorderGeometry = new THREE.BoxBufferGeometry(22, 2, 2)
var windowBorder = utils.makeMesh('phong', windowBorderGeometry, 0xffffff)
var windowBorderTop = windowBorder.clone()
windowBorderTop.position.y = 10
windowObj.add(windowBorderTop)
var windowBorderBottom = windowBorder.clone()
windowBorderBottom.position.y = -10
windowObj.add(windowBorderBottom)
var windowBorderLeft = windowBorder.clone()
windowBorderLeft.rotation.z = 0.5 * Math.PI
windowBorderLeft.position.x = -10
windowObj.add(windowBorderLeft)
var windowBorderRight = windowBorderLeft.clone()
windowBorderRight.position.x = 10
windowObj.add(windowBorderRight)
return windowObj
}
function loadcontainer() {
var onProgress = function (xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function (xhr) {
};
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('/seismis/js/js/objs/5.mtl', function (materials) {
materials.preload();
var loader = new THREE.OBJLoader();
loader.setMaterials(materials);
loader.load('/seismis/js/js/objs/5.obj', function (object) {
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material.transparent = true;
child.material.opacity = 1;
if (child.material instanceof Array) {
for (var i = 0, length = child.material.length; i < length; i++)
child.material[i].transparent = true;
}
}
});
// for (var i = 0; i < 3; i++) {
var temp = object.clone();
// temp.position.set(-100 + 300 * i, 150, 0);
temp.position.set(0 , 0, 0);
scene.add(temp);
// }
}, onProgress, onError);
})
}
function loadmale1() {
var onProgress = function (xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function (xhr) {
};
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/seismis/js/js/objs/male02/');
mtlLoader.load('male02.mtl', function (materials) {
console.log(materials);
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/seismis/js/js/objs/male02/');
objLoader.load('male02.obj', function (object) {
object.position.y = 10;
scene.add(object);
}, onProgress, onError);
});
}
// 没有考虑group，所以通过obj加载的物体无法点选
function getMeshs() {
var meshs = [];
for (var i = 0, length = scene.children.length; i < length; i++) {
if (scene.children[i] instanceof THREE.Mesh && scene.children[i].geometry instanceof THREE.BoxGeometry) {
meshs.push(scene.children[i]);
}
}
return meshs;
}
function onDocumentMouseDown(e) {
e.preventDefault();
rotate = false;
//将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
var mouse = {};
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
//新建一个三维单位向量 假设z方向就是0.5
//根据照相机，把这个向量转换到视点坐标系
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
console.log(vector);
var sub = vector.sub(camera.position);
console.log(sub);
var param2 = sub.normalize();
var raycaster = new THREE.Raycaster(camera.position, param2);
console.log("---------------------------------------------");
//射线和模型求交，选中一系列直线
var intersects = raycaster.intersectObjects(getMeshs());
if (intersects.length > 0) {
//选中第一个射线相交的物体
scene.remove(outlineMesh);
var SELECTED = intersects[0].object;
var outlineMaterial2 = new THREE.MeshBasicMaterial({color: 0x00ff00, side: THREE.BackSide});
outlineMesh = new THREE.Mesh(SELECTED.geometry.clone(), outlineMaterial2);
outlineMesh.position.set(SELECTED.position.x, SELECTED.position.y, SELECTED.position.z);
outlineMesh.scale.multiplyScalar(1.05);
scene.add(outlineMesh);
}
}
分享
