Skip to content

Commit 8461e02

Browse files
Zvyozdo4kaZvyozdo4ka
authoredOct 18, 2021
Add files via upload
1 parent 76ac672 commit 8461e02

File tree

1 file changed

+332
-0
lines changed

1 file changed

+332
-0
lines changed
 

‎task11-lines_on_cloud.html

+332
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Right and Left Events</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
</head>
8+
<body>
9+
<div id="container"></div>
10+
<div id="info">
11+
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - decal splatter<br/>
12+
click to shoot
13+
</div>
14+
<script type="module">
15+
import * as THREE from './three.js-dev/build/three.module.js';
16+
import { OrbitControls } from './three.js-dev/examples/jsm/controls/OrbitControls.js';
17+
import { PLYLoader } from "./three.js-dev/examples/jsm/loaders/PLYLoader.js"; // class PLYLoader
18+
19+
let flag_line=0;
20+
let points_line = [];
21+
let glance = 11;
22+
23+
const material_red = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
24+
25+
let renderer, scene, camera;
26+
let group;
27+
let raycaster;
28+
let line;
29+
let toggle = 0;
30+
let clock;
31+
let p = new THREE.Vector3();
32+
let n;
33+
let mouseHelper;
34+
35+
let moved = false;
36+
37+
let sphereInter;
38+
39+
let intersection = {
40+
intersects: false,
41+
point: new THREE.Vector3(),
42+
normal: new THREE.Vector3()
43+
};
44+
45+
const decalMaterial = new THREE.MeshPhongMaterial( {
46+
specular: 0x444444,
47+
//map: decalDiffuse,
48+
//normalMap: decalNormal,
49+
normalScale: new THREE.Vector2( 1, 1 ),
50+
shininess: 30,
51+
transparent: true,
52+
depthTest: true,
53+
depthWrite: false,
54+
polygonOffset: true,
55+
polygonOffsetFactor: - 4,
56+
wireframe: false
57+
} );
58+
59+
let mesh;
60+
61+
const mouse = new THREE.Vector2();
62+
const intersects = [];
63+
64+
const position = new THREE.Vector3();
65+
66+
const orientation = new THREE.Euler();
67+
const size = new THREE.Vector3( 10, 10, 10 );
68+
window.addEventListener( 'load', init );
69+
70+
let geometry = new THREE.BufferGeometry();
71+
72+
let geometry__ = new THREE.BufferGeometry().setFromPoints( points_line );
73+
let material__ = new THREE.MeshBasicMaterial( { color: glance * 0xffa100 } );
74+
let line__ = new THREE.Line( geometry__, material__ );
75+
76+
function init() {
77+
clock = new THREE.Clock();
78+
renderer = new THREE.WebGLRenderer( { antialias: true } );
79+
renderer.setPixelRatio( window.devicePixelRatio );
80+
renderer.setSize( window.innerWidth, window.innerHeight );
81+
container.appendChild( renderer.domElement );
82+
scene = new THREE.Scene();
83+
//scene.background = new THREE.Color( 0xbfe3dd );
84+
camera = new THREE.PerspectiveCamera( 10, window.innerWidth / window.innerHeight, 1, 3000 );
85+
camera.position.z = 500;
86+
const controls = new OrbitControls( camera, renderer.domElement );
87+
controls.target = new THREE.Vector3(0, 0, 0);
88+
controls.minDistance = 50;
89+
controls.maxDistance = 1000;
90+
scene.add( new THREE.AmbientLight( 0x443333 ) );
91+
92+
//let geometry = new THREE.BufferGeometry();
93+
geometry.setFromPoints( [ new THREE.Vector3(), new THREE.Vector3() ] );
94+
95+
//geometry_.setAttribute( 'array', new THREE.Float32BufferAttribute( position, 3 ) );
96+
97+
//console.log ("00000 geometry_", geometry_);
98+
99+
line = new THREE.Line( geometry, new THREE.LineBasicMaterial() );
100+
scene.add( line );
101+
102+
console.log("line normal111", line.position.normal);
103+
104+
//////////////////////////////////////////////////////////////////////////////////////
105+
106+
loadModel();
107+
108+
window.addEventListener( 'pointermove', onPointerMove );
109+
//window.addEventListener( 'pointerup', PointUp ) ;
110+
//window.addEventListener( 'pointerdown', PointDown) ;
111+
//window.addEventListener( 'rightclick', RightClick) ;
112+
113+
window.addEventListener('mousedown', function (event) {
114+
switch (event.button) {
115+
case 0:
116+
//alert('Left Mouse button pressed.');
117+
LeftClick(event);
118+
break;
119+
case 1:
120+
alert('Middle Mouse button pressed.');
121+
break;
122+
case 2:
123+
//alert('Right Mouse button pressed.');
124+
RightClick();
125+
126+
break;
127+
default:
128+
alert('You have a strange Mouse!');
129+
}
130+
// e.button === 0: the left button is clicked
131+
// e.button === 1: the middle button is clicked
132+
// e.button === 2: the right button is clicked
133+
// e.button === 3: the `Browser Back` button is clicked
134+
});
135+
136+
137+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
138+
raycaster = new THREE.Raycaster();
139+
// raycaster.params.Points.threshold = threshold;
140+
// console.log("raycaster.params.Points.threshold",raycaster.params.Points.threshold);
141+
142+
mouseHelper = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
143+
mouseHelper.visible = true;
144+
//mouseHelper.visible = false;
145+
scene.add( mouseHelper );
146+
147+
window.addEventListener( 'resize', onWindowResize );
148+
149+
// let moved = false;
150+
151+
controls.addEventListener( 'change', function () {
152+
153+
moved = true;
154+
155+
} );
156+
157+
animate();
158+
}
159+
160+
function PointDown () {
161+
moved = false;
162+
}
163+
164+
function onWindowResize() {
165+
camera.aspect = window.innerWidth / window.innerHeight;
166+
camera.updateProjectionMatrix();
167+
renderer.setSize( window.innerWidth, window.innerHeight );
168+
}
169+
function animate() {
170+
requestAnimationFrame( animate );
171+
renderer.render( scene, camera );
172+
}
173+
function loadModel() {
174+
var particles;
175+
var loader = new PLYLoader();
176+
loader.load('./three.js-dev/examples/models/ply/binary/model.ply',function(geometry){//works with function geometry,'let geometry = new BufferGeometry();'; geometry type is const
177+
178+
// geometry consists of color, normal, position, Prototype
179+
particles = geometry.attributes.color.count; // 298892 points
180+
var positions = geometry.attributes.position.array; // x, y, z is going in sequence in array positions
181+
var colors = geometry.attributes.color.array; // r, g, b is going in sequence in array colors
182+
183+
var x_=[], y_=[], z_=[], r=[], g=[], b=[];
184+
var j=0;
185+
186+
for (var i=0; i<positions.length; i=i+3){
187+
x_[j]=positions[i];
188+
y_[j]=positions[i+1];
189+
z_[j]=positions[i+2];
190+
191+
r[j]=colors[i];
192+
g[j]=colors[i+1];
193+
b[j]=colors[i+2];
194+
195+
j=j+1;
196+
}
197+
198+
const position_p = [];
199+
const color_p = [];
200+
const color = new THREE.Color();
201+
var x_p, y_p, z_p, r_p, g_p, b_p;
202+
203+
for ( var k = 0; k < particles; k++ ) {
204+
205+
// positions
206+
207+
x_p = x_[k];
208+
y_p = y_[k];
209+
z_p = z_[k];
210+
position_p.push( x_p, y_p, z_p );
211+
212+
r_p = r[k];
213+
g_p = g[k];
214+
b_p = b[k];
215+
color.setRGB( r_p, g_p, b_p );
216+
color_p.push( color.r, color.g, color.b );
217+
}
218+
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( position_p, 3 ) );
219+
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( color_p, 3 ) );
220+
geometry.center();
221+
var material = new THREE.PointsMaterial({
222+
size: 0.01,
223+
vertexColors: true
224+
});
225+
group = new THREE.Points(geometry, material);
226+
group.rotation.x = - Math.PI*1;
227+
scene.add( group );
228+
group.scale.set(10, 10, 10); // appropriate proportion on the scene
229+
} );
230+
231+
const geometry_sphere = new THREE.SphereGeometry( 1 );
232+
sphereInter = new THREE.Mesh( geometry_sphere, material_red );
233+
sphereInter.visible = false;
234+
scene.add( sphereInter );
235+
}
236+
237+
function DrawLine(points_line){
238+
geometry__ = new THREE.BufferGeometry().setFromPoints( points_line );
239+
material__ = new THREE.MeshBasicMaterial( { color: glance * 0xffa100 } );
240+
line__ = new THREE.Line( geometry__, material__ );
241+
scene.add( line__ );
242+
}
243+
244+
function RightClick(){
245+
glance = glance + 11;
246+
moved = true;
247+
}
248+
249+
function LeftClick (event) {
250+
if ( moved === false ) {
251+
checkIntersection( event.clientX, event.clientY, geometry) ;
252+
if ( intersection.intersects ) {
253+
shoot(intersection.point);
254+
}
255+
}
256+
}
257+
258+
function shoot(point) {
259+
260+
position.copy( intersection.point );
261+
262+
points_line.push(point.clone()); //.x, position.y, position.z );
263+
264+
if ( moved === false ) {
265+
266+
sphereInter.visible = true;
267+
sphereInter.position.copy( position );
268+
DrawLine(points_line);
269+
//line__.position.copy(position);
270+
271+
} else {
272+
273+
sphereInter.visible = false;
274+
}
275+
renderer.render( scene, camera );
276+
}
277+
278+
function checkIntersection( x, y, geometry ) {
279+
280+
if ( group === undefined ) {
281+
return;
282+
}
283+
284+
mouse.x = ( x / window.innerWidth ) * 2 - 1;
285+
mouse.y = - ( y / window.innerHeight ) * 2 + 1;
286+
raycaster.setFromCamera( mouse.clone(), camera );
287+
raycaster.intersectObject( group, true, intersects ); // Checks all intersection between the ray and the object with or without the descendants. Intersections are returned sorted by distance, closest first.
288+
289+
if ( (intersects.length > 0) && toggle > 0.02 ) {
290+
291+
toggle=0;
292+
p = intersects[ 0 ].point; // the point of intersection
293+
mouseHelper.position.copy( p ); // mousehelper should be at point
294+
intersection.point.copy( p );
295+
296+
// const positions = line.geometry.attributes.position;
297+
// positions.setXYZ( 0, p.x, p.y, p.z );
298+
//
299+
// line.position.copy(position);
300+
// positions.needsUpdate = true;
301+
// geometry.attributes.position.set(intersection.point);
302+
303+
console.log("{x:", intersection.point.x,", y:", intersection.point.y, ",z:", intersection.point.z, "}");
304+
intersection.intersects = true;
305+
intersects.length = 0;
306+
307+
308+
309+
} else {
310+
311+
//intersection.intersects = false;
312+
// intersection = {
313+
// //intersects: false,
314+
// point: new THREE.Vector3(),
315+
// normal: new THREE.Vector3()
316+
// };
317+
intersects.length = 0;
318+
toggle += clock.getDelta();
319+
p=0;
320+
321+
}
322+
323+
}
324+
function onPointerMove( event ) {
325+
326+
if ( event.isPrimary ) {
327+
checkIntersection( event.clientX, event.clientY, geometry ) ; //, geometry_ );
328+
}
329+
}
330+
</script>
331+
</body>
332+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.