-
Notifications
You must be signed in to change notification settings - Fork 0
/
test2.html
119 lines (85 loc) · 4.25 KB
/
test2.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from "./three.js-dev/build/three.module.js"; // importing everything from the module - 'three.module.js''.
import { OrbitControls } from "./three.js-dev/examples/jsm/controls/OrbitControls.js"; // importing only single value, exported name OrbitControls should have been defined
// as 'class OrbitControls' and now visible in current scope (зона видимости).
import { GLTFLoader } from "./three.js-dev/examples/jsm/loaders/GLTFLoader.js"; // class GLTFLoader
let renderer, scene, camera;
initialise();
function initialise() {
// Init renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.outputEncoding = THREE.sRGBEncoding; //Defines the output encoding of the renderer. Default is THREE.LinearEncoding=3000, THREE.sRGBEncoding = 3001.
// Init scene
scene = new THREE.Scene();
// Init camera
camera = new THREE.PerspectiveCamera( // value in documentation, by default, almost always
64, //field of view in degrees
window.innerWidth / window.innerHeight, //aspect ratio - соотношение сторон
1, // near clip frame - the coordinate of starting point to view on Z axe for frame, z=-n
1024 //far clip frame, z=-f, z=x=y=0 - view/eye point, frustum view - truncated pyramid - усеченная пирамида
);
camera.position.set(-10, 8, 0); // by default x=y=z=0; z is a camera position on z axis, for visualising
scene.add(camera);
// controls
// Orbit controls allow the camera to orbit around a target.
const controls = new OrbitControls( //Constructor made initialing before using another methods of the class
camera, //The camera to be controlled.
renderer.domElement //The HTML element used for event listeners.
);
controls.addEventListener( //Registers an event handler (обработчик) for the specified type with the object.
'change', // type of event, which should be processed.
render // listener - function in JavaScript or EventListener, which will get notification if event have happened.
);
controls.minDistance = 10;
controls.maxDistance = 50;
controls.enablePan = false;
// ambient
scene.add(new THREE.AmbientLight(0xffffff, .2));
// light
const light = new THREE.PointLight(0xffffff, 1.5);
camera.add(light);
// model
new GLTFLoader().load('./three.js-dev/examples/models/gltf/Nefertiti/Nefertiti.glb', function (gltf) {
gltf.scene.traverse(function (child) {
if (child.isMesh) {
// glTF currently supports only tangent-space normal maps.
// this model has been modified to demonstrate the use of an object-space normal map.
child.material.normalMapType = THREE.ObjectSpaceNormalMap;
// attribute normals are not required with an object-space normal map. remove them.
child.geometry.deleteAttribute('normal');
//
child.material.side = THREE.DoubleSide;
child.scale.multiplyScalar(0.5);
// recenter
new THREE.Box3().setFromObject(child).getCenter(child.position).multiplyScalar(-1);
scene.add(child);
}
} );
render();
});
window.addEventListener('resize', WindowResize);
}
function WindowResize(){
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>