目前主要是引入OrbitControls.js進行控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/three.min.js"></script>
<script src="../js/OrbitControls.js"></script> <!--引入控制js，可以旋轉視角-->
<link rel="stylesheet" href="../css/common.css">
</head>
<body>
<div class="ys-absolute-container" id="box" style="overflow: hidden"></div>
<!--<script src="../js/init_bak.js"></script>-->
<script>
var scene=new THREE.Scene()
let ele=document.getElementById('box')
let width=ele.clientWidth
let height=ele.clientHeight
var camera=new THREE.PerspectiveCamera(45,width/height,1,1000) //視角 寬高比 近平面距離
camera.position.set(20,20,20) //相機的位置
camera.lookAt(0,0,0)
//創建渲染器
let renderer=new THREE.WebGLRenderer({
antialias:true
})
renderer.setSize(width, height);
ele.appendChild(renderer.domElement); //將dom加入
renderer.setClearColor('#B4D3BA');
/*添加box*/
var box = new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({
color: 0xffff00,
// wireframe:true
})
);
box.position.set(0,0,0);
scene.add(box);
//座標軸輔助
var axes = new THREE.AxesHelper(10); //紅x 綠y 藍z
scene.add(axes);
renderer.render( scene, camera );
function initControls(scene,camera,renderer) {
const controls = new THREE.OrbitControls( camera, renderer.domElement );
// 如果使用animate方法時，將此函數刪除
controls.addEventListener( 'change', ()=>{
renderer.render( scene, camera );
});
// // 使動畫循環使用時阻尼或自轉 意思是否有慣性
// controls.enableDamping = true;
// //動態阻尼係數 就是鼠標拖拽旋轉靈敏度
// //controls.dampingFactor = 0.25;
// //是否可以縮放
// controls.enableZoom = true;
// //是否自動旋轉
// controls.autoRotate = true;
// controls.autoRotateSpeed = 0.5;
// //設置相機距離原點的最遠距離
// controls.minDistance = 1;
// //設置相機距離原點的最遠距離
// controls.maxDistance = 200;
// //是否開啓右鍵拖拽
//controls.enablePan = true;
return controls
}
var controls = initControls(scene,camera,renderer)
controls.update()
</script>
</body>
</html>