0
シリンダーを特定のベクトルに合わせようとするのは苦労しています。私は見て、可能な解決策の数を試したが、役に立たない。私が理解しなければならないことは、円柱をベクトルの中心に置き、LookAt（）を使ってそれを整列させることです。以下では、この行の簡単な例を付け加えました。次に、行を追加してから、この行にシリンダを揃えようとしています。誰かが私が間違っていることを教えてくれますか？ TIAシリンダーのベクトルへの整列
ロイ
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
}
a {
color: skyblue;
}
.button {
background: #999;
color: #eee;
padding: 0.2em 0.5em;
cursor: pointer;
}
.highlight {
background: orange;
color: #fff;
}
span {
display: inline-block;
width: 60px;
float: left;
text-align: center;
}
.left-panel{
position: absolute;
top:0px;
left: 0px;
height:100%;
width:220px;
background-color:white;
}
.right-panel{
position: absolute;
top:0px;
right: 0px;
height:100%;
width:220px;
background-color:white;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
if (! Detector.webgl) Detector.addGetWebGLMessage();
var camera, scene, raycaster, renderer, model, cylinder;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var reader;
init();
function init() {
scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0x999999));
addLine();
addCylinder();
camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 1, 500);
// Z is up for objects intended to be 3D printed.
camera.up.set(0, 0, 1);
camera.position.set(8, -72, 20);
camera.rotateOnAxis('X', 25);
camera.rotateOnAxis('Z', 0.0025);
camera.add(new THREE.PointLight(0xffffff, 0.8));
scene.add(camera);
var grid = new THREE.GridHelper(200, 100, 0x229922, 0x222222);//grid
grid.rotateOnAxis(new THREE.Vector3(1, 0, 0), 90 * (Math.PI/180));
grid.receiveShadow = true;
scene.add(grid);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0x333399);// scene background color
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
raycaster = new THREE.Raycaster();
raycaster.linePrecision = .05;
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
controls.target.set(0, 1.2, 2);
controls.update();
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
render();
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function render() {
raycaster.setFromCamera(mouse, camera);
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects(scene.children);
renderer.render(scene, camera);
}
function addCylinder() {
//Mesh to align
var material = new THREE.MeshLambertMaterial({ color: 0x666666 });
cylinder = new THREE.Mesh(new THREE.CylinderGeometry(.2, .2, 7.5,8), material);
var vector = new THREE.Vector3(10, 0, 10);
cylinder.position.set(5, 0, 5);
//create a point to lookAt
var focalPoint = new THREE.Vector3(
cylinder.position.x + vector.x,
cylinder.position.y + vector.y,
cylinder.position.z + vector.z
);
//all that remains is setting the up vector (if needed) and use lookAt
//cylinder.up = new THREE.Vector3(0, 0, 1);//Z axis up
cylinder.lookAt(focalPoint);
scene.add(cylinder);
}
function addLine() {
var material = material = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 1, fog: false });
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(0,0,0),
new THREE.Vector3(10,0,10)
);
var line = new THREE.Line(geometry, material);
line.castShadow = true;
scene.add(line);
}
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = (event.clientX/window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY/window.innerHeight) * 2 + 1;
render();
}
</script>
</body>
</html>
WOW、それはあまりにも簡単でした。私はそれを理解しようと無駄にした時間を教えてくれません。本当にありがとう！ – Roy
@Royようこそstackoverflowへ。チェックマークをクリックして回答を受け入れます。 – WestLangley