iframe-proxy | Sunbelt Computer Software

279 lines (176 loc) · 7.41 KB
<!DOCTYPE html>
<html lang="en">
    <title>three.js webgl - interactive - raycasting - points</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="src/style/main.css">
<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive - raycasting - points </div>
<script type="module">
    import * as THREE from './src/lib/three.module.js';
    import Stats from './src/lib/stats.module.js';
    let renderer, scene, camera, stats;
    let pointclouds;
    let raycaster;
    let intersection = null;
    let spheresIndex = 0;
    let clock;
    let toggle = 0;
    const pointer = new THREE.Vector2();
    const spheres = [];
    const threshold = 0.1;
    const pointSize = 0.05;
    const width = 80;
    const length = 160;
    const rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
    init();
    animate();
    function generatePointCloudGeometry( color, width, length ) {
        const geometry = new THREE.BufferGeometry();
        const numPoints = width * length;
        const positions = new Float32Array( numPoints * 3 );
        const colors = new Float32Array( numPoints * 3 );
        let k = 0;
        for ( let i = 0; i < width; i ++ ) {
            for ( let j = 0; j < length; j ++ ) {
                const u = i / width;
                const v = j / length;
                const x = u - 0.5;
                const y = ( Math.cos( u * Math.PI * 4 ) + Math.sin( v * Math.PI * 8 ) ) / 20;
                const z = v - 0.5;
                positions[ 3 * k ] = x;
                positions[ 3 * k + 1 ] = y;
                positions[ 3 * k + 2 ] = z;
                const intensity = ( y + 0.1 ) * 5;
                colors[ 3 * k ] = color.r * intensity;
                colors[ 3 * k + 1 ] = color.g * intensity;
                colors[ 3 * k + 2 ] = color.b * intensity;
        geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
        geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
        geometry.computeBoundingBox();
        return geometry;
    function generatePointcloud( color, width, length ) {
        const geometry = generatePointCloudGeometry( color, width, length );
        const material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
        return new THREE.Points( geometry, material );
    function generateIndexedPointcloud( color, width, length ) {
        const geometry = generatePointCloudGeometry( color, width, length );
        const numPoints = width * length;
        const indices = new Uint16Array( numPoints );
        let k = 0;
        for ( let i = 0; i < width; i ++ ) {
            for ( let j = 0; j < length; j ++ ) {
                indices[ k ] = k;
        geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
        const material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
        return new THREE.Points( geometry, material );
    function generateIndexedWithOffsetPointcloud( color, width, length ) {
        const geometry = generatePointCloudGeometry( color, width, length );
        const numPoints = width * length;
        const indices = new Uint16Array( numPoints );
        let k = 0;
        for ( let i = 0; i < width; i ++ ) {
            for ( let j = 0; j < length; j ++ ) {
                indices[ k ] = k;
        geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
        geometry.addGroup( 0, indices.length );
        const material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
        return new THREE.Points( geometry, material );
    function init() {
        const container = document.getElementById( 'container' );
        scene = new THREE.Scene();
        clock = new THREE.Clock();
        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.set( 10, 10, 10 );
        camera.lookAt( scene.position );
        camera.updateMatrix();
        const pcBuffer = generatePointcloud( new THREE.Color( 1, 0, 0 ), width, length );
        pcBuffer.scale.set( 5, 10, 10 );
        pcBuffer.position.set( - 5, 0, 0 );
        scene.add( pcBuffer );
        const pcIndexed = generateIndexedPointcloud( new THREE.Color( 0, 1, 0 ), width, length );
        pcIndexed.scale.set( 5, 10, 10 );
        pcIndexed.position.set( 0, 0, 0 );
        scene.add( pcIndexed );
        const pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0, 1, 1 ), width, length );
        pcIndexedOffset.scale.set( 5, 10, 10 );
        pcIndexedOffset.position.set( 5, 0, 0 );
        scene.add( pcIndexedOffset );
        pointclouds = [ pcBuffer, pcIndexed, pcIndexedOffset ];
        const sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 32 );
        const sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
        for ( let i = 0; i < 40; i ++ ) {
            const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
            scene.add( sphere );
            spheres.push( sphere );
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );
        raycaster = new THREE.Raycaster();
        raycaster.params.Points.threshold = threshold;
        stats = new Stats();
        container.appendChild( stats.dom );
        window.addEventListener( 'resize', onWindowResize );
        document.addEventListener( 'pointermove', onPointerMove );
    function onPointerMove( event ) {
        pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    function animate() {
        requestAnimationFrame( animate );
        render();
        stats.update();
    function render() {
        camera.applyMatrix4( rotateY );
        camera.updateMatrixWorld();
        raycaster.setFromCamera( pointer, camera );
        const intersections = raycaster.intersectObjects( pointclouds );
        intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;
        if ( toggle > 0.02 && intersection !== null ) {
            spheres[ spheresIndex ].position.copy( intersection.point );
            spheres[ spheresIndex ].scale.set( 1, 1, 1 );
            spheresIndex = ( spheresIndex + 1 ) % spheres.length;
            toggle = 0;
        for ( let i = 0; i < spheres.length; i ++ ) {
            const sphere = spheres[ i ];
            sphere.scale.multiplyScalar( 0.98 );
            sphere.scale.clampScalar( 0.01, 1 );
        toggle += clock.getDelta();
        renderer.render( scene, camera );
Sunbelt Computer Software

PL/B Language Development and Support

Navigation Menu

Uh oh!

Sunbelt Computer Software

PL/B Language Development and Support

Uh oh!

FilesExpand file tree

example.html

Latest commit

History

example.html

File metadata and controls
