-
Notifications
You must be signed in to change notification settings - Fork 2
/
dolly-zoom.html
102 lines (78 loc) · 2.99 KB
/
dolly-zoom.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dolly vs. Zoom</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ui">
Dolly vs. Zoom <input type="range" value="0.5" min="0" max="1" step="0.01" id="input">
</div>
<div class="captionLeft">
Dolly in / out<br>
camera z: <output id="output0Z"></output> unit<br>
camera fov: <output id="output0Fov"></output> deg
</div>
<div class="captionRight">
Zoom in / out<br>
camera z: <output id="output1Z"></output> unit<br>
camera fov: <output id="output1Fov"></output> deg
</div>
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/[email protected]/build/three.module.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js';
const CAMERA_DEFAULT_Z = 5;
const CAMERA_DEFAULT_FOV = 60;
const width = window.innerWidth / 2;
const height = window.innerHeight;
const clock = new THREE.Clock();
const scene = new THREE.Scene();
const camera0 = new THREE.PerspectiveCamera( CAMERA_DEFAULT_FOV, width / height, 0.001, 100 );
camera0.position.set( 0, 0.5, CAMERA_DEFAULT_Z );
const camera1 = new THREE.PerspectiveCamera( CAMERA_DEFAULT_FOV, width / height, 0.001, 100 );
camera1.position.set( 0, 0.5, CAMERA_DEFAULT_Z );
const renderer0 = new THREE.WebGLRenderer( { antialias: true } );
renderer0.setSize( width, height );
renderer0.toneMapping = THREE.ACESFilmicToneMapping;
renderer0.toneMappingExposure = 2.2;
renderer0.physicallyCorrectLights = true;
renderer0.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild( renderer0.domElement );
const renderer1 = new THREE.WebGLRenderer( { antialias: true } );
renderer1.setSize( width, height );
renderer1.toneMapping = THREE.ACESFilmicToneMapping;
renderer1.toneMappingExposure = 2.2;
renderer1.physicallyCorrectLights = true;
renderer1.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild( renderer1.domElement );
scene.add(
new THREE.HemisphereLight( 0xffffff, 0x332222 ),
new THREE.AmbientLight( 0x999999 )
);
const grid = new THREE.GridHelper( 10, 10 );
scene.add( grid );
const gltfLoader = new GLTFLoader();
gltfLoader.load( './rubber-duck.glb', ( gltf ) => scene.add( gltf.scene ) );
( function anim () {
const elapsed = clock.getElapsedTime();
// if ( elapsed > 10 ) { return; }
requestAnimationFrame( anim );
renderer0.render( scene, camera0 );
renderer1.render( scene, camera1 );
} )();
const onCameraStateChange = ( value ) => {
camera0.position.z = value * 2 * CAMERA_DEFAULT_Z;
camera1.fov = value * 2 * CAMERA_DEFAULT_FOV;
camera1.updateProjectionMatrix();
output0Z.innerText = camera0.position.z.toFixed( 2 );
output0Fov.innerText = camera0.fov.toFixed( 2 );
output1Z.innerText = camera1.position.z.toFixed( 2 );
output1Fov.innerText = camera1.fov.toFixed( 2 );
}
onCameraStateChange( 0.5 );
input.addEventListener( 'input', ( event ) => onCameraStateChange( + event.target.value ) );
</script>
</body>
</html>