Поверните камеру вокруг модели, используя Quaternion

Поверните камеру вокруг модели, используя Quaternion ⇐ Javascript

Ответить Пред. тема След. тема

1 сообщение • Страница 1 из 1

Anonymous

Поверните камеру вокруг модели, используя Quaternion

Цитата

Сообщение Anonymous » 10 авг 2025, 13:41

This example rotates/positions a camera to arbitrary views of a model using three.js:
Fiddle

Код: Выделить всё

//original: https://github.com/mrdoob/three.js/blob/r172/examples/webgl_loader_amf.html

import * as THREE from "three"

import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js"
import { AMFLoader } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/AMFLoader.js"

let camera, scene, renderer

init()

// START Spherical Interpolation

function xyz2rtp(xyz) {
const { x, y, z } = xyz;
const r = Math.sqrt((x * x) + (y * y) + (z * z));
const t = Math.acos(z / r);
const p = Math.atan2(y, x);
return { r, t, p };
}

function rtp2xyz(rtp) {
const { r, t, p } = rtp;
let x = Math.cos(p);
let y = Math.sin(p);
let z = Math.cos(t);
const sph = Math.sqrt(1 - (z * z));
x *= r * sph;
y *= r * sph;
z *= r;
return { x, y, z };
}

function interpolate(a, b, u) {
const as = xyz2rtp(a);
const bs = xyz2rtp(b);
const v = 1 - u;

function component(k) {
let ac = as[k];
let bc = bs[k];
return (ac * v) + (bc * u);
}

const rs = {
r: component('r'),
t: component('t'),
p: component('p')
};
return rtp2xyz(rs);
}

function ease(u) {
const u2 = u * u;
return (3 * u2) - (2 * u2 * u);
}

// END Spherical Interpolation

function init() {
scene = new THREE.Scene()
scene.background = new THREE.Color(0x000000)

scene.add(new THREE.AmbientLight(0x999999))

camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
1,
500,
)

// Z is up for objects intended to be 3D printed.

camera.up.set(0, 0, 1)
camera.position.set(-5, 9, 6)

camera.add(new THREE.PointLight(0xffffff, 250))

scene.add(camera)

const axesHelper = new THREE.AxesHelper( 5 );
scene.add(axesHelper);

renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const loader = new AMFLoader()
loader.load(
"https://threejs.org/examples/models/amf/rook.amf",
function (amfobject) {
scene.add(amfobject)
render()
},
)

const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener("change", render)
controls.target.set(0, 0, 2)
controls.enableZoom = false
controls.update()

window.addEventListener("resize", onWindowResize)

document.querySelector("#start").onclick = () => {
move({ x: 0, y: 0, z: 0 }, { x: -5, y: 9, z: 6 })
}
document.querySelector("#top").onclick = () => {
move({ x: -3.04, y: 0, z: -Math.PI }, { x: 0, y: 1, z: 20 })
}
document.querySelector("#bottom").onclick = () => {
move({ x: 3.04, y: 0, z: Math.PI }, { x: 0, y: 1, z: -20 })
}
document.querySelector("#right").onclick = () => {
move({ x: Math.PI / 2, y: 0, z: Math.PI / 2 }, { x: 0, y: -20, z: 0 })
}

function move(r, p) {
const startPosition = {...camera.position};
const startRotation = {...camera.rotation};
const steps = 30;
let i = 0;

let update = () => {
i++
const u = ease(i / steps);
const v = 1 - u;

const newPosition = interpolate(startPosition, p, u);
camera.position.x = newPosition.x;
camera.position.y = newPosition.y;
camera.position.z = newPosition.z;

camera.rotation.x = (r.x * v) + (startRotation.x * u);
camera.rotation.y = (r.y * v) + (startRotation.y * u);
camera.rotation.z = (r.z * v) + (startRotation.z * u);

controls.update();
render();
if (i <  steps) requestAnimationFrame(update);
}
requestAnimationFrame(update);
}
}

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()

