ThreeJS - 2D 像素到 3D 坐標轉換

Question

我正在嘗試將在 ThreeJS 中創建的cube渲染到特定位置的 HTML canvas上。

我有像素的位置。 像 (100,200)。 我不知道如何將這些像​​素轉換為 ThreeJS 坐標。

// My canvas is 640 X 480
var CANVAS_WIDTH = 640;
var CANVAS_HEIGHT = 480;

// Create and cube to scene
var geometry = new THREE.CubeGeometry(1, 1, 1);
var materials = createMaterials();
this.cube = new THREE.Mesh( geometry, materials );
this.cube.doubleSided = true;
this.scene.add(this.cube);

// Create and add camera
this.camera = new THREE.PerspectiveCamera(45, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 5000);
this.camera.position.z = CANVAS_WIDTH / 2;
this.scene.add(this.camera);

我注意到 ThreeJS 中的 (0,0) 實際上是在屏幕的中央。

如何將畫布中的任何 2D 坐標轉換為可與 ThreeJS 一起使用的 3D 坐標。 任何幫助表示贊賞。

Answer 1

只需選擇使用THREE.Raycaster() ：

 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 0, 10); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var box = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshBasicMaterial({ color: "red", wireframe: true })); scene.add(box); var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); document.addEventListener("mousedown", onMouseDown); function onMouseDown(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); var dist = box.position.clone().sub(camera.position).length(); raycaster.ray.at(dist, box.position); } renderer.setAnimationLoop(() => { renderer.render(scene, camera); }); 

 body { overflow: hidden; margin: 0; } 

 <script src="https://threejs.org/build/three.min.js"></script> 

同樣，您可以使用raycaster和THREE.Plane()類似的操作，找到raycaster的射線與平面的交點。

Answer 2

首先，三個 js 場景渲染一個 3Diamensonal，這意味着設置對象的位置應該具有場景中的所有 3D 坐標 ie.(X,Y,Z) 如果要更改對象的位置，請使用Object.position.set( x , y , z ); 其中z位置用於將物體位置放在遠離相機的位置 祝你好運 將 z 值設為 0，這樣您就可以將對象放在所需的坐標 (x,y,0) 上