выдавливать форму из одной точки в другую (три. js) - PullRequest
Новая
       154

выдавливать форму из одной точки в другую (три. js)

0 голосов
/ 07 августа 2020

Я новичок в программировании, и у меня возникла проблема.

Спустя какое-то время я создал форму круга , которую я хочу выдавить . Я могу определить его длину, но мне это не нужно. У фигуры должно быть начало и конечная точка . Я хочу иметь возможность установить две точки vector3 (p0 = startPoint, p1 = endPoint), а затем моя shape должна выдавить на эти 2 точки ! Я работаю с тремя. js !!

Я приложу несколько снимков экрана своего кода, а также снимок экрана того, что у меня есть до сих пор.

Я ценю любую помощь, которую могу получить :) С уважением, Филипп

Код ниже: 

function init() {
                
                //renderer
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                //scene
                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0x222222 );

                //camera
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.set( 0, 0, 500 );

                //controls
                controls = new TrackballControls( camera, renderer.domElement );
                controls.minDistance = 200;
                controls.maxDistance = 500;

                scene.add( new THREE.AmbientLight( 0x222222 ) );
                
                //light
                var light = new THREE.PointLight( 0xffffff );
                light.position.copy( camera.position );
                scene.add( light );
                
                //points in 3d space
                //new THREE.Vector3( 0, 0, 0 ),
                //new THREE.Vector3( 200, 0, 0 ),
                
                //circle shape
                var circleRadius = 40;
                var circleShape = new THREE.Shape()
                .moveTo( 0, circleRadius )
                .quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 )
                .quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius )
                .quadraticCurveTo( - circleRadius, - circleRadius, - circleRadius, 0 )
                .quadraticCurveTo( - circleRadius, circleRadius, 0, circleRadius );
                
                //settings for extrude
                var extrudeSettings = {
                    steps: 100,
                    bevelEnabled: false,
                };
                
                //extrude shape
                var geometry = new THREE.ExtrudeBufferGeometry( circleShape, extrudeSettings );
                //make mesh
                var material = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: true } );
                var mesh = new THREE.Mesh( geometry, material );
                //add mesh
                scene.add( mesh );
            }

как это выглядит:

https://i.stack.imgur.com/qqpVc.png

пожалуйста, ответьте <3 </p>

...