renderer.setSize(window.innerWidth, window.innerHeight)

render()
}

function render() {
renderer.render(scene, camera)
}< /code>
body {
margin: 0;
background-color: #000;
color: #fff;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
}

a {
color: #ff0;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

button {
cursor: pointer;
text-transform: uppercase;
}

#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
pointer-events: auto;
}

.lil-gui {
z-index: 2 !important; /* TODO Solve this in HTML */
}

@media all and ( max-width: 640px ) {
.lil-gui.root {
right: auto;
top: auto;
max-height: 50%;
max-width: 80%;
bottom: 0;
left: 0;
}
}

#overlay {
position: absolute;
font-size: 16px;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(0,0,0,0.7);
}

#overlay button {
background: transparent;
border: 0;
border: 1px solid rgb(255, 255, 255);
border-radius: 4px;
color: #ffffff;
padding: 12px 18px;
text-transform: uppercase;
cursor: pointer;
}

#notSupported {
width: 50%;
margin: auto;
background-color: #f00;
margin-top: 20px;
padding: 10px;
}

body {
background-color: #000;
}< /code>

[url=https://threejs.org]three.js[/url] - AMF loader

start
top
bottom
right


{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
}
}

Код: Выделить всё

//original: https://github.com/mrdoob/three.js/blob/r172/examples/webgl_loader_amf.html

import * as THREE from "three"

import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js"
import { AMFLoader } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/AMFLoader.js"

let camera, scene, renderer

init()

// START Spherical Interpolation
function ease(u) {
const u2 = u * u;
return (3 * u2) - (2 * u2 * u);
}

// END Spherical Interpolation

function init() {
scene = new THREE.Scene()
scene.background = new THREE.Color(0x000000)

scene.add(new THREE.AmbientLight(0x999999))

camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
1,
500,
)

// Z is up for objects intended to be 3D printed.

camera.up.set(0, 0, 1)
camera.position.set(-5, 9, 6)

camera.add(new THREE.PointLight(0xffffff, 250))

scene.add(camera)

const axesHelper = new THREE.AxesHelper( 5 );
scene.add(axesHelper);

renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const loader = new AMFLoader()
loader.load(
"https://threejs.org/examples/models/amf/rook.amf",
function (amfobject) {
scene.add(amfobject)
render()
},
)

const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener("change", render)
controls.target.set(0, 0, 2)
controls.enableZoom = false
controls.update()

window.addEventListener("resize", onWindowResize)

document.querySelector("#start").onclick = () => {
move({ x: 0, y: 0, z: 0 }, { x: -5, y: 9, z: 6 })
}
document.querySelector("#top").onclick = () => {
move({ x: -3.04, y: 0, z: -Math.PI }, { x: 0, y: 1, z: 20 })
}
document.querySelector("#bottom").onclick = () => {
move({ x: 3.04, y: 0, z: Math.PI }, { x: 0, y: 1, z: -20 })
}
document.querySelector("#right").onclick = () => {
move({ x: Math.PI / 2, y: 0, z: Math.PI / 2 }, { x: 0, y: -20, z: 0 })
}

function unitVector(v) {
const u = (v.x**2 + v.y**2 + v.z**2)**0.5;
return new THREE.Vector3(v.x/u, v.y/u, v.z/u);
}

