如何解决如何在具有两个对角线位置矢量的三个js中绘制平面?
我们可以使用以下代码在任意位置添加平面几何:
var geometry = new THREE.PlaneGeometry( 5,20,32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00,side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry,material );
scene.add( plane );
但是,当两个对角线位置已知时,如何添加平面。这可能吗?
到目前为止,我最接近的是获得两个位置的中心,它正确地定位了平面,但是尺寸不正确:
var dir = pointB.clone().subtract(pointA);
var length = dir.length();
dir = dir.normalize().scale(length * 50);
center_position = pointA.clone().add(dir);
方向对于我来说并不重要,可以通过lookat()设置。
解决方法
找到这两个的减矢量,其绝对值是平面大小。 这两个的平均向量是飞机的中心。
示例(r120):
body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60,innerWidth / innerHeight,1,100);
camera.position.set(0,5,10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth,innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera,renderer.domElement);
scene.add(new THREE.GridHelper());
let vec1 = new THREE.Vector3(0,2,0);
let vec2 = new THREE.Vector3(4,0);
let size = new THREE.Vector3().subVectors(vec2,vec1);
let center = new THREE.Vector3().addVectors(vec1,vec2).multiplyScalar(0.5);
let planeWidth = Math.abs(size.x);
let planeHeight = Math.abs(size.y);
let planeGeom = new THREE.PlaneBufferGeometry(planeWidth,planeHeight,planeWidth,planeHeight);
let planeMat = new THREE.MeshBasicMaterial({color: "aqua",wireframe: true});
let plane = new THREE.Mesh(planeGeom,planeMat);
plane.position.copy(center);
scene.add(plane);
renderer.setAnimationLoop(()=>{
renderer.render(scene,camera);
});
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。