threejs搭建VR全景视图

十年一梦惊觉醒

2024-04-24 帮助1人

资源下载地址：https://download.csdn.net/download/mokeily99/40531697

以下为全部代码，引入文件自行查找

<!DOCTYPE html>
<html style="height:100%;">
<head>
<title>3D</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=6;IE=7; IE=8; IE=EmulateIE7" />
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="OrbitControls.js"></script>
<script type="text/javascript" src="PMREMGenerator.js"></script>
<script type="text/javascript" src="PMREMCubeUVPacker.js"></script>
<script type="text/javascript" src="RGBELoader.js"></script>
</head>
<body>
<script>
var Scene, camera, renderer, composer, controls;
init();
initcamera();
function init() {
Scene = new THREE.Scene();
//拍摄距离视野角值越大，场景中的物体越小,实现小行星视角，近的物体拉长
var fov = 140
camera = new THREE.PerspectiveCamera(fov, window.innerWidth
/ window.innerHeight, 1, 1000);
camera.position.set(0, 8, 0);
camera.lookAt(new THREE.Vector3(0, -500, 0))
renderer = new THREE.WebGLRenderer({
alpha : true,
antialias : true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// 渲染范围
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启阴影支持
renderer.shadowMap.enabled = true;
// 阴影类型
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
var geom = new THREE.SphereBufferGeometry(10, 100, 100)//创建球体
//var geom = new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40)
var texture = new THREE.RGBELoader().load('bg-9.hdr')//加载hdr资源
//var texture = new THREE.TextureLoader().load('bg-5.jpg')//加载jpg资源方式
texture.encoding = THREE.RGBEEncoding;//设置编码属性的值，注：加载jpg时需要去掉这行
texture.minFilter = THREE.NearestFilter;//当一个纹素覆盖小于一个像素时，贴图将如何采样
texture.magFilter = THREE.NearestFilter;//当一个纹素覆盖大于一个像素时，贴图将如何采样
texture.flipY = true;//翻转图像的Y轴以匹配WebGL纹理坐标空间
var mat = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide })
var mesh = new THREE.Mesh(geom, mat)
Scene.add(mesh)
//Scene.background = texture;
}
function initcamera() {
/* var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true; */
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.autoRotate = true;
controls.minDistance = 0;
controls.maxDistance = 5000;
controls.update();
}
//环境光
Scene.add(new THREE.AmbientLight(0xffffff, 2));
//上聚光源
var spotLight = new THREE.SpotLight(0xffffff, 2);
spotLight.position.set(0, 500, 0);
spotLight.LightShadow = 0.5;
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 1;
spotLight.shadow.camera.fov = 30;
Scene.add(spotLight);
var tdwon = new Date();
var downMax = 0;
var animatesFlag = true;
var fovFlag = true;
var fovStep = -0.001;
function animateDown() {
console.log(camera.position.y);
controls.update();
var t1 = new Date(); // 本次时间
var t = t1 - tdwon; // 时间差
camera.translateY(fovStep * t/3);
//camera.lookAt(Scene.position);// camera.lookAt与orbitcontrol冲突不能使用，要用下面的controls.target代替
renderer.render(Scene, camera);
if(camera.position.y <= downMax){
animatesFlag = false;
}
if(camera.position.y <= (downMax 4) && fovFlag){
fovFlag = false;
animateFov();
}
if (animatesFlag) {
requestAnimationFrame(animateDown);
}
}
setTimeout(function(){ animateDown();}, 1000);
var tn = new Date();
function animateNormalCircle() {
controls.update();
var t1 = new Date(); // 本次时间
var t = t1 - tn; // 时间差
//camera.translateX(0.0001 * t / 3); // 沿着Y轴旋转着从大到小
var axis = new THREE.Vector3(0,0,0);//向量axis
camera.rotateOnAxis(axis, 0.0001 * t / 3);//绕axis轴旋转π/8
camera.lookAt(Scene.position);// camera.lookAt与orbitcontrol冲突不能使用，要用下面的controls.target代替
renderer.render(Scene, camera);
requestAnimationFrame(animateNormalCircle);
}
function animateFov(){
var targetFov = 50;
var baseFov = camera.fov;
if(baseFov > targetFov){
camera.fov = baseFov - 0.5;
camera.updateProjectionMatrix();
//渲染
renderer.render(Scene, camera);
requestAnimationFrame(animateFov);
}else{
animateNormalCircle();
}
}
var skip=0;
var animate = function() {
requestAnimationFrame(animate);
if (skip != 0) {
skip = skip % 2;
return;
} else {
skip = skip % 2;
}
renderer.render(Scene, camera);
};
animate();
</script>
</body>
</html>

演示效果：

学新通

hdr、JPG全景图生成方法参照：3dmax模型导出成全景图的两种方法详细步骤-模型云室内设计资讯

这篇好文章是转载于：学新通技术网

threejs搭建VR全景视图

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