Valk sail generation
by PhilQ
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
JavaScript
var start = [
[76.145,0],
[41.222,43.13],
[8.016,132.062],
[0,194.275],
[0,136,0],
];
var stop = [
[98.092,101.336],
[98.092,(101.336+24.666)],
[98.092,(101.336+73.999)],
[98.092,(101.336+98.664)],
[238,0,0],
];
var stepsX = 11;
var stepsY = 15;
var points = new Float32Array( 3 * (stepsX + 1) * (stepsY + 1) );
var colors = new Float32Array( 3 * (stepsX + 1) * (stepsY + 1) );
var container, stats;
var scenes = [], camera, renderer;
var activePoint = null,
activeRow = stepsY,
pointsGroup = new THREE.Group(),
sphereGeometry = new THREE.SphereBufferGeometry( 3, 32, 32 ),
raycaster = new THREE.Raycaster(), mouse = new THREE.Vector2();
var windowWidth, windowHeight;
var margin = 10;
var views = [
{
left: 0,
bottom: 0,
width: 0.5,
height: 1.0,
background: new THREE.Color( 0, 0, 0 ),
eye: [ 0, 0, 1 ],
up: [ 0, 1, 0 ],
},
{
left: 0.5,
bottom: 0,
width: 0.5,
height: 1.0,
background: new THREE.Color( 0, 0, 0 ),
eye: [ 0, 1, 0 ],
up: [ 0, 1, 0 ],
},
];
$(document).ready(function() {
container = document.createElement( 'div' );
document.body.appendChild( container );
for ( var ii = 0; ii < views.length; ++ ii ) {
var view = views[ ii ];
var camera = new THREE.OrthographicCamera(
0, (window.innerWidth * view.width),
(window.innerHeight * view.height) / 2, (window.innerHeight * view.height) / - 2,
(window.innerHeight * view.height) / - 2, (window.innerHeight * view.height) / 2
);
camera.position.fromArray( view.eye );
camera.lookAt(new THREE.Vector3(0,0,0));
view.camera = camera;
scenes[ ii ] = new THREE.Scene();
scenes[ ii ].background = view.background;
scenes[ ii ].add( camera );
scenes[ ii ].add( new THREE.AmbientLight( 0x444444 ) );
scenes[ ii ].add(new THREE.AxesHelper(100));
}
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth,...