#three.js
Вопрос:
Я изо всех сил пытаюсь сделать трубки в THREE.js и по ним очень мало учебных пособий, поэтому я решил спросить здесь. Как я могу создать пробирку, не используя этот сложный фрагмент кода, взятый из официальных документов?
class CustomSinCurve extends THREE.Curve { constructor( scale = 1 ) { super(); this.scale = scale; } getPoint( t, optionalTarget = new THREE.Vector3() ) { const tx = t * 3 - 1.5; const ty = Math.sin( 2 * Math.PI * t ); const tz = 0; return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale ); } } Предпочтительно с использованием кривых Безье или чего-то интуитивно понятного. (Чтобы быть ясным, я использую React-три волокна для создания этих моделей, но я знаю, как преобразовать ваниль THREE.js к нему.)
Ответ №1:
Попробуй вот так:
let mesh; let camera, scene, renderer; init(); animate(); function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10); camera.position.z = 4; scene = new THREE.Scene(); const curve = new THREE.QuadraticBezierCurve3(new THREE.Vector3(-1, -1, 0), new THREE.Vector3(-1, 1, 0), new THREE.Vector3(1, 1, 0)) const geometry = new THREE.TubeGeometry(curve); const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }); mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); mesh.rotation.y = 0.01; renderer.render(scene, camera); } body { margin: 0; } lt;script src="https://cdn.jsdelivr.net/npm/three@0.133.1/build/three.min.js"gt;lt;/scriptgt; В примере кода используется простая квадратичная кривая Безье для создания формы трубки.