当前位置:网站首页>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>
边栏推荐
- Three. JS introductory learning notes 00: coordinate system, camera (temporarily understood)
- [data mining] visual pattern mining: hog feature + cosine similarity /k-means clustering
- Please supervise the 2022 plan
- 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
- How to understand that binary complement represents negative numbers
- [follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
- Write sequence frame animation with shader
- [quickstart to Digital IC Validation] 20. Basic syntax for system verilog Learning 7 (Coverage Driven... Including practical exercises)
- Ue4/ue5 multi thread development attachment plug-in download address
- Webcodecs parameter settings -avc1.42e01e meaning
猜你喜欢
【数字IC验证快速入门】20、SystemVerilog学习之基本语法7(覆盖率驱动...内含实践练习)
从 1.5 开始搭建一个微服务框架链路追踪 traceId
银行需要搭建智能客服模块的中台能力,驱动全场景智能客服务升级
MySQL bit type resolution
[deep learning] semantic segmentation experiment: UNET network /msrc2 dataset
Whole process analysis of unity3d rendering pipeline
[follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
numpy---基础学习笔记
Annexb and avcc are two methods of data segmentation in decoding
Getting started with webgl (2)
随机推荐
C Alibaba cloud OSS file upload, download and other operations (unity is available)
numpy--数据清洗
Super simple and fully automated generation super signature system (cloud Xiaoduo minclouds.com cloud service instance), free application in-house test app distribution and hosting platform, maintenan
What is Base64?
Steps to create P8 certificate and warehousing account
[original] all management without assessment is nonsense!
Jacobo code coverage
Unity's ASE realizes cartoon flame
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
OpenGL's distinction and understanding of VAO, VBO and EBO
The "go to definition" in VS2010 does not respond or prompts the solution of "symbol not found"
大表delete删数据导致数据库异常解决
【数字IC验证快速入门】29、SystemVerilog项目实践之AHB-SRAMC(9)(AHB-SRAMC SVTB Overview)
2. Heap sort "hard to understand sort"
Basic knowledge sorting of mongodb database
有一头母牛,它每年年初生一头小母牛。每头小母牛从第四个年头开始,每年年初也生一头小母牛。请编程实现在第n年的时候,共有多少头母牛?
【原创】一切不谈考核的管理都是扯淡!
Use cpolar to build a business website (2)
JS array foreach source code parsing
Async and await