Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zvyozdo4ka
Zvyozdo4ka authored Oct 18, 2021
1 parent 8461e02 commit 6d70241
Showing 1 changed file with 342 additions and 0 deletions.
342 changes: 342 additions & 0 deletions task11-several_objects_from_lines_on_cloud.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,342 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Right and Left Events</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - decal splatter<br/>
click to shoot
</div>
<script type="module">
import * as THREE from './three.js-dev/build/three.module.js';
import { OrbitControls } from './three.js-dev/examples/jsm/controls/OrbitControls.js';
import { PLYLoader } from "./three.js-dev/examples/jsm/loaders/PLYLoader.js"; // class PLYLoader

let flag_line=0;
let points_line = [];
let glance = 11;
let object_exist = false;
let left_last_signal = false;

const material_red = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

let renderer, scene, camera;
let group;
let raycaster;
let line;
let toggle = 0;
let clock;
let p = new THREE.Vector3();
let n;
let mouseHelper;

let moved = false;

let sphereInter;

let intersection = {
intersects: false,
point: new THREE.Vector3(),
normal: new THREE.Vector3()
};

const decalMaterial = new THREE.MeshPhongMaterial( {
specular: 0x444444,
//map: decalDiffuse,
//normalMap: decalNormal,
normalScale: new THREE.Vector2( 1, 1 ),
shininess: 30,
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: - 4,
wireframe: false
} );

let mesh;

const mouse = new THREE.Vector2();
const intersects = [];

const position = new THREE.Vector3();

const orientation = new THREE.Euler();
const size = new THREE.Vector3( 10, 10, 10 );
window.addEventListener( 'load', init );

let geometry = new THREE.BufferGeometry();

let geometry__ = new THREE.BufferGeometry().setFromPoints( points_line );
let material__ = new THREE.MeshBasicMaterial( { color: glance * 0xffa100 } );
let line__ = new THREE.Line( geometry__, material__ );

function init() {
clock = new THREE.Clock();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
//scene.background = new THREE.Color( 0xbfe3dd );
camera = new THREE.PerspectiveCamera( 10, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 500;
const controls = new OrbitControls( camera, renderer.domElement );
controls.target = new THREE.Vector3(0, 0, 0);
controls.minDistance = 50;
controls.maxDistance = 1000;
scene.add( new THREE.AmbientLight( 0x443333 ) );

//let geometry = new THREE.BufferGeometry();
geometry.setFromPoints( [ new THREE.Vector3(), new THREE.Vector3() ] );

//geometry_.setAttribute( 'array', new THREE.Float32BufferAttribute( position, 3 ) );

//console.log ("00000 geometry_", geometry_);

line = new THREE.Line( geometry, new THREE.LineBasicMaterial() );
scene.add( line );

console.log("line normal111", line.position.normal);

//////////////////////////////////////////////////////////////////////////////////////

loadModel();

window.addEventListener( 'pointermove', onPointerMove );
//window.addEventListener( 'pointerup', PointUp ) ;
//window.addEventListener( 'pointerdown', PointDown) ;
//window.addEventListener( 'rightclick', RightClick) ;

window.addEventListener('mousedown', function (event) {
switch (event.button) {
case 0:
//alert('Left Mouse button pressed.');
LeftClick(event);
break;
case 1:
alert('Middle Mouse button pressed.');
break;
case 2:
//alert('Right Mouse button pressed.');
RightClick();

break;
default:
alert('You have a strange Mouse!');
}
// e.button === 0: the left button is clicked
// e.button === 1: the middle button is clicked
// e.button === 2: the right button is clicked
// e.button === 3: the `Browser Back` button is clicked
});


////////////////////////////////////////////////////////////////////////////////////////////////////////////////
raycaster = new THREE.Raycaster();
// raycaster.params.Points.threshold = threshold;
// console.log("raycaster.params.Points.threshold",raycaster.params.Points.threshold);

mouseHelper = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
mouseHelper.visible = true;
//mouseHelper.visible = false;
scene.add( mouseHelper );

window.addEventListener( 'resize', onWindowResize );

// let moved = false;

controls.addEventListener( 'change', function () {

moved = true;

} );

animate();
}

function PointDown () {
moved = false;
}

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function loadModel() {
var particles;
var loader = new PLYLoader();
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

// geometry consists of color, normal, position, Prototype
particles = geometry.attributes.color.count; // 298892 points
var positions = geometry.attributes.position.array; // x, y, z is going in sequence in array positions
var colors = geometry.attributes.color.array; // r, g, b is going in sequence in array colors

var x_=[], y_=[], z_=[], r=[], g=[], b=[];
var j=0;

for (var i=0; i<positions.length; i=i+3){
x_[j]=positions[i];
y_[j]=positions[i+1];
z_[j]=positions[i+2];

r[j]=colors[i];
g[j]=colors[i+1];
b[j]=colors[i+2];

j=j+1;
}

const position_p = [];
const color_p = [];
const color = new THREE.Color();
var x_p, y_p, z_p, r_p, g_p, b_p;

for ( var k = 0; k < particles; k++ ) {

// positions

x_p = x_[k];
y_p = y_[k];
z_p = z_[k];
position_p.push( x_p, y_p, z_p );

r_p = r[k];
g_p = g[k];
b_p = b[k];
color.setRGB( r_p, g_p, b_p );
color_p.push( color.r, color.g, color.b );
}
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( position_p, 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( color_p, 3 ) );
geometry.center();
var material = new THREE.PointsMaterial({
size: 0.01,
vertexColors: true
});
group = new THREE.Points(geometry, material);
group.rotation.x = - Math.PI*1;
scene.add( group );
group.scale.set(10, 10, 10); // appropriate proportion on the scene
} );

