0
185
Viewsarrastre el grupo de objetos en el plano XY solo en tres.js
El objetivo es arrastrar los objetos en la escena usando el mouse. acercar y alejar funcionan correctamente. mientras se arrastra, el objeto gira, pero no se arrastra. ¿Cuál es el problema aquí?
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000); const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("#grid") }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(400, 400); scene.background = new THREE.Color(0xffffff); var controls = new THREE.OrbitControls(camera, renderer.domElement); for (let i = 0; i < 3; i++) { const geometry = new THREE.PlaneGeometry(9, 10); const material = new THREE.MeshBasicMaterial({ color: 0x9c8af5, side: THREE.DoubleSide }); const cube = new THREE.Mesh(geometry, material); cube.position.x = -i * 10.1; scene.add(cube); } camera.position.set(0, 0, 100); renderer.render(scene, camera); render(); function render() { requestAnimationFrame(render); renderer.render(scene, camera); } <script src="https://threejs.org/build/three.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <canvas id="grid" style="border: 1px solid black;"> </canvas>
·
Juan Pablo Isaza
2 answers
Answer question0
Deberías echar un vistazo a:
https://tresjs.org/docs/#examples/en/controls/DragControls
const controls = new DragControls( objects, camera, renderer.domElement );los
objectsdeben ser una matriz que contenga su (s) plano (s) (¿por qué lo llamó cubo si es un PlaneGeometry?).
Podrías intentar algo como:
let objects = []; let controls = new THREE.DragControls(objects, camera, renderer.domElement); for (let i = 0; i < 3; i++) { const geometry = new THREE.PlaneGeometry(9, 10); const material = new THREE.MeshBasicMaterial({ color: 0x9c8af5, side: THREE.DoubleSide }); const cube = new THREE.Mesh(geometry, material); cube.position.x = -i * 10.1; objects.push(cube); scene.add(cube); }Pero con su código real, esto generará 3 planos con 10.1 espacios entre cada uno.
·
Juan Pablo Isaza
Report
0
aquí hay una solución. lo que han hecho es que:
- creó un plano transparente con el ancho y la altura de la ventana.
- agregó todos los cubos creados al plano
- usando los controles DragControls , el arrastre está habilitado para el avión.
- ahora, si arrastramos el plano, todos los cubos se arrastrarán en la misma unidad.
nota: si solo desea arrastrar los cubos individuales, simplemente cambie los objects a cube en let controls = new THREE.DragControls(objects, camera, renderer.domElement); . también necesitamos colocar este código DragControls dentro del bucle después de crear el cubo.
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000); const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("#grid") }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(400, 400); scene.background = new THREE.Color(0xffffff); var objects = []; var scenePlane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight); const scenePlaneMaterial = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide} ); scenePlaneMaterial.transparent = false; const plane = new THREE.Mesh( scenePlane, scenePlaneMaterial ); objects.push(plane); let controls = new THREE.DragControls(objects, camera, renderer.domElement); for (let i = 0; i < 3; i++) { const geometry = new THREE.PlaneGeometry(9, 10); const material = new THREE.MeshBasicMaterial({ color: 0x9c8af5, side: THREE.DoubleSide }); const cube = new THREE.Mesh(geometry, material); cube.position.x = -i * 10.1; plane.add(cube); } scene.add(plane); camera.position.set(0, 0, 100); renderer.render(scene, camera); render(); function render() { requestAnimationFrame(render); renderer.render(scene, camera); } <script src="https://threejs.org/build/three.js"></script> <script src="https://threejs.org/examples/js/controls/DragControls.js"></script> <canvas id="grid" style="border: 1px solid black;"> </canvas>
·
Juan Pablo Isaza
Report
Answer question