function move(r, p) {
// const endPosition = new THREE.Vector3(p.x, p.y, p.z );
// const startPosition = {...camera.position};
// const startRotation = {...camera.rotation};
const steps = 300;
let i = 0;

let qr = new THREE.Quaternion();

qr.setFromUnitVectors ( unitVector(camera.position), unitVector(p.x, p.y, p.z) )

let update = () => {
i++
const u = ease(i / steps);
// const v = 1 - u;

camera.quaternion.slerp(qr, u);
// camera.quaternion.slerpQuaternions(camera.quaternion, qr, u;
// THREE.Quaternion.slerpQuaternions (camera.quaternion, qr, u);
// camera.quaternion = qr;

camera.quaternion.normalize();

console.log(camera.quaternion)

// const newPosition = interpolate(startPosition, p, u);
// camera.position.x = newPosition.x;
// camera.position.y = newPosition.y;
// camera.position.z = newPosition.z;

// camera.rotation.x = (r.x * v) + (startRotation.x * u);
// camera.rotation.y = (r.y * v) + (startRotation.y * u);
// camera.rotation.z = (r.z * v) + (startRotation.z * u);

render();
if (i <  steps) {
requestAnimationFrame(update);
} else {
controls.update();
}
}
requestAnimationFrame(update);
}
}

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()

renderer.setSize(window.innerWidth, window.innerHeight)

render()
}

function render() {
renderer.render(scene, camera)
}< /code>
body {
margin: 0;
background-color: #000;
color: #fff;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
}

a {
color: #ff0;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

button {
cursor: pointer;
text-transform: uppercase;
}

#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
pointer-events: auto;
}

.lil-gui {
z-index: 2 !important; /* TODO Solve this in HTML */
}

@media all and ( max-width: 640px ) {
.lil-gui.root {
right: auto;
top: auto;
max-height: 50%;
max-width: 80%;
bottom: 0;
left: 0;
}
}

#overlay {
position: absolute;
font-size: 16px;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(0,0,0,0.7);
}

#overlay button {
background: transparent;
border: 0;
border: 1px solid rgb(255, 255, 255);
border-radius: 4px;
color: #ffffff;
padding: 12px 18px;
text-transform: uppercase;
cursor: pointer;
}

#notSupported {
width: 50%;
margin: auto;
background-color: #f00;
margin-top: 20px;
padding: 10px;
}

body {
background-color: #000;
}
< /code>

[url=https://threejs.org]three.js[/url] - AMF loader

start
top
bottom
right


{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
}
}
< /code>
< /div>
< /div>
< /p>
Имеет смысл, что кватернионы описывают вращение, а не положение. Здесь кватернион используется для Sleerp

от кватерниона камеры начала до конца кватерниона. Координаты?
Как правильно объединить положение с вращением кватерниона?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... quaternion

1754822477

Anonymous

This example rotates/positions a camera to arbitrary views of a model using three.js:
Fiddle


[code]//original: https://github.com/mrdoob/three.js/blob/r172/examples/webgl_loader_amf.html

import * as THREE from "three"

import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js"
import { AMFLoader } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/AMFLoader.js"

let camera, scene, renderer

init()

// START Spherical Interpolation

function xyz2rtp(xyz) {
const { x, y, z } = xyz;
const r = Math.sqrt((x * x) + (y * y) + (z * z));
const t = Math.acos(z / r);
const p = Math.atan2(y, x);
return { r, t, p };
}

function rtp2xyz(rtp) {
const { r, t, p } = rtp;
let x = Math.cos(p);
let y = Math.sin(p);
let z = Math.cos(t);
const sph = Math.sqrt(1 - (z * z));
x *= r * sph;
y *= r * sph;
z *= r;
return { x, y, z };
}

function interpolate(a, b, u) {
const as = xyz2rtp(a);
const bs = xyz2rtp(b);
const v = 1 - u;

function component(k) {
let ac = as[k];
let bc = bs[k];
return (ac * v) + (bc * u);
}

const rs = {
r: component('r'),
t: component('t'),
p: component('p')
};
return rtp2xyz(rs);
}

function ease(u) {
const u2 = u * u;
return (3 * u2) - (2 * u2 * u);
}

// END Spherical Interpolation

function init() {
scene = new THREE.Scene()
scene.background = new THREE.Color(0x000000)

scene.add(new THREE.AmbientLight(0x999999))

camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
1,
500,
)

// Z is up for objects intended to be 3D printed.

