Я новичок с тремя JS, и я разрабатываю проект для клиента. Простая линия проводится между двумя точками A и B, и там необходимо рассчитать расстояние. Кроме того, мне нужно вычислить угол линии, проведенной от оси x, и показать длину и угол линии в html. Я также хочу сбросить точки, когда рисуется одна линия, в настоящее время это dr aws линия от точки, где заканчивается первая линия, поэтому я хочу рисовать несвязанные линии. Более того, если кто-нибудь может помочь мне восстановить нарисованную линию, это тоже будет здорово. Я поделюсь кодом, который я использую ниже: `
// three.js animataed line using BufferGeometry
var renderer, renderer1,renderer2,renderer3, controls, scene, camera, camera1,camera2, camera3;
var line;
var count = 0;
var mouse = new THREE.Vector3();
var positions;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer({ antialias: false,alpha:true });
renderer.setSize(window.innerWidth/2.5, window.innerHeight/2.5);
renderer.domElement.setAttribute("id","canvas1");
document.body.appendChild(renderer.domElement);
// renderer
renderer1 = new THREE.WebGLRenderer({ antialias: false,alpha:true });
renderer1.setSize(window.innerWidth/2.5, window.innerHeight/2.5);
document.body.appendChild(renderer1.domElement);
renderer1.domElement.setAttribute("id","canvas2");
// renderer
renderer2 = new THREE.WebGLRenderer({ antialias: false,alpha:true });
renderer2.setSize(window.innerWidth/2.5, window.innerHeight/2.5);
document.body.appendChild(renderer2.domElement);
renderer2.domElement.setAttribute("id","canvas3");
// renderer
renderer3 = new THREE.WebGLRenderer({ antialias: false,alpha:true });
renderer3.setSize(window.innerWidth/2.5, window.innerHeight/2.5);
document.body.appendChild(renderer3.domElement);
renderer3.domElement.setAttribute("id","canvas4");
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
// add the camera to the scene
// the camera defaults to position (0,0,0)
// so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
camera.position.set(0, 0, 100);
camera.up.set(0,0,1);
camera.lookAt(scene.position);
scene.add(camera);
// camera1
camera1 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
// add the camera to the scene
// the camera defaults to position (0,0,0)
// so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
camera1.position.set(0, -100, 0);
camera1.up.set(0,0,1);
camera1.lookAt(scene.position);
scene.add(camera1);
// camera2
camera2 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
// add the camera to the scene
// the camera defaults to position (0,0,0)
// so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
camera2.position.set(-100, 0, 0);
camera2.up.set(0,0,1);
camera2.lookAt(scene.position);
scene.add(camera2);
// camera1
camera3 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
// add the camera to the scene
// the camera defaults to position (0,0,0)
// so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
camera3.position.set(100, 0, 0);
camera3.up.set(0,0,1);
camera3.lookAt(scene.position);
scene.add(camera3);
controls = new THREE.OrbitControls( camera, renderer.domElement );
//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 100;
controls.maxDistance = 500;
controls.maxPolarAngle = Math.PI / 2;
// geometry
var geometry = new THREE.BufferGeometry();
var MAX_POINTS = 500;
positions = new Float32Array(MAX_POINTS * 3);
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
// material
var material = new THREE.LineBasicMaterial({
color: 0xff0000,
linewidth: 2
});
// line
line = new THREE.Line(geometry, material);
scene.add(line);
// create a set of coordinate axes to help orient user
// specify length in pixels in each direction
var axes = new THREE.AxesHelper(500);
scene.add( axes );
///////////
// LIGHT //
///////////
// create a light
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
var ambientLight = new THREE.AmbientLight(0x111111);
// scene.add(ambientLight);
// Create an array of materials to be used in a cube, one for each side
var cubeMaterialArray = [];
// order to add materials: x+,x-,y+,y-,z+,z-
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff3333 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff8800 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xffff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x33ff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x3333ff } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x8833ff } ) );
var cubeMaterials = new THREE.MeshFaceMaterial( cubeMaterialArray );
// Cube parameters: width (x), height (y), depth (z),
// (optional) segments along x, segments along y, segments along z
var cubeGeometry = new THREE.CubeGeometry( 10, 10, 10, 1, 1, 1 );
// using THREE.MeshFaceMaterial() in the constructor below
// causes the mesh to use the materials stored in the geometry
var cube = new THREE.Mesh( cubeGeometry, cubeMaterials );
cube.position.set(0, 0, 0);
scene.add( cube );
document.addEventListener("mousemove", onMouseMove, false);
document.addEventListener('mousedown', onMouseDown, false);
}
// update line
function updateLine() {
positions[count * 3 - 3] = mouse.x;
positions[count * 3 - 2] = mouse.y;
positions[count * 3 - 1] = mouse.z;
line.geometry.attributes.position.needsUpdate = true;
}
// mouse move handler
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse.z = 0;
mouse.unproject(camera3);
//mouse.unproject(camera1);
//mouse.unproject(camera2);
//mouse.unproject(camera3);
if( count%3 !== 0 ){
updateLine();
}
}
// add point
function addPoint(event){
console.log("point nr " + count + ": " + mouse.x + " " + mouse.y + " " + mouse.z);
positions[count * 3 + 0] = mouse.x;
positions[count * 3 + 1] = mouse.y;
positions[count * 3 + 2] = mouse.z;
count++;
console.log('count = ' + count);
line.geometry.setDrawRange(0, count);
updateLine();
var distance1 = line.computeLineDistances();
console.log('LINE DISTANCE==');
console.log(distance1);
}
// mouse down handler
function onMouseDown(evt) {
// on first click add an extra point
if( count === 0 ){
addPoint();
}
addPoint();
}
// render
function render() {
renderer.render(scene, camera);
renderer1.render(scene, camera1);
renderer2.render(scene, camera2);
renderer3.render(scene, camera3);
//console.log('x = '+ camera.position.x);
//console.log('y = '+ camera.position.y);
//console.log('z = '+ camera.position.z);
}
// animate
function animate() {
requestAnimationFrame(animate);
controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
render();
}
`
также доступен на живом сайте http://kaizenpak.com/interactive/index2.html