当前位置:网站首页>Three. JS introductory learning notes 08:orbitcontrols JS plug-in - mouse control model rotation, zoom in, zoom out, translation, etc
Three. JS introductory learning notes 08:orbitcontrols JS plug-in - mouse control model rotation, zoom in, zoom out, translation, etc
2022-07-07 15:48:00 【Jiang Duoduo_ Mostly Harmless 】
Learning reference
https://blog.csdn.net/qq_30100043/article/details/79606355
One . introduce
1. introduce OrbitControls.js file , stay three.js Found in the official download package
<script type="text/javascript" src="js/OrbitControls.js"></script>
Two . add to
// User interaction plug-ins Press and hold the left mouse button to rotate , Right click and hold the pan , Scroll wheel zoom
var controls = new THREE.OrbitControls( camera, renderer.domElement );
// If you use animate When the method is used , Delete this function
//controls.addEventListener( 'change', render );
// Make the animation rotate or damp when cycling Does the meaning have inertia
controls.enableDamping = true;
// Dynamic damping coefficient It's the mouse drag rotation sensitivity
//controls.dampingFactor = 0.25;
// Can I zoom
controls.enableZoom = true;
// Whether to rotate automatically
controls.autoRotate = true;
// Set the maximum distance from the camera to the origin
controls.minDistance = 1;
// Set the maximum distance from the camera to the origin
controls.maxDistance = 200;
// Whether to turn on right-click drag and drop
controls.enablePan = true;
3、 ... and . effect
Four . Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d_camera0313</title>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/OrbitControls.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>
<script type="text/javascript" src="js/AxesHelper.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
//renderer
var renderer = new THREE.WebGLRenderer({
antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xd2d2d2,1.0);
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
//scene
var scene = new THREE.Scene();
//camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 4, 5);
camera.lookAt(new THREE.Vector3(0,0,0));
//light
var light = new THREE.PointLight(0xffffff);
scene.add(new THREE.AmbientLight(0x444444));// The ambient light
light.position.set(0,10,10);
scene.add(light);
//tool
var helper = new THREE.AxesHelper(50);// Shaft assist , The parameter is axis size
scene.add(helper);
//model
var loader = new THREE.ObjectLoader();
loader.load("json/test0313.json",function (obj) {
scene.add(obj);
});
//stats
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.right = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
//document.getElementsByTagName("body")[0].appendChild(stats.domElement);// Both writing methods can be
//OrbitControls Press and hold the left mouse button to rotate , Right click and hold the pan , Scroll wheel zoom
var controls = new THREE.OrbitControls( camera, renderer.domElement );
// If you use animate When the method is used , Delete this function
//controls.addEventListener( 'change', render );
// Make the animation rotate or damp when cycling Does the meaning have inertia
controls.enableDamping = true;
// Dynamic damping coefficient It's the mouse drag rotation sensitivity
//controls.dampingFactor = 0.25;
// Can I zoom
controls.enableZoom = true;
// Whether to rotate automatically
controls.autoRotate = true;
// Set the maximum distance from the camera to the origin
controls.minDistance = 1;
// Set the maximum distance from the camera to the origin
controls.maxDistance = 200;
// Whether to turn on right-click drag and drop
controls.enablePan = true;
//render
id = setInterval(draw, 20);
function draw() {
stats.begin();
renderer.render(scene, camera);
stats.end();
}
</script>
</body>
</html>
边栏推荐
- 2022全开源企业发卡网修复短网址等BUG_2022企业级多商户发卡平台源码
- Simple understanding and application of TS generics
- [quick start of Digital IC Verification] 26. Ahb-sramc of SystemVerilog project practice (6) (basic points of APB protocol)
- HW初级流量监控,到底该怎么做
- LeetCode3_ Longest substring without duplicate characters
- Annexb and avcc are two methods of data segmentation in decoding
- Write a ten thousand word long article "CAS spin lock" to send Jay's new album to the top of the hot list
- 【數字IC驗證快速入門】20、SystemVerilog學習之基本語法7(覆蓋率驅動...內含實踐練習)
- 2.Golang基础知识
- Postman generate timestamp, future timestamp
猜你喜欢
15. Using the text editing tool VIM
A wave of open source notebooks is coming
Postman generate timestamp, future timestamp
LeetCode3_ Longest substring without duplicate characters
numpy--数据清洗
Cocos uses custom material to display problems
[quick start of Digital IC Verification] 19. Basic grammar of SystemVerilog learning 6 (thread internal communication... Including practical exercises)
LeetCode1_ Sum of two numbers
Three. JS introductory learning notes 00: coordinate system, camera (temporarily understood)
When opening the system window under UE4 shipping, the problem of crash is attached with the plug-in download address
随机推荐
A wave of open source notebooks is coming
Streaming end, server end, player end
Connecting FTP server tutorial
Tkinter after how to refresh data and cancel refreshing
MongoDB数据库基础知识整理
postman生成时间戳,未来时间戳
Async and await
Please supervise the 2022 plan
MongoD管理数据库的方法介绍
2. Basic knowledge of golang
2022全开源企业发卡网修复短网址等BUG_2022企业级多商户发卡平台源码
2022 all open source enterprise card issuing network repair short website and other bugs_ 2022 enterprise level multi merchant card issuing platform source code
Cut ffmpeg as needed, and use emscripten to compile and run
Learn good-looking custom scroll bars in 1 minute
TS as a general cache method
Ida Pro reverse tool finds the IP and port of the socket server
Syntax of generator function (state machine)
The significance of XOR in embedded C language
There is a cow, which gives birth to a heifer at the beginning of each year. Each heifer has a heifer at the beginning of each year since the fourth year. Please program how many cows are there in the
Three. JS introductory learning notes 04: external model import - no material obj model