camera.up.set(0, 0, 1)
camera.position.set(-5, 9, 6)

camera.add(new THREE.PointLight(0xffffff, 250))

scene.add(camera)

const axesHelper = new THREE.AxesHelper( 5 );
scene.add(axesHelper);

renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const loader = new AMFLoader()
loader.load(
"https://threejs.org/examples/models/amf/rook.amf",
function (amfobject) {
scene.add(amfobject)
render()
},
)

const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener("change", render)
controls.target.set(0, 0, 2)
controls.enableZoom = false
controls.update()

window.addEventListener("resize", onWindowResize)

document.querySelector("#start").onclick = () => {
move({ x: 0, y: 0, z: 0 }, { x: -5, y: 9, z: 6 })
}
document.querySelector("#top").onclick = () => {
move({ x: -3.04, y: 0, z: -Math.PI }, { x: 0, y: 1, z: 20 })
}
document.querySelector("#bottom").onclick = () => {
move({ x: 3.04, y: 0, z: Math.PI }, { x: 0, y: 1, z: -20 })
}
document.querySelector("#right").onclick = () => {
move({ x: Math.PI / 2, y: 0, z: Math.PI / 2 }, { x: 0, y: -20, z: 0 })
}

function move(r, p) {
const startPosition = {...camera.position};
const startRotation = {...camera.rotation};
const steps = 30;
let i = 0;

let update = () => {
i++
const u = ease(i / steps);
const v = 1 - u;

const newPosition = interpolate(startPosition, p, u);
camera.position.x = newPosition.x;
camera.position.y = newPosition.y;
camera.position.z = newPosition.z;

camera.rotation.x = (r.x * v) + (startRotation.x * u);
camera.rotation.y = (r.y * v) + (startRotation.y * u);
camera.rotation.z = (r.z * v) + (startRotation.z * u);

controls.update();
render();
if (i <  steps) requestAnimationFrame(update);
}
requestAnimationFrame(update);
}
}

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()

renderer.setSize(window.innerWidth, window.innerHeight)

render()
}

function render() {
renderer.render(scene, camera)
}< /code>
body {
margin: 0;
background-color: #000;
color: #fff;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
}

a {
color: #ff0;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

button {
cursor: pointer;
text-transform: uppercase;
}

#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
pointer-events: auto;
}

.lil-gui {
z-index: 2 !important; /* TODO Solve this in HTML */
}

@media all and ( max-width: 640px ) {
.lil-gui.root {
right: auto;
top: auto;
max-height: 50%;
max-width: 80%;
bottom: 0;
left: 0;
}
}

#overlay {
position: absolute;
font-size: 16px;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(0,0,0,0.7);
}

#overlay button {
background: transparent;
border: 0;
border: 1px solid rgb(255, 255, 255);
border-radius: 4px;
color: #ffffff;
padding: 12px 18px;
text-transform: uppercase;
cursor: pointer;
}

#notSupported {
width: 50%;
margin: auto;
background-color: #f00;
margin-top: 20px;
padding: 10px;
}

body {
background-color: #000;
}< /code>

[url=https://threejs.org]three.js[/url] - AMF loader

start
top
bottom
right


{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
}
}
[/code]



 
[code]//original: https://github.com/mrdoob/three.js/blob/r172/examples/webgl_loader_amf.html

import * as THREE from "three"

import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js"
import { AMFLoader } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/AMFLoader.js"

let camera, scene, renderer

init()

// START Spherical Interpolation
function ease(u) {
const u2 = u * u;
return (3 * u2) - (2 * u2 * u);
}

// END Spherical Interpolation

function init() {
scene = new THREE.Scene()
scene.background = new THREE.Color(0x000000)

scene.add(new THREE.AmbientLight(0x999999))

camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
1,
500,
)

// Z is up for objects intended to be 3D printed.

camera.up.set(0, 0, 1)
camera.position.set(-5, 9, 6)

