-
Notifications
You must be signed in to change notification settings - Fork 0
/
task3-ply-load.html
110 lines (84 loc) · 4.07 KB
/
task3-ply-load.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
<!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 { PLYLoader } from "./three.js-dev/examples/jsm/loaders/PLYLoader.js"; // class PLYLoader
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
35, //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
40 //far clip frame, z=-f, z=x=y=0 - view/eye point, frustum view - truncated pyramid - усеченная пирамида
);
camera.position.set(0, 0, 30); // 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
// PLY file
const loader = new PLYLoader();
loader.load( './three.js-dev/examples/models/ply/binary/Lucy100k.ply', function ( geometry ) { //works with function geometry, 'let geometry = new BufferGeometry();'
geometry.computeVertexNormals();
const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
const mesh = new THREE.Mesh( geometry, material );
mesh.position.y = - 0.2;
mesh.position.z = 0.3;
mesh.rotation.x = - Math.PI*0;
mesh.rotation.y = - Math.PI*0.8;
mesh.scale.multiplyScalar( 0.01 );
console.log(mesh.geometry);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
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>