Нарисуйте изображение на холсте, используя ThreeJS - PullRequest
Новая
       23

Нарисуйте изображение на холсте, используя ThreeJS

0 голосов
/ 01 ноября 2019

Привет! Я пытаюсь нарисовать изображение на холсте, используя ThreeJS

Код: 

<html lang="en">
    <head>
        <title>three.js webgl - materials - canvas texture</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="main.css">
        <style>
            #drawing-canvas {
                position: absolute;
                background-color: #000000;
                top: 0px;
                right: 0px;
                z-index: 3000;
                cursor: crosshair;
            }
        </style>
    </head>
    <body>

        <img id="endPoint" width="15" height="15" src="endpoint.png" alt="The End Point">
        <div id="info">
            <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - canvas as a texture
            <div>click and draw in the white box</div>
        </div>
        <canvas id="drawing-canvas" height="100" width="100"></canvas>

        <script type="module">

            import * as THREE from '../build/three.module.js';

            var camera, scene, renderer, mesh, material;
            var drawStartPos = new THREE.Vector2();


            init();
            setupCanvasDrawing();
            animate();

            function init() {

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 500;

                scene = new THREE.Scene();


                material = new THREE.MeshBasicMaterial();


                mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 200, 200, 200 ), material );
                scene.add( mesh );

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                window.addEventListener( 'resize', onWindowResize, false );

            }

            // Sets up the drawing canvas and adds it as the material map

            function setupCanvasDrawing() {

                var selectedPoints = 0;

                // get canvas and context

                var drawingCanvas = document.getElementById( 'drawing-canvas' );
                var img = document.getElementById('endPoint');
                var drawingContext = drawingCanvas.getContext( '2d' );

                var imgmap = new THREE.TextureLoader().load( "endpoint.png" );
                var imgmaterial = new THREE.SpriteMaterial( { map: imgmap, color: 0x0000ff } );

                // draw white background

                drawingContext.fillStyle = '#FFFFFF';
                drawingContext.fillRect( 0, 0, 128, 128 );

                // set canvas as material.map (this could be done to any map, bump, displacement etc.)

                material.map = new THREE.CanvasTexture( drawingCanvas );

                // set the variable to keep track of when to draw

                var paint = false;

                // add canvas event listeners
                drawingCanvas.addEventListener( 'mousedown', function ( e ) {

                    selectedPoints++;
                    if ( selectedPoints == 1 ) {
                        drawStartPos.set( e.offsetX, e.offsetY );
                        //drawingContext.drawImage(img, 5, 5);

                        var imgsprite = new THREE.Sprite( imgmaterial );
                        scene.add( imgsprite );
                        //imgsprite.scale.set(5,5,1);
                        imgmap.needsUpdate = true;
                    }

                    if ( selectedPoints == 2 ) {
                        //drawingContext.drawImage(img, 5, 5);

                        selectedPoints = 0;
                        draw(drawingContext, e.offsetX, e.offsetY);
                        //drawingContext.drawImage(img, 5, 5);
                        var imgsprite = new THREE.Sprite( imgmaterial );
                        scene.add( imgsprite );
                        //imgsprite.scale.set(5,5,1);
                        imgmap.needsUpdate = true;
                    } 

                    //console.log("Paint in mousedown : " + paint)


                } );

            }

            function draw( drawContext, x, y ) {

                drawContext.beginPath();
                drawContext.moveTo( drawStartPos.x, drawStartPos.y );
                drawContext.strokeStyle = '#0000FF';
                drawContext.lineTo( x, y );
                drawContext.closePath();
                drawContext.fill();
                drawContext.stroke();
                // reset drawing start position to current position.
                drawStartPos.set( x, y );
                // need to flag the map as needing updating.
                material.map.needsUpdate = true;

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );

                mesh.rotation.x += 0.01;
                mesh.rotation.y += 0.01;

                renderer.render( scene, camera );

            }

        </script>

    </body>
</html>

Это изменение из существующего примера рисования на холсте в ThreeJS, как показано здесь

Проблема в том, что я смог нарисовать линии между двумя точками, выбранными щелчком мыши, но не могу увидеть изображение. Я не знаю, правильно ли я поступаю, добавив изображение на сцену. Пожалуйста, сообщите.

...