camera.add(new THREE.PointLight(0xffffff, 250))

scene.add(camera)

const axesHelper = new THREE.AxesHelper( 5 );
scene.add(axesHelper);

renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const loader = new AMFLoader()
loader.load(
"https://threejs.org/examples/models/amf/rook.amf",
function (amfobject) {
scene.add(amfobject)
render()
},
)

const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener("change", render)
controls.target.set(0, 0, 2)
controls.enableZoom = false
controls.update()

window.addEventListener("resize", onWindowResize)

document.querySelector("#start").onclick = () => {
move({ x: 0, y: 0, z: 0 }, { x: -5, y: 9, z: 6 })
}
document.querySelector("#top").onclick = () => {
move({ x: -3.04, y: 0, z: -Math.PI }, { x: 0, y: 1, z: 20 })
}
document.querySelector("#bottom").onclick = () => {
move({ x: 3.04, y: 0, z: Math.PI }, { x: 0, y: 1, z: -20 })
}
document.querySelector("#right").onclick = () => {
move({ x: Math.PI / 2, y: 0, z: Math.PI / 2 }, { x: 0, y: -20, z: 0 })
}

function unitVector(v) {
const u = (v.x**2 + v.y**2 + v.z**2)**0.5;
return new THREE.Vector3(v.x/u, v.y/u, v.z/u);
}

function move(r, p) {
// const endPosition = new THREE.Vector3(p.x, p.y, p.z );
// const startPosition = {...camera.position};
// const startRotation = {...camera.rotation};
const steps = 300;
let i = 0;

let qr = new THREE.Quaternion();

qr.setFromUnitVectors ( unitVector(camera.position), unitVector(p.x, p.y, p.z) )

let update = () => {
i++
const u = ease(i / steps);
// const v = 1 - u;

camera.quaternion.slerp(qr, u);
// camera.quaternion.slerpQuaternions(camera.quaternion, qr, u;
// THREE.Quaternion.slerpQuaternions (camera.quaternion, qr, u);
// camera.quaternion = qr;

camera.quaternion.normalize();

console.log(camera.quaternion)

// const newPosition = interpolate(startPosition, p, u);
// camera.position.x = newPosition.x;
// camera.position.y = newPosition.y;
// camera.position.z = newPosition.z;

// camera.rotation.x = (r.x * v) + (startRotation.x * u);
// camera.rotation.y = (r.y * v) + (startRotation.y * u);
// camera.rotation.z = (r.z * v) + (startRotation.z * u);

render();
if (i <  steps) {
requestAnimationFrame(update);
} else {
controls.update();
}
}
requestAnimationFrame(update);
}
}

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()

renderer.setSize(window.innerWidth, window.innerHeight)

render()
}

function render() {
renderer.render(scene, camera)
}< /code>
body {
margin: 0;
background-color: #000;
color: #fff;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
}

a {
color: #ff0;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

button {
cursor: pointer;
text-transform: uppercase;
}

#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
pointer-events: auto;
}

.lil-gui {
z-index: 2 !important; /* TODO Solve this in HTML */
}

@media all and ( max-width: 640px ) {
.lil-gui.root {
right: auto;
top: auto;
max-height: 50%;
max-width: 80%;
bottom: 0;
left: 0;
}
}

#overlay {
position: absolute;
font-size: 16px;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(0,0,0,0.7);
}

#overlay button {
background: transparent;
border: 0;
border: 1px solid rgb(255, 255, 255);
border-radius: 4px;
color: #ffffff;
padding: 12px 18px;
text-transform: uppercase;
cursor: pointer;
}

#notSupported {
width: 50%;
margin: auto;
background-color: #f00;
margin-top: 20px;
padding: 10px;
}

body {
background-color: #000;
}
< /code>