const geometry_sphere = new THREE.SphereGeometry( 1 );
sphereInter = new THREE.Mesh( geometry_sphere, material_red );
sphereInter.visible = false;
scene.add( sphereInter );
}

function DrawLine(points_line){
geometry__ = new THREE.BufferGeometry().setFromPoints( points_line );
material__ = new THREE.MeshBasicMaterial( { color: glance * 0xf6a106 } );
line__ = new THREE.Line( geometry__, material__ );
scene.add( line__ );

left_last_signal = true;
}

function RightClick(){

if ( (object_exist === true) & (left_last_signal === true) ) {
glance = glance + 11;
console.log("glance", glance);
}
left_last_signal = false;
points_line = [];
//moved = true; //false;
}

function LeftClick (event) {
if ( moved === false ) {
object_exist = true;
checkIntersection( event.clientX, event.clientY, geometry) ;
if ( intersection.intersects ) {
shoot(intersection.point);
}
}
}

function shoot(point) {

position.copy( intersection.point );
points_line.push(point.clone());

if ( moved === false ) {

sphereInter.visible = true;
sphereInter.position.copy( position );
DrawLine(points_line);

} else {
console.log("!!!!!!!!!!!!!!!!!!");
sphereInter.visible = false;
}
//sphereInter.visible = false;
renderer.render( scene, camera );
}

function checkIntersection( x, y, geometry ) {

if ( group === undefined ) {
return;
}

mouse.x = ( x / window.innerWidth ) * 2 - 1;
mouse.y = - ( y / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse.clone(), camera );
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.

if ( (intersects.length > 0) && toggle > 0.02 ) {

toggle=0;
p = intersects[ 0 ].point; // the point of intersection
mouseHelper.position.copy( p ); // mousehelper should be at point
intersection.point.copy( p );

// const positions = line.geometry.attributes.position;
// positions.setXYZ( 0, p.x, p.y, p.z );
//
// line.position.copy(position);
// positions.needsUpdate = true;
// geometry.attributes.position.set(intersection.point);

//console.log("{x:", intersection.point.x,", y:", intersection.point.y, ",z:", intersection.point.z, "}");
intersection.intersects = true;
intersects.length = 0;



} else {

//intersection.intersects = false;
// intersection = {
// //intersects: false,
// point: new THREE.Vector3(),
// normal: new THREE.Vector3()
// };
intersects.length = 0;
toggle += clock.getDelta();
p=0;

}

}
function onPointerMove( event ) {

if ( event.isPrimary ) {
checkIntersection( event.clientX, event.clientY, geometry ) ; //, geometry_ );
}
}
</script>
</body>
</html>

0 comments on commit 6d70241

Please sign in to comment.