vr全景看房的方案 three.js
WebGL3D引擎
http://www.webgl3d.cn/threejs/docs/#api/zh/core/Raycaster
一.客户端，加载六张图及按钮位置，点击按钮删除旧的图及按钮，加载下一组图
<template>
<div class="home">
<div>
<div id="container" style="height: 900px;transition:all 0.5s"></div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
export default {
name: "Home",
components: {
},
data(){
return {
camera:null,
scene: null,
renderer: null,
controls: null,
poiObjects: [],
box:null,
button:[],
text:[],
}
},
mounted() {
this.scene = new THREE.Scene()
this.initThree();
this.drawOut()
this.scroll()
this.func()
this.scecond();
},
methods: {
scecond() {
document.getElementById('container').style.transform = 'scale(1,1)'
if(this.scene){
this.button.forEach((item)=>{
this.scene.remove(item)
})
this.scene.remove(this.box)
this.text.forEach((item)=>{
this.scene.remove(item)
})
}
let data = {
left:require("./images/scene_left1.jpg"),
right:require("./images/scene_right1.jpg"),
top:require("./images/scene_top1.jpg"),
bottom:require("./images/scene_bottom1.jpg"),
front:require("./images/scene_front1.jpg"),
back:require("./images/scene_back1.jpg")
}
let hotPoints = [
{
position: {
x: 0.45,
y: 0,
z: -0.3,
},
detail: {
title: "卧室",
path:'卧室'
},
},
// {
// position: {
// x: -0.2,
// y: -0.05,
// z: 0.45,
// },
// detail: {
// title: "信息点2",
// },
// },
];
this.draw(data)
this.firstButton(hotPoints)
this.showText(hotPoints)
},
first() {
document.getElementById('container').style.transform = 'scale(1,1)'
if(this.scene){
this.button.forEach((item)=>{
this.scene.remove(item)
})
this.scene.remove(this.box)
this.text.forEach((item)=>{
this.scene.remove(item)
})
}
// var texture = new THREE.TextureLoader().load("./images/scene.jpeg");
// var sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });
// var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// // sphere.material.wireframe = true;
// var sphereGeometry = new THREE.SphereGeometry(/*半径*/ 1, 50, 50);
// sphereGeometry.scale(1, 1, -1);
let data = {
left:require("./images/scene_left.jpg"),
right:require("./images/scene_right.jpg"),
top:require("./images/scene_top.jpg"),
bottom:require("./images/scene_bottom.jpg"),
front:require("./images/scene_front.jpg"),
back:require("./images/scene_back.jpg")
}
let hotPoints = [
{
position: {
x: 0.05,
y: -0.2,
z: -0.45,
},
detail: {
title: "看书",
path:'看书'
},
},
{
position: {
x: 0.45,
y: 0,
z: -0.05,
},
detail: {
title: "大厅",
path:'大厅'
},
},
];
this.draw(data)
this.firstButton(hotPoints)
this.showText(hotPoints)
},
firstButton(hotPoints){
var pointTexture = new THREE.TextureLoader().load(
require("./images/button.png")
);
var material = new THREE.SpriteMaterial({ map: pointTexture });
this.poiObjects = [];
this.button = []
for (var i = 0; i < hotPoints.length; i++) {
var sprite = new THREE.Sprite(material);
sprite.scale.set(0.05, 0.05, 0.05);
sprite.position.set(
hotPoints[i].position.x,
hotPoints[i].position.y,
hotPoints[i].position.z
);
this.button.push(sprite)
this.scene.add(sprite);
sprite.detail = hotPoints[i].detail;
this.poiObjects.push(sprite);
}
},
showText(hotPoints) {
this.text = []
for (var i = 0; i < hotPoints.length; i++) {
// var text = new THREE.FontLoader().load(require("./font/NotoKR-Black_Black.json"), function(text) {
// console.log(123)
// var gem = new THREE.TextGeometry('51JOB', {
// size: 20, //字号大小，一般为大写字母的高度
// height: 10, //文字的厚度
// weight: 'normal', //值为'normal'或'bold'，表示是否加粗
// font: text, //字体，默认是'helvetiker'，需对应引用的字体文件
// style: 'normal', //值为'normal'或'italics'，表示是否斜体
// bevelThickness: 1, //倒角厚度
// bevelSize: 1, //倒角宽度
// curveSegments: 30,//弧线分段数，使得文字的曲线更加光滑
// bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
// });
// gem.center();
// var mat = new THREE.MeshPhongMaterial({
// color: 0xffe502,
// specular: 0x009900,
// shininess: 30,
// shading: THREE.FlatShading
// });
// var textObj = new THREE.Mesh(gem, mat);
// textObj.castShadow = true;
// console.log('!!!!',textObj)
// scene.add(textObj);
// new TWEEN.Tween(textObj.rotation).to({y: Math.PI * 2}, 2000).repeat(Infinity).yoyo(true).start();
// });
//创建canvas对象用来绘制文字
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.font = "bolder 10px Arial ";
ctx.fillText(hotPoints[i].detail.title, 140, 65);
ctx.globalAlpha = 1;
// 将画布生成的图片作为贴图给精灵使用，并将精灵创建在设定好的位置
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
//创建精灵，将该材质赋予给创建的精灵
// let spriteMaterial = new THREE.PointsMaterial({
// map: texture,
// // sizeAttenuation: true,
// // size: 30,
// transparent: true,
// opacity: 1,
// });
// //创建坐标点，并将材质给坐标
// let geometry = new THREE.BufferGeometry();
// let vertices = [0, 0, 0];
// geometry.setAttribute(
// "position",
// new THREE.Float32BufferAttribute(vertices, 3)
// );
// let sprite = new THREE.Points(geometry, spriteMaterial);
// sprite.position.set(position.x, position.y, position.z);
// sprite.scale.set(0.01, 0.01, 0.01);
// this.scene.add(sprite);
// const canvasTexture = new THREE.CanvasTexture(
// document.querySelector("#canvas")
// )
// //canvasTexture.needsUpdate = true; //注意这句不能少
const spritMaterial = new THREE.SpriteMaterial({
map: texture
})
let sprite = new THREE.Sprite(spritMaterial)
sprite.position.set(hotPoints[i].position.x, hotPoints[i].position.y, hotPoints[i].position.z);
//精灵的默认大小很小估计是[1,1,1]
sprite.scale.set(0.5, 0.5, 0.5);
this.text.push(sprite)
this.scene.add(sprite)
}
},
initThree() {
//镜头
this.camera = new THREE.PerspectiveCamera(
90,
document.body.clientWidth / 900,
0.1,
100
);
// document.body.clientWidth / document.body.clientHeight
this.camera.up.x = 0; //相机以哪个方向为上方
this.camera.up.y = 1;
this.camera.up.z = 0; //默认值
// 镜头初始位置
this.camera.position.set(0, 0, 0.01);
// camera.lookAt(0,0,0) //使用了OrbitControls导致无法使用 改用controls的target
//渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(document.body.clientWidth, 900);
this.renderer.shadowMap.enabled = true; //告诉渲染器需要阴影效果
document.getElementById("container").appendChild(this.renderer.domElement);
//镜头控制器
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true; //动态阻尼系数 就是鼠标拖拽旋转灵敏度
this.controls.dampingFactor = 0.14; //动态阻尼系数 就是鼠标拖拽旋转灵敏度
this.controls.enableZoom = true; //是否可以缩放
this.controls.zoomSpeed = 5;
this.controls.autoRotate = true; //是否自动旋转
this.controls.autoRotateSpeed = 0.5;
this.controls.minDistance = 0; //设置相机距离原点的最小距离
this.controls.maxDistance = 10; //设置相机距离原点的最远距离
this.controls.enablePan = false; //是否开启右键拖拽平移
this.controls.panSpeed = 10; //平移速度
this.controls.enableKeys = false; //启用或禁用键盘控制
this.controls.keyPanSpeed = 30; //键盘平移速度
this.controls.keys = {
LEFT: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40, // down arrow
};
let m = new THREE.Vector3();
m.x = 0;
m.y = 0;
m.z = 0;
this.controls.target = m; //控制看向某个方向
//一会儿在这里添加3D物体
this.loop();
},
//帧同步重绘
loop() {
this.controls.update();
requestAnimationFrame(this.loop);
this.renderer.render(this.scene, this.camera);
},
// 绘制六张图
draw(datas){
var materials = [];
//根据左右上下前后的顺序构建六个面的材质集
var texture_left = new THREE.TextureLoader().load(
datas.left
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));
var texture_right = new THREE.TextureLoader().load(
datas.right
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));
var texture_top = new THREE.TextureLoader().load(
datas.top
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_top }));
var texture_bottom = new THREE.TextureLoader().load(
datas.bottom
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_bottom }));
var texture_front = new THREE.TextureLoader().load(
datas.front
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));
var texture_back = new THREE.TextureLoader().load(
datas.back
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));
var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), materials);
this.box = box
this.scene.add(box);
box.geometry.scale(1, 1, -1);
},
//绘制外层圆形轮廓
drawOut(){
var sphereGeometry = new THREE.SphereGeometry(
/*半径*/ 1,
/*垂直节点数量*/ 50,
/*水平节点数量*/ 50
); //节点数量越大，需要计算的三角形就越多，影响性能
var sphere = new THREE.Mesh(sphereGeometry);
sphere.material.wireframe = true; //用线框模式大家可以看得清楚是个球体而不是圆形
this.scene.add(sphere);
},
// 滚动事件
scroll(){
var fov = 90;
var near = 45;
var far = 100;
var scrollFunc = (event) => {
// event.preventDefault();
//event.stopPropagation();
if (event.wheelDelta) {
//判断浏览器IE，谷歌滑轮事件
if (event.wheelDelta > 0) {
//当滑轮向上滚动时
fov -= near < fov ? 1 : 0;
} else {
//当滑轮向下滚动时
fov += fov < far ? 1 : 0;
}
}
//改变fov值，并更新场景的渲染
this.camera.fov = fov;
this.camera.updateProjectionMatrix();
this.renderer.render(this.scene, this.camera);
};
/*IE、Opera注册事件*/
if (document.attachEvent) {
document.attachEvent("onmousewheel", scrollFunc);
}
//Firefox使用addEventListener添加滚轮事件
if (document.addEventListener) {
//firefox
document.addEventListener("DOMMouseScroll", scrollFunc, false);
}
//Safari与Chrome属于同一类型
window.onmousewheel = document.onmousewheel = scrollFunc;
},
func(){
document
.querySelector("#container")
.addEventListener("click", (event) => {
event.preventDefault();
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
mouse.x = (event.clientX / document.body.clientWidth) * 2 - 1;
mouse.y = -(event.clientY / document.body.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, this.camera);
var intersects = raycaster.intersectObjects(this.poiObjects);
if (intersects.length > 0) {
// camera.position.set(0, 0.1, 0.01);
if(intersects[0].object.detail.path === '看书'){
alert(intersects[0].object.detail.title)
}else if(intersects[0].object.detail.path === '卧室'){
document.getElementById('container').style.transform = 'scale(100,100)'
setTimeout(()=>{
this.first()
},250)
}else if(intersects[0].object.detail.path === '大厅'){
document.getElementById('container').style.transform = 'scale(100,100)'
setTimeout(()=>{
this.scecond()
},250)
}
// controls.screenSpacePanning = true
// alert("点击了热点" + intersects[0].object.detail.title);
}
});
}
},
};
</script>
二、后台，上传六张图片后，开始创建场景scene，右上角设置了多个按钮，点击不同按钮可设置不同的功能（通过status显示到客户端,如弹窗介绍，跳转场景）,点击按钮后场景中会按钮，可调整位置，并将位置保存
<template>
<div class="home">
<!-- <div id="pre" style="position:absolute;left:0;top:0;height:900px">
<img style="height:900px;" :src="loadPic[now]" alt="">
<div @click="this.preview" style="position:absolute;left:0;top:0">预览</div>
<div style="position:absolute;left:50%;top:0">{{now}}</div>
</div> -->
<div>
<div id="container" style="height: 900px;position:relative"></div>
<!-- <canvas canvas-id="canvas"></canvas> -->
</div>
<div style="position:fixed;right:0;top:0;display:flex;flex-direction:column;">
<img @click="addButton(item)" v-for="(item, index) in someButton" :key="index" style="width:40px;height:40px;" :src="item.img" alt="">
</div>
<div v-if="select" style="position:fixed;right:50%;bottom:0;display:flex;flex-direction:column;">
<div>
当前选中: <input type="text" v-model="select.detail.title">
</div>
<div>
<span>
x: <input type="text" v-model="select.position.x">
y: <input type="text" v-model="select.position.y">
z: <input type="text" v-model="select.position.z">
</span>
</div>
<div @click="confirm">确认</div>
<div @click="del">删除</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
export default {
name: "Home",
components: {
},
data(){
return {
loadPic:{
left:require("./images/scene_left.jpg"),
right:require("./images/scene_right.jpg"),
top:require("./images/scene_top.jpg"),
bottom:require("./images/scene_bottom.jpg"),
front:require("./images/scene_front.jpg"),
back:require("./images/scene_back.jpg")
},
someButton:[
{
img:require("./images/button.png"),
status:1
},
{
img:require("./images/button.png"),
status:2
},
{
img:require("./images/button.png"),
status:3
},
],
point: [],
select:null,
now:'left',
camera:null,
scene: null,
renderer: null,
controls: null,
poiObjects: [],
}
},
mounted() {
this.preview()
},
methods: {
addButton(item){
var detail = prompt("输入名称")
let id = new Date().getTime()
this.point.push({
position:{
x:0,
y:0,
z:-0.2
},
detail: {
title: detail,
path:'大厅',
status:item.status,
id
}
})
this.firstButton([{
position:{
x:0,
y:0,
z:-0.2
},
detail: {
title: detail,
path:'大厅',
status:item.status,
id
}
}])
this.showText([{
position:{
x:0,
y:0,
z:-0.2
},
detail: {
title: detail,
path:'大厅',
status:item.status,
id
}
}])
},
preview(){
this.scene = new THREE.Scene()
this.initThree();
this.drawOut()
this.scroll()
this.func()
this.first();
},
first() {
document.getElementById('container').style.transform = 'scale(1,1)'
// var texture = new THREE.TextureLoader().load("./images/scene.jpeg");
// var sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });
// var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// // sphere.material.wireframe = true;
// var sphereGeometry = new THREE.SphereGeometry(/*半径*/ 1, 50, 50);
// sphereGeometry.scale(1, 1, -1);
let data = this.loadPic
let hotPoints = this.point
this.draw(data)
this.firstButton(hotPoints)
this.showText(hotPoints)
},
firstButton(hotPoints){
var pointTexture = new THREE.TextureLoader().load(
require("./images/button.png")
);
var material = new THREE.SpriteMaterial({ map: pointTexture });
this.poiObjects = [];
for (var i = 0; i < hotPoints.length; i++) {
var sprite = new THREE.Sprite(material);
sprite.scale.set(0.05, 0.05, 0.05);
sprite.position.set(
hotPoints[i].position.x,
hotPoints[i].position.y,
hotPoints[i].position.z
);
this.scene.add(sprite);
sprite.detail = hotPoints[i].detail;
this.poiObjects.push(sprite);
}
},
showText(hotPoints) {
this.text = []
for (var i = 0; i < hotPoints.length; i++) {
// var text = new THREE.FontLoader().load(require("./font/NotoKR-Black_Black.json"), function(text) {
// console.log(123)
// var gem = new THREE.TextGeometry('51JOB', {
// size: 20, //字号大小，一般为大写字母的高度
// height: 10, //文字的厚度
// weight: 'normal', //值为'normal'或'bold'，表示是否加粗
// font: text, //字体，默认是'helvetiker'，需对应引用的字体文件
// style: 'normal', //值为'normal'或'italics'，表示是否斜体
// bevelThickness: 1, //倒角厚度
// bevelSize: 1, //倒角宽度
// curveSegments: 30,//弧线分段数，使得文字的曲线更加光滑
// bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
// });
// gem.center();
// var mat = new THREE.MeshPhongMaterial({
// color: 0xffe502,
// specular: 0x009900,
// shininess: 30,
// shading: THREE.FlatShading
// });
// var textObj = new THREE.Mesh(gem, mat);
// textObj.castShadow = true;
// console.log('!!!!',textObj)
// scene.add(textObj);
// new TWEEN.Tween(textObj.rotation).to({y: Math.PI * 2}, 2000).repeat(Infinity).yoyo(true).start();
// });
//创建canvas对象用来绘制文字
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.font = "bolder 10px Arial ";
ctx.fillText(hotPoints[i].detail.title, 140, 65);
ctx.globalAlpha = 1;
// 将画布生成的图片作为贴图给精灵使用，并将精灵创建在设定好的位置
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
const spritMaterial = new THREE.SpriteMaterial({
map: texture
})
let sprite = new THREE.Sprite(spritMaterial)
sprite.position.set(hotPoints[i].position.x, hotPoints[i].position.y, hotPoints[i].position.z);
//精灵的默认大小很小估计是[1,1,1]
sprite.scale.set(0.5, 0.5, 0.5);
sprite.detail = hotPoints[i].detail;
this.text.push(sprite)
this.scene.add(sprite)
}
},
initThree() {
//镜头
this.camera = new THREE.PerspectiveCamera(
90,
document.body.clientWidth / 900,
0.1,
100
);
// document.body.clientWidth / document.body.clientHeight
this.camera.up.x = 0; //相机以哪个方向为上方
this.camera.up.y = 1;
this.camera.up.z = 0; //默认值
// 镜头初始位置
this.camera.position.set(0, 0, 0.01);
// camera.lookAt(0,0,0) //使用了OrbitControls导致无法使用 改用controls的target
//渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(document.body.clientWidth, 900);
this.renderer.shadowMap.enabled = true; //告诉渲染器需要阴影效果
document.getElementById("container").appendChild(this.renderer.domElement);
//镜头控制器
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true; //动态阻尼系数 就是鼠标拖拽旋转灵敏度
this.controls.dampingFactor = 0.14; //动态阻尼系数 就是鼠标拖拽旋转灵敏度
this.controls.enableZoom = true; //是否可以缩放
this.controls.zoomSpeed = 5;
// this.controls.autoRotate = true; //是否自动旋转
// this.controls.autoRotateSpeed = 0.5;
this.controls.minDistance = 0; //设置相机距离原点的最小距离
this.controls.maxDistance = 10; //设置相机距离原点的最远距离
this.controls.enablePan = false; //是否开启右键拖拽平移
this.controls.panSpeed = 10; //平移速度
this.controls.enableKeys = false; //启用或禁用键盘控制
this.controls.keyPanSpeed = 30; //键盘平移速度
this.controls.keys = {
LEFT: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40, // down arrow
};
let m = new THREE.Vector3();
m.x = 0;
m.y = 0;
m.z = 0;
this.controls.target = m; //控制看向某个方向
//一会儿在这里添加3D物体
this.loop();
},
//帧同步重绘
loop() {
this.controls.update();
requestAnimationFrame(this.loop);
this.renderer.render(this.scene, this.camera);
},
// 绘制六张图
draw(datas){
var materials = [];
//根据左右上下前后的顺序构建六个面的材质集
var texture_left = new THREE.TextureLoader().load(
datas.left
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));
var texture_right = new THREE.TextureLoader().load(
datas.right
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));
var texture_top = new THREE.TextureLoader().load(
datas.top
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_top }));
var texture_bottom = new THREE.TextureLoader().load(
datas.bottom
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_bottom }));
var texture_front = new THREE.TextureLoader().load(
datas.front
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));
var texture_back = new THREE.TextureLoader().load(
datas.back
);
materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));
var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), materials);
this.box = box
this.scene.add(box);
box.geometry.scale(1, 1, -1);
},
//绘制外层圆形轮廓
drawOut(){
var sphereGeometry = new THREE.SphereGeometry(
/*半径*/ 1,
/*垂直节点数量*/ 50,
/*水平节点数量*/ 50
); //节点数量越大，需要计算的三角形就越多，影响性能
var sphere = new THREE.Mesh(sphereGeometry);
sphere.material.wireframe = true; //用线框模式大家可以看得清楚是个球体而不是圆形
this.scene.add(sphere);
},
// 滚动事件
scroll(){
var fov = 90;
var near = 45;
var far = 100;
var scrollFunc = (event) => {
// event.preventDefault();
//event.stopPropagation();
if (event.wheelDelta) {
//判断浏览器IE，谷歌滑轮事件
if (event.wheelDelta > 0) {
//当滑轮向上滚动时
fov -= near < fov ? 1 : 0;
} else {
//当滑轮向下滚动时
fov += fov < far ? 1 : 0;
}
}
//改变fov值，并更新场景的渲染
this.camera.fov = fov;
this.camera.updateProjectionMatrix();
this.renderer.render(this.scene, this.camera);
};
/*IE、Opera注册事件*/
if (document.attachEvent) {
document.attachEvent("onmousewheel", scrollFunc);
}
//Firefox使用addEventListener添加滚轮事件
if (document.addEventListener) {
//firefox
document.addEventListener("DOMMouseScroll", scrollFunc, false);
}
//Safari与Chrome属于同一类型
window.onmousewheel = document.onmousewheel = scrollFunc;
},
func(){
document
.querySelector("#container")
.addEventListener("click", (event) => {
event.preventDefault();
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
mouse.x = (event.clientX / document.body.clientWidth) * 2 - 1;
mouse.y = -(event.clientY / document.body.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, this.camera);
var intersects = raycaster.intersectObjects(this.poiObjects);
console.log(intersects, mouse)
if (intersects.length > 0) {
this.select = {
position:intersects[0].object.position,
detail:intersects[0].object.detail
}
// camera.position.set(0, 0.1, 0.01);
// if(intersects[0].object.detail.path === '看书'){
// alert(intersects[0].object.detail.title)
// }else if(intersects[0].object.detail.path === '卧室'){
// document.getElementById('container').style.transform = 'scale(100,100)'
// setTimeout(()=>{
// this.first()
// },250)
// }else if(intersects[0].object.detail.path === '大厅'){
// document.getElementById('container').style.transform = 'scale(100,100)'
// setTimeout(()=>{
// this.scecond()
// },250)
// }
}
});
// document
// .querySelector("#container")
// .addEventListener("mousemove", (event) => {
// console.log(123)
// event.preventDefault();
// var raycaster = new THREE.Raycaster();
// var mouse = new THREE.Vector2();
// mouse.x = (event.clientX / document.body.clientWidth) * 2 - 1;
// mouse.y = -(event.clientY / document.body.clientHeight) * 2 + 1;
// raycaster.setFromCamera(mouse, this.camera);
// var intersects = raycaster.intersectObjects(this.poiObjects);
// if (intersects.length > 0) {
// // camera.position.set(0, 0.1, 0.01);
// if(intersects[0].object.detail.path === '看书'){
// alert(intersects[0].object.detail.title)
// }else if(intersects[0].object.detail.path === '卧室'){
// document.getElementById('container').style.transform = 'scale(100,100)'
// setTimeout(()=>{
// this.first()
// },250)
// }else if(intersects[0].object.detail.path === '大厅'){
// document.getElementById('container').style.transform = 'scale(100,100)'
// setTimeout(()=>{
// this.scecond()
// },250)
// }
// // controls.screenSpacePanning = true
// // alert("点击了热点" + intersects[0].object.detail.title);
// }
// });
},
confirm(){
let arr = this.scene.children.filter((item)=>{
if(!item.detail) return false
return item.detail.id === this.select.detail.id
})
let index = this.point.findIndex(item=>item.detail.id === this.select.detail.id)
this.point.splice(index,1,this.select)
arr.forEach((item)=>{
this.scene.remove(item)
})
this.firstButton([this.select])
this.showText([this.select])
this.select = null
},
del(){
let arr = this.scene.children.filter((item)=>{
if(!item.detail) return false
return item.detail.id === this.select.detail.id
})
let index = this.point.findIndex(item=>item.detail.id === this.select.detail.id)
this.point.splice(index,1)
arr.forEach((item)=>{
this.scene.remove(item)
})
this.select = null
}
},
};
</script>
借鉴于https://blog.csdn.net/weixin_36774307/article/details/118090868
功能 Three.js清除场景/模型释放内存
https://blog.csdn.net/qq_44375977/article/details/115871217
THREE.js创建三维文字TextGeometry
https://blog.csdn.net/unirrrrr/article/details/80651837
一张全景图
<template>
<div class="home">
<div ref="container" id="container" style="width: 100%; height: 800px"></div>
</div>
</template>
<script>
// @ is an alias to /src
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
export default {
name: "Home",
components: {
},
data(){
return {
sceneUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01dead58f03a61a8012049ef124133.jpg%403000w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636353181&t=8986b8074d4093d2fdc187ee5f562bd0', // 需要预览的图片绝对路径
camera: null,
scene: null,
renderer: null,
isUserInteracting: false,
onPointerDownPointerX: 0,
onPointerDownPointerY: 0,
lon: 0,
onPointerDownLon: 0,
lat: 0,
onPointerDownLat: 0,
phi: 0,
theta: 0,
target: new THREE.Vector3()
}
},
mounted() {
this.init()
},
methods: {
init() {
let textureLoader = new THREE.TextureLoader();
textureLoader.load(this.sceneUrl, (texture) => {
texture.mapping = THREE.UVMapping;
this.initImg(texture);
this.render();
});
},
initImg(texture) {
let container, mesh;
// 容器宽度、高度
let containerWidth = this.$refs.container.offsetWidth;
let containerHeight = this.$refs.container.offsetHeight;
container = document.getElementById('container');
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
// this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setSize(containerWidth, containerHeight);
let childs = container.childNodes;
if (container.childNodes.length > 0) {
container.removeChild(childs[0]);
container.appendChild(this.renderer.domElement);
} else {
container.appendChild(this.renderer.domElement);
}
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(60, containerWidth / containerHeight , 1, 1000);
mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(500, 32, 16), new THREE.MeshBasicMaterial({ map: texture }));
mesh.geometry.scale(-1, 1, 1);
this.scene.add(mesh);
container.addEventListener('mousedown', this.onDocumentMouseDown, false);
container.addEventListener('mousemove', this.onDocumentMouseMove, false);
container.addEventListener('mouseup', this.onDocumentMouseUp, false);
container.addEventListener('mousewheel', this.onDocumentMouseWheel, false);
container.addEventListener('touchstart', this.onDocumentTouchStart, false);
container.addEventListener('touchmove', this.onDocumentTouchMove, false);
},
onDocumentMouseDown(event) {
event.preventDefault();
this.isUserInteracting = true;
this.onPointerDownPointerX = event.clientX;
this.onPointerDownPointerY = event.clientY;
this.onPointerDownLon = this.lon;
this.onPointerDownLat = this.lat;
},
onDocumentMouseMove(event) {
if (this.isUserInteracting) {
this.lon = (this.onPointerDownPointerX - event.clientX) * 0.1 + this.onPointerDownLon;
this.lat = (event.clientY - this.onPointerDownPointerY) * 0.1 + this.onPointerDownLat;
this.render();
}
},
onDocumentMouseUp(event) {
this.isUserInteracting = false;
this.render();
},
onDocumentMouseWheel(event) {
this.camera.fov -= event.wheelDeltaY * 0.05;
this.camera.updateProjectionMatrix();
event = event || window.event;
if (event.stopPropagation) { // 这是取消冒泡
event.stopPropagation();
} else {
event.cancelBubble = true;
};
if (event.preventDefault) { // 这是取消默认行为
event.preventDefault();
} else {
event.returnValue = false;
};
this.render();
},
onDocumentTouchStart(event) {
if (event.touches.length == 1) {
event.preventDefault();
this.onPointerDownPointerX = event.touches[0].pageX;
this.onPointerDownPointerY = event.touches[0].pageY;
this.onPointerDownLon = this.lon;
this.onPointerDownLat = this.lat;
}
},
onDocumentTouchMove(event) {
if (event.touches.length == 1) {
event.preventDefault();
this.lon = (this.onPointerDownPointerX - event.touches[0].pageX) * 0.1 + this.onPointerDownLon;
this.lat = (event.touches[0].pageY - this.onPointerDownPointerY) * 0.1 + this.onPointerDownLat;
this.render();
}
},
render() {
this.lon += 0.15;
this.lat = Math.max(-85, Math.min(85, this.lat));
this.phi = THREE.Math.degToRad(90 - this.lat);
this.theta = THREE.Math.degToRad(this.lon);
this.camera.position.x = 100 * Math.sin(this.phi) * Math.cos(this.theta);
this.camera.position.y = 100 * Math.cos(this.phi);
this.camera.position.z = 100 * Math.sin(this.phi) * Math.sin(this.theta);
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
}
},
};
</script>