本文目录
前言
Three.js是一个基于WebGL的JavaScript3D库，它允许在网页上创建和显示3D图形。在房地产行业中，Three.js常被用于实现全景看房案例，为用户提供沉浸式的房屋浏览体验。
效果展示
立方体模式效果：
球体模式效果：
一、立方体模式
立方体模式的话，我们需要有6张照片，分别是房间的上下左右前后照片，有这6张图片素材，我们分别贴在立方体的6个面上，然后把相机至于其中，就能实现看房效果。
1.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script type="module">
// 倒入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three';
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera( // 透视相机
75, // 视角 角度数
window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
0.1, // 近平面（相机最近能看到物体）
1000, // 远平面（相机最远能看到物体）
);
camera.position.set(0, 0, 30);
// 创建渲染器
const renderer = new THREE.WebGLRenderer({
antialias: true, // 抗锯齿
});
// 设置渲染器宽高
renderer.setSize(window.innerWidth, window.innerHeight);
// renderer（渲染器）的dom元素添加到我们的HTML文档中
document.body.appendChild(renderer.domElement);
// 控制器
const control = new OrbitControls(camera, renderer.domElement);
// 开启阻尼惯性，默认值为0.05
control.enableDamping = true;
const images = [
'../assets/left.png',
'../assets/right.png',
'../assets/top.png',
'../assets/bottom.png',
'../assets/front.png',
'../assets/back.png',
];
let materials = [];
images.forEach((imgUrl, index) => {
const texture = new THREE.TextureLoader().load(imgUrl);
if (index == '3') {
texture.rotation = -Math.PI/2;
texture.center = new THREE.Vector2(0.5, 0.5);
}
if (index == '2') {
texture.rotation = Math.PI/2;
texture.center = new THREE.Vector2(0.5, 0.5);
}
const material = new THREE.MeshBasicMaterial({
map: texture
});
materials.push(material);
});
const cube = new THREE.Mesh(new THREE.BoxGeometry(40, 40, 40), materials);
cube.geometry.scale(12, 12, -12);
scene.add(cube);
// 渲染循环动画
function animate() {
// 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
requestAnimationFrame(animate);
// 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
control.update();
renderer.render(scene, camera);
};
// 执行动画
animate();
</script>
</body>
</html>
1.2 代码解析
- 立方体模式下，我们6张图代表一个场景，我们创建了
images数组将图片地址填入，接着遍历创建texture贴图，分别贴在立方体6个面上，顺序为左右上下前后。 - 如果发现图片位置不对的话，我们可以将贴图旋转，核心代码
texture.rotation = -Math.PI/2; texture.center = new THREE.Vector2(0.5, 0.5);选择的角度可以自己定，调到合适为止。 cube.geometry.scale(12, 12, -12);我们将立方体的z轴缩放为负的，立方体在Z轴方向上的尺寸会减小，并且其方向会与默认情况相反，即从屏幕内向屏幕外看去，立方体的正面实际上是在屏幕的“背后”。让场景中有深度感，这种变换也可以用来实现一些特殊的效果，比如模拟从特定角度观察物体时的透视收缩效果，或者创建视觉上的错觉，使物体看起来像是被“推”到了屏幕的背后或前面。camera.position.set(0, 0, 1);按道理我们相机的位置如果不设定，默认是在原点(0,0,0)的位置。那不就是刚好在这个立方体的正中心，那为什么我们还要多此一举设置一个z轴为1，因为我们用了OrbitControls轨道控制器，Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。注意这句话，使得相机围绕目标进行轨道运动，默认情况下，OrbitControls会围绕目标物体的中心进行轨道运动。如果目标物体是一个三维对象，那么默认的轨道就是该对象的中心。而在这个案例中，我们使用了const control = new OrbitControls(camera, renderer.domElement);控制器将会围绕原点(0,0,0)进行旋转，如果此时你设置相机也为原点的话，或者不设置相机位置，那么场景将会旋转不起来，不相信的话，自己可以尝试下。
1.3 效果
二、球形模式
在球形模式下，我们只用一张全景图即可了。
2.1 代码
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script type="module">
// 倒入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three';
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera( // 透视相机
75, // 视角 角度数
window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
0.1, // 近平面（相机最近能看到物体）
1000, // 远平面（相机最远能看到物体）
);
camera.position.set(0, 0, 30);
// 创建渲染器
const renderer = new THREE.WebGLRenderer({
antialias: true, // 抗锯齿
});
// 设置渲染器宽高
renderer.setSize(window.innerWidth, window.innerHeight);
// renderer（渲染器）的dom元素添加到我们的HTML文档中
document.body.appendChild(renderer.domElement);
// 控制器
const control = new OrbitControls(camera, renderer.domElement);
// 开启阻尼惯性，默认值为0.05
control.enableDamping = true;
// 贴图
const texture = new THREE.TextureLoader().load('../assets/livingRoom.jpg');
// 创建球体
const sphereGeometry = new THREE.SphereGeometry(16, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({
map: texture
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.geometry.scale(12,12,-12);
scene.add(sphere);
// 渲染循环动画
function animate() {
// 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
requestAnimationFrame(animate);
// 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
control.update();
renderer.render(scene, camera);
};
// 执行动画
animate();
</script>
</body>
</html>
2.2 代码解析
- 我们发现球体的就一张全景图就可以了，但是它还是要进行
sphere.geometry.scale(12,12,-12);，如果没有设置这个的话如下图效果：
就会在球外观看，所以我们必须得设置这个属性。
2.3 效果
我们设置了z轴的负数缩放这使得我们在球体里去观察，效果如下：
可以看到跟立方体的效果基本上是一致的。
标签：Threejs,12,const,THREE,texture,案例,renderer,new,看房 From： https://blog.csdn.net/weixin_44103733/article/details/142310647在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。