0
134
ViewsCurva de elipse giratoria en Three.js
Meta
Estoy tratando de crear una EllipseCurve ( https://threejs.org/docs/#api/en/extras/curves/EllipseCurve ) en la que debería moverse una cámara.
¿Qué hice para lograr el objetivo?
Este es el código para la elipse hasta ahora.
var curve = new THREE.EllipseCurve( 0,0, 1, 1, 0, 2 * Math.PI, false, 1.57 ) const points = curve.getPoints( 50 ); const geometry = new THREE.BufferGeometry().setFromPoints( points ); var material = new THREE.LineBasicMaterial( { color : 0xffffff } ); // Create the final object to add to the scene var curveObject = new THREE.Line( geometry, material ); scene.add(curveObject);Puedo verlo en la escena así:
El problema
Traté de rotar la curva de elipse 90 grados alrededor del eje x en el sentido de las agujas del reloj. Como entendí de la documentación, el último parámetro de la función de definición debería rotarlo.
const curve = new THREE.EllipseCurve( 0, 0, // ax, aY 10, 10, // xRadius, yRadius 0, 2 * Math.PI, // aStartAngle, aEndAngle false, // aClockwise 0 // aRotation );Gracias de antemano por su respuesta. Soy bastante nuevo en Three.js, lo siento si esta pregunta puede ser estúpida: D
2 answers
Answer question0
Obtenga un punto en la curva y aplíquele una matriz4.
Aquí hay un concepto de cómo puede hacerlo (vea las líneas con la cam en el ciclo de animación, mejor ver con "Página completa"):
body{ overflow: hidden; margin: 0; } <script type="module"> import * as THREE from "https://cdn.skypack.dev/three@0.134.0"; import { OrbitControls } from "https://cdn.skypack.dev/three@0.134.0/examples/jsm/controls/OrbitControls.js"; let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000); camera.position.set(-10, 10, 10); let renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.autoClear = false; document.body.appendChild(renderer.domElement); window.addEventListener("resize", () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); }) let controls = new OrbitControls(camera, renderer.domElement); let light = new THREE.DirectionalLight(0xffffff, 1); light.position.setScalar(1); scene.add(light, new THREE.AmbientLight(0xffffff, 0.5)); let grid = new THREE.GridHelper(); grid.position.y = -5; scene.add(grid); let obj = new THREE.Mesh(new THREE.IcosahedronGeometry(1, 0), new THREE.MeshLambertMaterial({ color: "aqua" })); scene.add(obj); let curve = new THREE.EllipseCurve(0, 0, 10, 5); let line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(curve.getSpacedPoints(100)), new THREE.LineBasicMaterial({ color: "yellow" })); line.rotation.x = -Math.PI * 0.25; line.rotation.z = Math.PI * 0.125; line.position.x = 5; scene.add(line); let cam = new THREE.PerspectiveCamera(25, 1, 1.5, 25); let camHelper = new THREE.CameraHelper(cam); scene.add(camHelper); let clock = new THREE.Clock(); let v = new THREE.Vector3(); renderer.setAnimationLoop(() => { let t = (clock.getElapsedTime() * 0.05) % 1; // magic is in these lines ////////////////// cam.position.copy(curve.getPointAt(t, v)); cam.position.applyMatrix4(line.matrixWorld); cam.lookAt(obj.position); ///////////////////////////////////////////// renderer.clear(); renderer.setViewport(0, 0, innerWidth, innerHeight); renderer.render(scene, camera); renderer.setViewport(0, innerHeight - 256, 256, 256); renderer.render(scene, cam); }) </script>0
aRotation, ángulo-rotación, afectará el origen local de otras configuraciones de ángulo para esta curva. No es la rotación general de la elipse, sino la orientación de cualquier desplazamiento en relación con el valor predeterminado. Un punto de partida diferente. Convertiría una boca de Pac-Man en una boca de Pac-Man al revés a +/- 180 grados. Para rotar la curva general en el espacio mundial, utilice uno de los diversos métodos disponibles, como curve.rotation.set(0,1,0) o rotación.y += 1. Consulte la documentación para conocer las variantes específicas de rotación.