当前位置：网站首页>Three of three JS (webgl) simple sorting of rotation attribute function, and a simple case of rotating around the axis based on this
Three of three JS (webgl) simple sorting of rotation attribute function, and a simple case of rotating around the axis based on this
2022-04-23 05:19:00 【Xiankui xan】
Three And three.js （webgl） Simple arrangement of rotation function , And a simple case of rotating around an axis
Catalog
Two 、 Simple schematic diagram of the case
3、 ... and 、 Implementation principle of case rotation
Four 、 matters needing attention
5、 ... and 、 General implementation steps of the case
One 、 Brief introduction
Three js Some knowledge of development , It is convenient to encounter similar problems later , Be able to check and use in time .
This section describes , three.js （webgl） Arrangement of several commonly used rotation functions in , On this basis, a simple case of a sphere rotating from one point to another , There are many ways to achieve it , This is for ideas only , If there are shortcomings , Welcome to point out , Or you have a better way , Welcome to leave a message .
Three js Several rotation attributes in / function , It is worth noting that ：
- These rotation functions are based on local rotation
- Be careful , The value set here is radian , Need to be distinguished from angles
- angle turn radian MathUtils.degToRad(deg)
- radian turn angle MathUtils.radToDeg (rad)
1、Mesh Medium rotation attribute
Property name explain Property value type Usage method .rotation Object's Local rotate , Expressed in radians radian object3D.rotation.x = MathUtils.degToRad(90) 2、rotateOnAxis Rotate an object around its axis in local space
Be careful ：axis Better be a unit vector
Method The ginseng Usage method .rotateOnAxis ( axis : Vector3, angle : Float ) object3D.rotateOnAxis(new Vector3(1,0,0),180) 3、rotateX / rotateY / rotateZ Rotate the object about the axis of local space
Method The ginseng Type of parameter transfer Usage method .rotateX ( rad : Float ) radian object3D.rotateX (MathUtils.degToRad(90)) .rotateY ( rad : Float ) radian object3D.rotateY(MathUtils.degToRad(90)) .rotateZ ( rad : Float ) radian object3D.rotateZ (MathUtils.degToRad(90))
Two 、 Simple schematic diagram of the case
3、 ... and 、 Implementation principle of case rotation
1、 vector angleTo Calculation A Vector and B The angle before the vector
2、 vector cross Calculation A Vector and B The normal vector of a vector , As the axis of rotation
3、 Use the data obtained above , With the help of Mesh.rotateOnAxis from A Rotate the point to B spot
Four 、 matters needing attention
1、Mesh.rotateOnAxis It's local rotation , One trick here is , Add a parent object at the center of the circle , hold A Add point object to parent object , Rotate the parent object , So as to achieve from A The point rotates to B spot
5、 ... and 、 General implementation steps of the case
The case is based on Threejs GitHub - mrdoob/three.js: JavaScript 3D Library.
Creation and implementation of engineering framework
1、 Create script , introduce Three, Create basic Three Environmental Science , Add scene , The camera , Light, etc
2、 Add... For rotation demonstration 3D object
3、 Calculate the relevant parameters that need to be rotated , Including rotation angle （ Clockwise / Counterclockwise angle ）, Rotation axis vector （ Clockwise / Counterclockwise axis vector ） etc.
4、 Make the ball clockwise / Counterclockwise from A Moving to B spot , And then in animation perhaps render The function can be called
5、 Come here , You can run it in the browser See how it works
6、 ... and 、 Key code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10TestRotate</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "../../../build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from '../../jsm/controls/OrbitControls.js';
import Stats from '../../jsm/libs/stats.module.js';
let scene, camera, renderer, stats;
var spheremeshT1;
var spheremeshT2;
let POSITION_A ;
let POSITION_B ;
let POSITION_Center ;
let T1RotationBasePositionObject;
let T2RotationBasePositionObject;
let targetDegreeT1
let targetDegreeT2
var degreeT1 = 0
var degreeT2 = 0
let T1RotateAixes
let T2RotateAixes
init();
animate();
function init() {
// scene
initScene();
// camera
initCamera();
// light
initLight();
// renderer
initRenderer();
// OrbitControls
initOrbitControls();
stats = new Stats();
document.body.appendChild( stats.dom );
// onWindowResize
window.addEventListener( 'resize', onWindowResize );
axiesHelper();
stats = new Stats();
document.body.appendChild( stats.dom );
// window.location.href = renderer.domElement.toDataURL( 'image/png' );
addTestRoateObject();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function initScene( ) {
scene = new THREE.Scene();
}
function initCamera( ) {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
camera.position.set( 0, 0, 25 );
}
function initLight( ) {
const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
directionalLight.position.set( - 1, 1, 100 );
scene.add( directionalLight );
}
function initRenderer( ) {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor( 0xcccccc );
document.body.appendChild( renderer.domElement );
}
function initOrbitControls( ) {
const controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 5;
controls.maxDistance = 50;
controls.enablePan = false; // Move prohibit
}
function animate() {
requestAnimationFrame( animate );
stats.update();
render();
}
function axiesHelper( ) {
var helper = new THREE.AxesHelper( 20 );
scene.add( helper );
}
function render() {
renderer.render( scene, camera );
rotateRunDataT1T2();
}
function addTestRoateObject(){
POSITION_A = new THREE.Vector3( 0, 5, 0 );
POSITION_B = new THREE.Vector3( 5, 0, 0 );
POSITION_Center = new THREE.Vector3( 0, 0, 0 );
var geometry = new THREE.SphereGeometry( 5, 30 ); // Rectangular plane
var material = new THREE.MeshPhongMaterial( {} );
var spheremesh1 = new THREE.Mesh( geometry, material );
spheremesh1.position.set(POSITION_Center.x, POSITION_Center.y, POSITION_Center.z);
scene.add( spheremesh1 );
var geometryA = new THREE.SphereGeometry( 1, 30 ); // Rectangular plane
var materialA = new THREE.MeshPhongMaterial( {
color: '#cc0000'
} );
var spheremeshA = new THREE.Mesh( geometryA, materialA );
spheremeshA.position.set( POSITION_A.x, POSITION_A.y, POSITION_A.z );
scene.add( spheremeshA );
var geometryB = new THREE.SphereGeometry( 1, 30 ); // Rectangular plane
var materialB = new THREE.MeshPhongMaterial( {
color: '#cc00cc'
} );
var spheremeshB = new THREE.Mesh( geometryB, materialB );
spheremeshB.position.set( POSITION_B.x, POSITION_B.y, POSITION_B.z);
scene.add( spheremeshB );
var geometryT1 = new THREE.SphereGeometry( 1, 30 ); // Rectangular plane
var materialT1 = new THREE.MeshPhongMaterial( {} );
spheremeshT1 = new THREE.Mesh( geometryT1, materialT1 );
spheremeshT1.position.set( POSITION_A.x, POSITION_A.y, POSITION_A.z );
// Auxiliary rotation
T1RotationBasePositionObject = new THREE.Mesh( new THREE.SphereGeometry( 0.1, 6 ),materialT1);
T1RotationBasePositionObject.position.set(POSITION_Center.x, POSITION_Center.y, POSITION_Center.z );
T1RotationBasePositionObject.add(spheremeshT1);
scene.add( T1RotationBasePositionObject );
var geometryT2 = new THREE.SphereGeometry( 1, 30 ); // Rectangular plane
var materialT2 = new THREE.MeshPhongMaterial( {} );
spheremeshT2 = new THREE.Mesh( geometryT2, materialT2 );
spheremeshT2.position.set( POSITION_A.x, POSITION_A.y, POSITION_A.z );
// Auxiliary rotation
T2RotationBasePositionObject = new THREE.Mesh( new THREE.SphereGeometry( 0.1, 6 ),materialT2);
T2RotationBasePositionObject.position.set(POSITION_Center.x, POSITION_Center.y, POSITION_Center.z );
T2RotationBasePositionObject.add( spheremeshT2 );
scene.add( T2RotationBasePositionObject );
rotateTestDataT1T2();
}
function rotateTestDataT1T2() {
const v1T1 = new THREE.Vector3( POSITION_A.x, POSITION_A.y, POSITION_A.z );
console.log( v1T1.x + ' ' + v1T1.y + ' ' + v1T1.z );
const v2T1 = new THREE.Vector3( POSITION_B.x, POSITION_B.y, POSITION_B.z );
console.log( v2T1.x + ' ' + v2T1.y + ' ' + v2T1.z );
targetDegreeT1 = v1T1.angleTo( v2T1 );
console.log( 'targetDegreeT1 ' + targetDegreeT1 );
v1T1.cross( v2T1 );
console.log( v1T1.x + ' ' + v1T1.y + ' ' + v1T1.z );
//T1RotationBasePositionObject.rotateOnAxis( v1T1.normalize(),targetDegreeT1 )
T1RotateAixes = v1T1.normalize();
const v1T2 = new THREE.Vector3( POSITION_A.x, POSITION_A.y, POSITION_A.z );
console.log( v1T2.x + ' ' + v1T2.y + ' ' + v1T2.z );
const v2T2 = new THREE.Vector3( POSITION_B.x, POSITION_B.y, POSITION_B.z );
console.log( v2T2.x + ' ' + v2T2.y + ' ' + v2T2.z );
targetDegreeT2 = v2T2.angleTo( v1T2 );
console.log( 'targetDegreeT2 ' + targetDegreeT2 );
const nl = v2T2.cross( v1T2 );
console.log( v1T2.x + ' ' + v1T2.y + ' ' + v1T2.z );
const modifyDegree = Math.PI * 2 - targetDegreeT2;
console.log( modifyDegree );
//T2RotationBasePositionObject.rotateOnAxis( v1T2.normalize(), modifyDegree)
targetDegreeT2 = modifyDegree;
T2RotateAixes = v2T2.normalize();
}
function rotateRunDataT1T2() {
if ( degreeT1 < targetDegreeT1 ) {
degreeT1 += 0.01;
T1RotationBasePositionObject.rotateOnAxis( T1RotateAixes, 0.01 );
}
if ( degreeT2 < targetDegreeT2 ) {
degreeT2 += 0.01;
T2RotationBasePositionObject.rotateOnAxis( T2RotateAixes, 0.01 );
}
}
</script>
</body>
</html>
版权声明
本文为[Xiankui xan]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230516339317.html
边栏推荐
- Data management of basic operation of mairadb database
- 青岛敏捷之旅，来了！
- Golang select priority execution
- Golang memory escape
- 2021 年 25 大 DevOps 工具（下）
- C language hash dictionary and notes
- Redis persistence
- MySQL 慢查询
- Deep learning notes - semantic segmentation and data sets
- Transaction isolation level of MySQL transactions
猜你喜欢
What are the reasons for the failure of digital transformation?
One month countdown, pgconf What are the highlights of the latest outlook of asia2021 Asian Conference?
Redis persistence
Master-slave replication of MariaDB database
看板快速启动指南
Let the LAN group use the remote device
Devops life cycle, all you want to know is here!
Minimum spanning tree -- unblocked project hdu1863
Publish your own wheel - pypi packaging upload practice
![[2021] Spatio-Temporal Graph Contrastive Learning](/img/7d/67a0bfa0adecee24bbe291a25ae906.png)
[2021] Spatio-Temporal Graph Contrastive Learning
随机推荐
学习笔记：Unity CustomSRP-12-HDR
【openh264】cmake: msopenh264-static
Swing display time (click once to display once)
MySQL foreign key constraint
Define defines constants and macros, pointers and structures
MySQL uses or to query SQL, and SQL execution is very slow
Project manager's thinking mode worth trying: project success equation
The vscode ipynb file does not have code highlighting and code completion solutions
Transaction isolation level of MySQL transactions
Good test data management, in the end how to do?
使用 Kears 实现ResNet-34 CNN
即将毕业的大学生找技术开发工作的焦虑根源
Musk and twitter storm drama
引入精益管理方式，需要提前做到这九点
Grpc long connection keepalive
直播带货表格模板-自动显示图片-自动关联系列商品
MySQL basics 3
2022年最热门的招聘技术技能是什么，您绝对想不到
＃define 定义常量和宏，指针和结构体
Mairadb数据库基本操作之数据管理