[url=https://threejs.org]three.js[/url] - AMF loader

start
top
bottom
right


{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
}
}
< /code>
< /div>
< /div>
< /p>
Имеет смысл, что кватернионы описывают вращение, а не положение. Здесь кватернион используется для Sleerp [/code] от кватерниона камеры начала до конца кватерниона. Координаты? 
 Как правильно объединить положение с вращением кватерниона?> 

Подробнее здесь: [url]https://stackoverflow.com/questions/79731123/rotate-camera-around-model-using-quaternion[/url]

Ответить Пред. тема След. тема

1 сообщение • Страница 1 из 1

Быстрый ответ

Заголовок:

Имя пользователя:

Изменение регистра текста:

Смайлики

Ещё смайлики…

К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми. Можно прикреплять файлы, перетаскивая их в окно сообщения.

Максимально разрешённый размер вложения: 15 МБ.

Имя файла:

Комментарий к файлу:

Имя файла	Комментарий к файлу	Размер	Статус

Похожие темы

Ответы

Просмотры

Последнее сообщение

Поверните камеру вокруг модели, используя Quaternion

Последнее сообщение Anonymous « 10 авг 2025, 22:43
Добавлено в форуме Javascript

Anonymous » 10 авг 2025, 22:43 » в форуме Javascript

This example rotates/positions a camera to arbitrary views of a model using three.js:
Fiddle

//original:

import * as THREE from three

import { OrbitControls } from
import { AMFLoader } from

let camera, scene, renderer

init()

// START...

0 Ответы

3 Просмотры

Последнее сообщение Anonymous
10 авг 2025, 22:43
Поверните предварительный просмотр камеры на портретную камеру Android OpenCV

Последнее сообщение Anonymous « 10 фев 2025, 23:57
Добавлено в форуме Android

Anonymous » 10 фев 2025, 23:57 » в форуме Android

Я пытаюсь использовать OpenCV 2.4.3.2 для создания приложения камеры и выполнения некоторой обработки OpenCV. Я хотел бы иметь возможность иметь несколько ориентаций пользовательского интерфейса, а не только ландшафта.
Я понимаю, что могу просто...

0 Ответы

8 Просмотры

Последнее сообщение Anonymous
10 фев 2025, 23:57
Отключить камеру с помощью приложения Android, чтобы другие приложения не могли использовать камеру

Последнее сообщение Anonymous « 31 мар 2025, 12:38
Добавлено в форуме Android

Anonymous » 31 мар 2025, 12:38 » в форуме Android

Я создавал приложение для Android, которое способно отключить камеру из этого приложения таким образом, чтобы, если какое -либо другое приложение пытается получить доступ к камере, они не смогут ее открыть, я попробовал ее с предоставлением...

0 Ответы

7 Просмотры

Последнее сообщение Anonymous
31 мар 2025, 12:38
Quaternion.Lerp не работает должным образом в Unity3d

Последнее сообщение Anonymous « 31 окт 2024, 20:52
Добавлено в форуме C#

Anonymous » 31 окт 2024, 20:52 » в форуме C#

Я использую Quaternion.Lerp для поворота сустава на определенный угол, но когда я использую приведенный ниже код, я обнаруживаю, что сустав вращается очень далеко, хотя я указал, что он вращается только на 5. Если есть какие-либо мысли, пожалуйста...

0 Ответы

10 Просмотры

Последнее сообщение Anonymous
31 окт 2024, 20:52
Понятия не имею, как использовать Quaternion.Slerp(); вращение становится быстрее

Последнее сообщение Anonymous « 13 ноя 2024, 18:51
Добавлено в форуме Android

Anonymous » 13 ноя 2024, 18:51 » в форуме Android

Я пытаюсь создать простую игру в Unity для GearVR. В игре у меня есть сцена, где пользователь может перемещаться по списку предметов. Элемент можно выбрать, если пользователь щелкнет, глядя на него. Что касается навигации, пользователь должен иметь...

0 Ответы

6 Просмотры

Последнее сообщение Anonymous
13 ноя 2024, 18:51

Вернуться в «Javascript»