Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 1653c9a6 编写于 作者: M Mr.doob
浏览文件
操作

Examples: Renamed webvr_6dof_panorama to webvr_panorama_depth and clean up.

上级 af426ea3
隐藏空白更改
内联 并排
Showing with 141 addition and 140 deletion
examples/files.js
浏览文件 @ 1653c9a6
......@@ -329,14 +329,14 @@ var files = {
"webvr_lorenzattractor",
"webvr_multiview",
"webvr_panorama",
"webvr_panorama_depth",
"webvr_paint",
"webvr_rollercoaster",
"webvr_sandbox",
"webvr_sculpt",
"webvr_video",
"webvr_vive_paint",
"webvr_vive_sculpt",
"webvr_6dof_panorama"
"webvr_vive_sculpt"
],
"physics": [
"webgl_physics_cloth",
......
examples/webvr_6dof_panorama.html 已删除 100644 → 0
浏览文件 @ af426ea3
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webvr - 360 6DOF panorama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="main.css">
<!-- WebXR Device API (For Chrome M76+), expires 12/04/2019 -->
<meta http-equiv="origin-trial" content="Aq9LklhCLNUveuCr7QTpGpqwCPG817cYHdVyQuJPOZYk47iRB390lUKa5edVmgS1pZSl8HPspElEC/91Fz55dwIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - 360 6DOF panorama<br />
Created by <a href="https://orfleisher.com" target="_blank" rel="noopener">@juniorxsound</a>. Panorama from <a href="https://krpano.com/examples/?depthmap" target="_blank" rel="noopener">krpano</a>.
</div>
<script src="js/vr/HelioWebXRPolyfill.js"></script>
<script type="module">
import * as THREE from '../build/three.module.js';
import { WEBVR } from './jsm/vr/WebVR.js';
var camera, scene, renderer, sphere, clock;
init();
animate();
function init() {
var container = document.getElementById( 'container' );
clock = new THREE.Clock();
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x101010 );
var light = new THREE.AmbientLight( 0x404040, 10 );
scene.add( light );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
var cameraRig = new THREE.Object3D();
cameraRig.position.y = - 1.6;
cameraRig.add( camera );
scene.add( cameraRig );
// Create the panoramic sphere geometery
var panoSphereGeo = new THREE.SphereBufferGeometry( 6, 256, 256 );
// Create the panoramic sphere material
var panoSphereMat = new THREE.MeshStandardMaterial( {
side: THREE.BackSide,
displacementScale: - 4.0
} );
// Create the panoramic sphere mesh
sphere = new THREE.Mesh( panoSphereGeo, panoSphereMat );
// Load and assign the texture and depth map
var manager = new THREE.LoadingManager();
var loader = new THREE.TextureLoader( manager );
loader.load( './textures/kandao3.jpg', function ( texture ) {
texture.minFilter = THREE.NearestFilter;
texture.format = THREE.RGBFormat;
texture.generateMipmaps = false;
sphere.material.map = texture;
} );
loader.load( './textures/kandao3_depthmap.jpg', function ( depth ) {
depth.minFilter = THREE.NearestFilter;
depth.format = THREE.RGBFormat;
depth.generateMipmaps = false;
sphere.material.displacementMap = depth;
} );
// On load complete add the panoramic sphere to the scene
manager.onLoad = function () {
scene.add( sphere );
};
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.vr.enabled = true;
container.appendChild( renderer.domElement );
document.body.appendChild( WEBVR.createButton( renderer ) );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
renderer.setAnimationLoop( render );
}
function render() {
// If we are not presenting move the camera a little so the effect is visible
if ( ! renderer.vr.isPresenting() ) {
var time = clock.getElapsedTime();
sphere.rotation.y += 0.001;
sphere.position.x = Math.sin( time ) * 0.2;
sphere.position.z = Math.cos( time ) * 0.2;
}
renderer.render( scene, camera );
}
</script>
</body>
</html>
examples/webvr_panorama_depth.html 0 → 100644
浏览文件 @ 1653c9a6
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webvr - panorama with depth</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="main.css">
<!-- WebXR Device API (For Chrome M76+), expires 12/04/2019 -->
<meta http-equiv="origin-trial" content="Aq9LklhCLNUveuCr7QTpGpqwCPG817cYHdVyQuJPOZYk47iRB390lUKa5edVmgS1pZSl8HPspElEC/91Fz55dwIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - panorama with depth<br />
Created by <a href="https://orfleisher.com" target="_blank" rel="noopener">@juniorxsound</a>. Panorama from <a href="https://krpano.com/examples/?depthmap" target="_blank" rel="noopener">krpano</a>.
</div>
<script src="js/vr/HelioWebXRPolyfill.js"></script>
<script type="module">
import * as THREE from '../build/three.module.js';
import { WEBVR } from './jsm/vr/WebVR.js';
var camera, scene, renderer, sphere, clock;
init();
animate();
function init() {
var container = document.getElementById( 'container' );
clock = new THREE.Clock();
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x101010 );
var light = new THREE.AmbientLight( 0x404040, 10 );
scene.add( light );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
var cameraRig = new THREE.Object3D();
cameraRig.position.y = - 1.6;
cameraRig.add( camera );
scene.add( cameraRig );
// Create the panoramic sphere geometery
var panoSphereGeo = new THREE.SphereBufferGeometry( 6, 256, 256 );
// Create the panoramic sphere material
var panoSphereMat = new THREE.MeshStandardMaterial( {
side: THREE.BackSide,
displacementScale: - 4.0
} );
// Create the panoramic sphere mesh
sphere = new THREE.Mesh( panoSphereGeo, panoSphereMat );
// Load and assign the texture and depth map
var manager = new THREE.LoadingManager();
var loader = new THREE.TextureLoader( manager );
loader.load( './textures/kandao3.jpg', function ( texture ) {
texture.minFilter = THREE.NearestFilter;
texture.format = THREE.RGBFormat;
texture.generateMipmaps = false;
sphere.material.map = texture;
} );
loader.load( './textures/kandao3_depthmap.jpg', function ( depth ) {
depth.minFilter = THREE.NearestFilter;
depth.format = THREE.RGBFormat;
depth.generateMipmaps = false;
sphere.material.displacementMap = depth;
} );
// On load complete add the panoramic sphere to the scene
manager.onLoad = function () {
scene.add( sphere );
};
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.vr.enabled = true;
container.appendChild( renderer.domElement );
document.body.appendChild( WEBVR.createButton( renderer ) );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
renderer.setAnimationLoop( render );
}
function render() {
// If we are not presenting move the camera a little so the effect is visible
if ( ! renderer.vr.isPresenting() ) {
var time = clock.getElapsedTime();
sphere.rotation.y += 0.001;
sphere.position.x = Math.sin( time ) * 0.2;
sphere.position.z = Math.cos( time ) * 0.2;
}
renderer.render( scene, camera );
}
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或