文章目录
- new 加入动画开关门
- 建房子
- 点击监听
- old
- 建房子
- 点击监听
new 加入动画开关门
建房子
for (let i = 0; i < 30; i++) {
const w = Math.random() * 10 + 3;
const h = House(w, w * 2, w > 7);
h.position.set(
Math.random() * 200 - 100,
0.001,
Math.random() * 200 - 100
);
h.rotateY(Math.random());
h.rotateX(Math.random());
h.rotateZ(Math.random());
scene.add(h);
}
function House(width: number = 5, length: number = 10, openDoor?: boolean) {
/*
记录该实例的组成元素 将每个元素的id和类型存入每个实例的自定义输入
可以在用户点击任意属于该实例组成部分时控制其他部分
例如:点击房盖 控制房门打开关闭
*/
const house: any = {};
const elements = [];
const group = new THREE.Group();
const material = new THREE.MeshLambertMaterial({
map: texture1,
side: THREE.DoubleSide,
});
texture2.repeat.set(2, 2);
const material2 = new THREE.MeshLambertMaterial({
map: texture2,
side: THREE.DoubleSide,
});
const door1Mesh = new THREE.MeshLambertMaterial({
map: door1Texture,
side: THREE.DoubleSide,
});
//控制房子大小主要数据
const floorProps = [width, length]; //width length
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(...floorProps),
material
);
floor.rotateX(halfPI);
floor.rotateZ(halfPI);
elements.push({ element: floor, type: "floor" });
const sideProps = [floorProps[0], 4]; //width,height
const leftSide = new THREE.Mesh(
new THREE.PlaneGeometry(...sideProps),
material
);
leftSide.position.set(-floorProps[1] / 2, sideProps[1] / 2, 0);
leftSide.rotateY(halfPI);
const rightSide = new THREE.Mesh(
new THREE.PlaneGeometry(...sideProps),
material
);
rightSide.position.set(floorProps[1] / 2, sideProps[1] / 2, 0);
rightSide.rotateY(halfPI);
elements.push(
{ element: leftSide, type: "leftSide" },
{ element: rightSide, type: "rightSide" }
);
const back = new THREE.Mesh(
new THREE.PlaneGeometry(floorProps[1], sideProps[1]),
material
);
back.position.set(0, sideProps[1] / 2, -floorProps[0] / 2);
elements.push({ element: back, type: "back" });
//前面墙
const heartShape = new THREE.Shape();
const pointX = floorProps[1] / 2;
const pointY = sideProps[1] / 2;
heartShape.moveTo(-pointX, -pointY);
heartShape.lineTo(-pointX, pointY);
heartShape.lineTo(pointX, pointY);
heartShape.lineTo(pointX, -pointY);
heartShape.lineTo(-pointX, -pointY);
//开一个口 留门
const holeX = pointX / 3;
const holeY = pointY / 3;
const windowHole = new THREE.Path();
windowHole.moveTo(-holeX, holeY);
windowHole.lineTo(0, holeY);
windowHole.lineTo(0, -pointY);
windowHole.lineTo(-holeX, -pointY);
windowHole.lineTo(-holeX, holeY);
heartShape.holes.push(windowHole);
const frontGeometry = new THREE.ShapeGeometry(heartShape);
const front = new THREE.Mesh(frontGeometry, material2);
front.position.set(0, sideProps[1] / 2, floorProps[0] / 2);
elements.push({ element: front, type: "front" });
//门
const box = new THREE.BoxGeometry(holeX, pointY + pointY / 3, 0.1);
const door = new THREE.Mesh(box, door1Mesh);
door.position.set(-holeX / 2, (pointY / 3) * 2, floorProps[0] / 2);
//门的外壳 让门旋转围绕右侧轴 就是一个透明的空间内 宽度是原来的两倍中心轴自然就变成了原来的一侧
const doorWrap = new THREE.Object3D();
doorWrap.position.set(0, (pointY / 3) * 2, floorProps[0] / 2);
door.position.set(-holeX / 2, 0, 0);
doorWrap.add(door);
if (openDoor) {
doorWrap.userData.open = true;
doorWrap.rotateY(Math.PI);
}
//不重复添加door 加入filter 在前面加入让 door的id指向容器
elements.push({ element: door, type: "door", filter: true });
elements.push({ element: doorWrap, type: "door" });
//房盖
const coverHeight = 2;
const cover = new THREE.Mesh(
new THREE.CylinderBufferGeometry(
coverHeight,
coverHeight,
floorProps[1] + coverHeight,
3
),
material
);
cover.position.y = sideProps[1] + coverHeight / 2;
cover.scale.x = floorProps[0] / 3;
cover.rotateX(-halfPI);
cover.rotateZ(halfPI);
elements.push({ element: cover, type: "cover" });
//生成信息
for (const { element, type } of elements) {
house[type] = element.id;
}
//每个元素记录所有相关信息 然后添加到group中
for (const { element, filter } of elements) {
element.userData.type = "house";
element.userData.house = house;
element.castShadow = true;
if (!filter) group.add(element);
}
return group;
}点击监听
//点击监听
canvas.addEventListener("click", event => {
event.preventDefault();
const intersects = getIntersects(event);
// 获取选中最近的 Mesh 对象
if (intersects.length && intersects[0].object instanceof THREE.Mesh) {
const selectObject = intersects[0].object;
if (selectObject.userData.type === "house") {
handleHouseClick(selectObject.userData.house);
}
// changeMaterial(selectObject);
}
});
function getIntersects(event: MouseEvent) {
// 声明 raycaster 和 mouse 变量
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
raycaster.setFromCamera(mouse, camera);
// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
var intersects = raycaster.intersectObjects(scene.children);
//返回选中的对象
return intersects;
}
function handleHouseClick(house: any) {
const mash = scene.getObjectByProperty("id", house.door);
if (mash) {
console.log("door:", mash);
let c = 0;
const speed = 7;
let angle = Math.PI / speed; //默认关门状态
if (mash.userData.open) {
angle *= -1;
}
const animate = () => {
requestAnimationFrame(() => {
if (c !== speed) {
mash.rotateY(angle);
c++;
requestAnimationFrame(animate);
}
});
};
animate();
mash.userData.open = angle > 0;
}
}
old
建房子
for (let i = 0; i < 5; i++) {
const w = Math.random() * 10 + 4;
const h = House(w, w * 2);
h.position.set(Math.random() * 100 - 50, 0, Math.random() * 100 - 50);
h.rotateY(Math.random());
scene.add(h);
}
function House(width: number = 5, length: number = 10) {
/*
记录该实例的组成元素 将每个元素的id和类型存入每个实例的自定义输入
可以在用户点击任意属于该实例组成部分时控制其他部分
例如:点击房盖 控制房门打开关闭
*/
const house: any = {};
const elements = [];
const group = new THREE.Group();
const material = new THREE.MeshLambertMaterial({
map: texture1,
side: THREE.DoubleSide,
});
texture2.repeat.set(2, 2);
const material2 = new THREE.MeshLambertMaterial({
map: texture2,
side: THREE.DoubleSide,
});
const door1Mesh = new THREE.MeshLambertMaterial({
map: door1Texture,
side: THREE.DoubleSide,
});
//控制房子大小主要数据
const floorProps = [width, length]; //width length
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(...floorProps),
material
);
floor.rotateX(halfPI);
floor.rotateZ(halfPI);
elements.push({ element: floor, type: "floor" });
const sideProps = [floorProps[0], 4]; //width,height
const leftSide = new THREE.Mesh(
new THREE.PlaneGeometry(...sideProps),
material
);
leftSide.position.set(-floorProps[1] / 2, sideProps[1] / 2, 0);
leftSide.rotateY(halfPI);
const rightSide = new THREE.Mesh(
new THREE.PlaneGeometry(...sideProps),
material
);
rightSide.position.set(floorProps[1] / 2, sideProps[1] / 2, 0);
rightSide.rotateY(halfPI);
elements.push(
{ element: leftSide, type: "leftSide" },
{ element: rightSide, type: "rightSide" }
);
const back = new THREE.Mesh(
new THREE.PlaneGeometry(floorProps[1], sideProps[1]),
material
);
back.position.set(0, sideProps[1] / 2, -floorProps[0] / 2);
elements.push({ element: back, type: "back" });
//前面墙
const heartShape = new THREE.Shape();
const pointX = floorProps[1] / 2;
const pointY = sideProps[1] / 2;
heartShape.moveTo(-pointX, -pointY);
heartShape.lineTo(-pointX, pointY);
heartShape.lineTo(pointX, pointY);
heartShape.lineTo(pointX, -pointY);
heartShape.lineTo(-pointX, -pointY);
//开一个口 留门
const holeX = pointX / 3;
const holeY = pointY / 3;
const windowHole = new THREE.Path();
windowHole.moveTo(-holeX, holeY);
windowHole.lineTo(0, holeY);
windowHole.lineTo(0, -pointY);
windowHole.lineTo(-holeX, -pointY);
windowHole.lineTo(-holeX, holeY);
heartShape.holes.push(windowHole);
const frontGeometry = new THREE.ShapeGeometry(heartShape);
const front = new THREE.Mesh(frontGeometry, material2);
front.position.set(0, sideProps[1] / 2, floorProps[0] / 2);
elements.push({ element: front, type: "front" });
//门
const box = new THREE.BoxGeometry(holeX, pointY + pointY / 3, 0.1);
const door = new THREE.Mesh(box, door1Mesh);
door.position.set(-holeX / 2, (pointY / 3) * 2, floorProps[0] / 2);
elements.push({ element: door, type: "door" });
//房盖
const coverHeight = 2;
const cover = new THREE.Mesh(
new THREE.CylinderBufferGeometry(
coverHeight,
coverHeight,
floorProps[1] + coverHeight,
3
),
material
);
cover.position.y = sideProps[1] + coverHeight / 2;
cover.scale.x = floorProps[0] / 3;
cover.rotateX(-halfPI);
cover.rotateZ(halfPI);
elements.push({ element: cover, type: "cover" });
//生成信息
for (const { element, type } of elements) {
house[type] = element.id;
}
//每个元素记录所有相关信息 然后添加到group中
for (const { element } of elements) {
element.userData = { type: "house", house };
group.add(element);
}
return group;
}点击监听
//点击监听
canvas.addEventListener("click", event => {
event.preventDefault();
const intersects = getIntersects(event);
// 获取选中最近的 Mesh 对象
if (intersects.length && intersects[0].object instanceof THREE.Mesh) {
const selectObject = intersects[0].object;
if (selectObject.userData.type === "house") {
handleHouseClick(selectObject.userData.house);
}
// changeMaterial(selectObject);
}
});
function getIntersects(event: MouseEvent) {
// 声明 raycaster 和 mouse 变量
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
raycaster.setFromCamera(mouse, camera);
// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
var intersects = raycaster.intersectObjects(scene.children);
//返回选中的对象
return intersects;
}
function handleHouseClick(house: any) {
const mash = scene.getObjectByProperty("id", house.door);
if (mash) {
console.log("door:", mash);
mash.position.x *= -1;
}
}
