WebGL VR 图片显示：使用 H5 代码实现沉浸式体验
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>WebGL VR Image</title>
<style>
canvas {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<script src='https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/three/examples/js/effects/VREffect.js'></script>
<script src='https://cdn.jsdelivr.net/npm/three/examples/js/controls/VRControls.js'></script>
<script>
// create scene
var scene = new THREE.Scene();
<pre><code> // create camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);
// create renderer
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('canvas'), antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.vr.enabled = true;
// create vr effect
var vrEffect = new THREE.VREffect(renderer);
vrEffect.setSize(window.innerWidth, window.innerHeight);
// create vr controls
var vrControls = new THREE.VRControls(camera);
// create image texture
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('image.jpg');
// create sphere geometry
var sphereGeometry = new THREE.SphereGeometry(500, 60, 40);
// create sphere material
var sphereMaterial = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide});
// create sphere mesh
var sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
// add sphere mesh to scene
scene.add(sphereMesh);
// render function
function render() {
renderer.setAnimationLoop(render);
vrControls.update();
vrEffect.render(scene, camera);
}
// start rendering
render();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lfga 著作权归作者所有。请勿转载和采集!