当前位置:网站首页>Three. JS introductory learning notes 00: coordinate system, camera (temporarily understood)
Three. JS introductory learning notes 00: coordinate system, camera (temporarily understood)
2022-07-07 15:48:00 【Jiang Duoduo_ Mostly Harmless 】
I didn't understand some problems in learning orthographic camera thoroughly , Sort out the temporary understanding here , I'll fix it later , Xiaobai is one , If you have any mistakes, please correct them .
One . Coordinate system
The world coordinate system is the right-hand coordinate system ,X Forward right ,Y The shaft is upward ,Z The axis extends from the inside of the screen to the outside .
Rotate around the axis
The thumb points in the positive direction of the rotation axis , The direction of four fingers bending is the positive direction of rotation
cube.rotaion.y -= 0.01; // radian
Local coordinates
The coordinates of the object , At the center of the object .
Auxiliary coordinate axes can be added
var axisHelper = new THREE.AxisHelper(4);
axisHelper.rotation.y -=0.01;// Axis rotation
scene.add(axisHelper)
blue :z Axis
red :x Axis
green :y Axis
Two . Camera location
The camera defaults to the origin of the coordinate system , Look at Z Axis negative half axis
camera.postion: Where the camera is , The default is (0,0,0)
camera.lookAt: Camera focus direction , The default is Z Axis negative half axis direction
Focus the camera on a certain point
camera.lookAt(new THREE.Vector3(x,y,z))
The camera tracks an object
camera.lookAt(mesh.position)
orthogonal
The six parameters represent the positions of the six planes captured by the orthogonal projection camera .
among ,near Indicates the vertical distance between the near plane and the center point of the camera ;far Indicates the vertical distance between the far plane and the center point of the camera .
perspective
3、 ... and . Location relationship
<script type="text/javascript">
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
canvas, No more definition canvas Elements
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
//scene
var scene = new THREE.Scene();
//camera
var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(0, 0, 5);
scene.add(camera);
//cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe:true
})
);
scene.add(cube);
//render
//renderer.render(scene, camera);
function animate(){
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera);
requestAnimationFrame( animate );
}
animate();
</script>
I understand the positional relationship of the above code , I don't know if it's right
Blue numbers are length , Black numbers are coordinates
example
camera.position.set(0,0,100)//set(x,y,z)
camera.lookAt(new THREE.Vector3(0, 0, 0));
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, -100);
The camera is located at Z In the positive direction of the axis , The camera defaults to the origin , Look at Z Negative axis .
therefore ,cube The coordinates are z Negative axis , Can be seen by camera ,
If you set cube.position.set(0, 0, 200);
You can't see objects .
It can be done by camera.position.z And cube.position.z Change the size of the object you see
Reference Content :
Camera understanding
https://blog.csdn.net/qq_42206266/article/details/80566992
Axis
https://blog.csdn.net/weixin_33910385/article/details/88853253
https://blog.csdn.net/cvchihzhza/article/details/80141344
https://blog.csdn.net/qq_42206266/article/details/80566992
The camera
https://blog.csdn.net/a13602955218/article/details/85222815
three.js The camera camera Attribute resolution
https://www.jianshu.com/p/cacd4a035b85
visual angle
https://www.iteye.com/blog/fqg05-1947139
Point line surface
https://yq.aliyun.com/articles/687186
Perspective camera
https://www.cnblogs.com/xulei1992/p/5709677.html
Position of camera and object
https://blog.csdn.net/tjj3027/article/details/81976661
边栏推荐
- [follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
- Do you know the relationship between the most important indicators of two strong wind control and the quality of the customer base
- Android -- jetpack: the difference between livedata setValue and postvalue
- 【Markdown语法高级】让你的博客更精彩(四:设置字体样式以及颜色对照表)
- 银行需要搭建智能客服模块的中台能力,驱动全场景智能客服务升级
- 写一篇万字长文《CAS自旋锁》送杰伦的新专辑登顶热榜
- [quick start of Digital IC Verification] 18. Basic grammar of SystemVerilog learning 5 (concurrent threads... Including practical exercises)
- [quick start of Digital IC Verification] 23. AHB sramc of SystemVerilog project practice (3) (basic points of AHB protocol)
- VS2005 strange breakpoint is invalid or member variable value cannot be viewed
- The significance of XOR in embedded C language
猜你喜欢
使用Scrapy框架爬取网页并保存到Mysql的实现
postman生成时间戳,未来时间戳
Write a ten thousand word long article "CAS spin lock" to send Jay's new album to the top of the hot list
Unity's ASE achieves full screen sand blowing effect
The download button and debug button in keil are grayed out
【數據挖掘】視覺模式挖掘:Hog特征+餘弦相似度/k-means聚類
LeetCode2_ Add two numbers
写一篇万字长文《CAS自旋锁》送杰伦的新专辑登顶热榜
Yunxiaoduo software internal test distribution test platform description document
2022 all open source enterprise card issuing network repair short website and other bugs_ 2022 enterprise level multi merchant card issuing platform source code
随机推荐
2.Golang基础知识
Use of SVN
微信小程序 01
[quick start of Digital IC Verification] 29. Ahb-sramc (9) (ahb-sramc svtb overview) of SystemVerilog project practice
Super signature principle (fully automated super signature) [Yun Xiaoduo]
Cocos uses custom material to display problems
Write sequence frame animation with shader
Cocos creator collision and collision callback do not take effect
MySQL bit type resolution
What are PV and UV? pv、uv
When opening the system window under UE4 shipping, the problem of crash is attached with the plug-in download address
./ Functions of configure, make and make install
【數字IC驗證快速入門】20、SystemVerilog學習之基本語法7(覆蓋率驅動...內含實踐練習)
【数字IC验证快速入门】26、SystemVerilog项目实践之AHB-SRAMC(6)(APB协议基本要点)
[wechat applet] Chapter (5): basic API interface of wechat applet
LeetCode2_ Add two numbers
Use cpolar to build a business website (2)
Mesh merging under ue4/ue5 runtime
Wechat applet 01
Matlab experience summary