請問如何用three.js所畫出兩個圓柱且有一端重合？

three.js threejs

s061 2020-05-18 14:43:49 ‧ 880 瀏覽

分享至

請問如何根據下圖的data用three.js畫成3D立體

var material = new THREE.MeshBasicMaterial({ color: 0x3311 }); 
var geometry = new THREE.CylinderGeometry(10, 10,151.02648774304458, 20, 1, false); 
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(1,75.5,1);
scene.add(mesh);
var material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
var geometry1 = new THREE.CylinderGeometry(10, 10,158.8741640418605, 20, 1, false); 
var mesh1 = new THREE.Mesh(geometry1, material1); 
mesh1.position.set(-30,217,32.5);
Scene.add(mesh1);

以下是目前結果圖，請問要如何才能讓兩點重合，並讓紅色圓柱符合上圖的向量？

如果加上mesh1.rotation.set(2,151,2);會變成

看更多先前的討論...收起先前的討論...

dragonH iT邦超人 5 級 ‧ 2020-05-18 14:51:06 檢舉

這系列是不會改老師給的範例嗎

s061 iT邦新手 5 級 ‧ 2020-05-18 14:54:31 檢舉

您好，我是自學three.js，自己練習沒老師的範例，所以上來詢問，謝謝

listennn08 iT邦高手 5 級 ‧ 2020-05-18 15:02:49 檢舉

three.js document 寫說他是以弧角為單位你原本加入的是弧角嗎我怎麼看起來像座標
.rotation : Euler
Object's local rotation (see Euler angles), in radians.

dragonH iT邦超人 5 級 ‧ 2020-05-18 15:11:43 檢舉

好的我誤會了抱歉

你這不是全部的 code 吧

怎麼沒看到你的 scene

pinglam iT邦新手 5 級 ‧ 2020-05-18 15:27:27 檢舉

mesh1.rotation.set(2,151,2); << 把紅色直線變斜線不是就可以把兩條線重合了嗎?

s061 iT邦新手 5 級 ‧ 2020-05-18 15:28:22 檢舉

我試過用rotationx，rotationy，rotationz和 rotation轉，但達不到符合上圖向量，因此想，引此想問問是否有別種方法

是，這不是完整程式碼。這只有畫圓柱部分
相機、場景、render等我並未列出

其實之前我已試過加入.rotation.set
只是B點無法重合，且旋轉換個面看會更奇怪

pinglam iT邦新手 5 級 ‧ 2020-05-18 17:28:15 檢舉

你可能要計算旋轉向量(Rotation Vector, Euclidean Vector),再放進rotation

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

pinglam

iT邦新手 5 級 ‧ 2020-05-18 18:00:55

<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { display: block; }
		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
		<script>
			var isTest = true;
			
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			//CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, 
			//heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
			var geometry = new THREE.CylinderGeometry(10, 10,151.02648774304458, 20, 1, false); 
			var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
			var cylinder = new THREE.Mesh( geometry, material );
			cylinder.position.set(1,75.5,1);
			scene.add( cylinder );
			
			var geometry1 = new THREE.CylinderGeometry(10, 10,158.8741640418605, 20, 1, false); 
			var material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
			var cylinder1 = new THREE.Mesh(geometry1, material1); 
			cylinder1.position.set(-30,217,32.5);
			
			rotation_x = 0.5
			rotation_y = 0
			rotation_z = 0.4
			
			cylinder1.rotation.set(rotation_x,rotation_y,rotation_z)
			scene.add(cylinder1)
			
			if(isTest){
				var geometry = new THREE.BoxGeometry( 10, 10, 1 );
				var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
				var cylinder_mark1 = new THREE.Mesh( geometry, material );
				var cylinder_mark2 = new THREE.Mesh( geometry, material );
				var cylinder_mark3 = new THREE.Mesh( geometry, material );
				cylinder_mark1.position.set(0,0,0);
				cylinder_mark2.position.set(2,151,2);
				cylinder_mark3.position.set(-62,283,63);
				scene.add( cylinder_mark1 );
				scene.add( cylinder_mark2 );
				scene.add( cylinder_mark3 );
			}
			
            camera.position.z = 700;
			
			//camera.lookAt(cylinder)
			var animate = function () {
				requestAnimationFrame( animate );
				
				scene.rotation.x += 0.01;
				//scene.rotation.y += 0.01;
				
				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>