Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history 
Having split into functions from the being inside function init()
  • Loading branch information
@Zvyozdo4ka
Zvyozdo4ka authored Oct 6, 2021
1 parent 1429b05 commit 76ac672
Showing 1 changed file with 315 additions and 0 deletions.
315 changes: 315 additions & 0 deletions task11-point_line_on_cloud_update.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,315 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Find coordinates</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
import { DecalGeometry } from './three.js-dev/examples/jsm/geometries/DecalGeometry.js';

const container = document.getElementById( 'container' );

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;

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

const params = {
minScale: 10,
maxScale: 20,
rotate: true,
clear: function () {

removeDecals();

}
};

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 );

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.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 );

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

loadModel();

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

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


////////////////////////////////////////////////////////////////////////////////////////////////////////////////
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 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.computeBoundingSphere(); // ???

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 );
const material_sphere = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

sphereInter = new THREE.Mesh( geometry_sphere, material_sphere );
sphereInter.visible = false;
scene.add( sphereInter );
} );
}
//// end of function loadModel()

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; //_p;

console.log("line", line);

positions.setXYZ( 0, p.x, p.y, p.z );

positions.needsUpdate = true;

console.log("+GEOMETRY_", geometry_);

console.log(intersection);

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 shoot() {

position.copy( intersection.point );

if ( moved === false ) {

sphereInter.visible = true;
sphereInter.position.copy( position );
line.position.copy(position);

} else {

sphereInter.visible = false;
}

renderer.render( scene, camera );
}

function onPointerMove( event ) {

if ( event.isPrimary ) {
checkIntersection( event.clientX, event.clientY ) ; //, geometry_ );
}
}

function PointUp ( event ) {

if ( moved === false ) {
checkIntersection( event.clientX, event.clientY) ; //, geometry_ );
if ( intersection.intersects ) shoot();
}
}

function PointDown () {
moved = false;
}

</script>

</body>
</html>

0 comments on commit 76ac672

Please sign in to comment.