iT邦幫忙

0

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

  • 分享至 

  • xImage

請問如何根據下圖的data用three.js畫成3D立體
https://ithelp.ithome.com.tw/upload/images/20200518/20105015fHVMQnv78C.jpg

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);

以下是目前結果圖,請問要如何才能讓兩點重合,並讓紅色圓柱符合上圖的向量?
https://ithelp.ithome.com.tw/upload/images/20200518/20105015oyDooeadEw.png
如果加上mesh1.rotation.set(2,151,2);會變成
https://ithelp.ithome.com.tw/upload/images/20200518/20105015Frhrxi9S6B.png

看更多先前的討論...收起先前的討論...
dragonH iT邦超人 5 級 ‧ 2020-05-18 14:51:06 檢舉
這系列是不會改老師給的範例嗎
s061 iT邦新手 5 級 ‧ 2020-05-18 14:54:31 檢舉
您好,我是自學three.js,自己練習沒老師的範例,所以上來詢問,謝謝
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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
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>

我要發表回答

立即登入回答