import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
// @ts-ignore
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const VRRoom: React
.FC = () => {
const mountRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// 场景
const scene = new THREE
.Scene();
// 相机
const camera = new THREE
.PerspectiveCamera(
75,
window.innerWidth /
window.innerHeight,
0
.3,
1000
);
camera
.position
.set(0, 0, 0
.1);
// 渲染器
const renderer = new THREE
.WebGLRenderer({ antialias: true });
renderer
.setSize(
window.innerWidth,
window.innerHeight);
// 控制器
const controls = new OrbitControls(camera, renderer
.domElement);
controls
.enableZoom = false;
controls
.enablePan = false;
controls
.rotateSpeed = 0
.5;
// 球体几何体
const geometry = new THREE
.SphereGeometry(500, 60, 40);
geometry
.scale(-1, 1, 1); // 反转球体，使贴图在内壁
// 贴图
const texture = new THREE
.TextureLoader()
.load('/vr
.jpg');
const material = new THREE
.MeshBasicMaterial({ map: texture });
const mesh = new THREE
.Mesh(geometry, material);
scene
.add(mesh);
// 渲染函数
const animate = () => {
requestAnimationFrame(animate);
controls
.update();
renderer
.render(scene, camera);
};
// 挂载
if (mountRef
.current) {
mountRef
.current
.appendChild(renderer
.domElement);
}
animate();
// 响应式
const handleResize = () => {
camera
.aspect =
window.innerWidth /
window.innerHeight;
camera
.updateProjectionMatrix();
renderer
.setSize(
window.innerWidth,
window.innerHeight);
};
window.addEventListener('resize', handleResize);
// 清理
return () => {
window.removeEventListener('resize', handleResize);
if (mountRef
.current) {
mountRef
.current
.removeChild(renderer
.domElement);
}
renderer
.dispose();
geometry
.dispose();
material
.dispose();
texture
.dispose();
};
}, []);
return <div ref={mountRef} style={{ width: '
100vw', height: '
100vh', overflow: 'hidden' }} />;
};
export default VRRoom;帮我找一下为什么效果是全黑
本文探讨了使用JavaScript和CSS实现图片全屏显示的方法。作者最初采用JS动态设置图片宽度，后转而使用CSS的vw单位简化代码，发现两者在处理滚动条宽度上存在差异。
扫一扫
1998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
