相机轨道控件

最新推荐文章于 2024-08-25 21:55:09 发布

刘二胖要上天

最新推荐文章于 2024-08-25 21:55:09 发布

阅读量37

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_56072671/article/details/131809478

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<script type="importmap">
{
"imports" : {
"three" : "./threejs/build/three.module.js",
"three/addons/" : "./threejs/examples/jsm/"
}
}
</script>
<script type="module">
/*
相机控件
=> 就是我们每次修改代码再去看效果
=> 其实对于3d的控件放置来说是不方便的
=> 就是没有办法手动去操控这个物体
=> 但我们需要去不断的改变它的位置的时候是很不方便的
=> 所以three提供了一个相机控件
=> 允许我们通过鼠标的操作就能调整我们的相机的位置
=> 所以快速观察3d模型的不同角度的效果
=> 我们需要一个控制轨道的控件
=> 这个控件可以让我们通过鼠标键盘或者是滚轮来对物体进行操作
导入轨道控制器扩展库
=> 语法: import { OrbitControls } from '文件所在路径'

*/
// 1. 首先就是导入我们的three.js
import * as THREE from "three"

// 1.1 导入我们要使用的控件相机控件
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 2. 场景: 我们需要创建一个用来展示 3d 内容的场景
// 也就是我们的三维场景, 和我们平时的平面的还是不一样的
// 不能正常的展示到网页中需要单独创建一个场景
// 创建三维场景的语法: const scene = new THREE.Scene()
// 创建三维场景
const scene = new THREE.Scene()

// 3. 相机: 用来代替我们的眼睛去观察物体，通过相机摆放在不同的位置来实现对于3d物体的不同角度的效果的呈现
// 3d 物体有各个面我们需要使用相机来对各个面进行观察
// 创建一个相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// 4. 渲染器: 我们的场景和相机都是一个虚拟的概念，如果要把内容呈现到网页当中，需要通过渲染器来进行渲染。
// 其实就是把我们要展示的物体在页面中展示出来
// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小, 我们设置的大小就是我们的整个窗口
renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染器的大小
// 把渲染器要渲染的内容添加到body中
document.body.appendChild( renderer.domElement ); // 把渲染器的内容加载成为一个body的子元素

// 5. 着色器: 一个基础的几何体，并不是最终要展示的内容而是一个等待被描述的几何体(毛坯) 也是一个什么样的物体
// 这就相当于是我们的毛坯房还没有进行装修
// 创建着色器(这里就是创建了一个立方体) 除了立方体还有其他几何体: 圆柱体球体 .....
const geometry = new THREE.BoxGeometry( 1, 1, 1 );

// 6. 材质: 用于对着色器(几何体)表面材料的说明
// 创建材质
const material = new THREE.MeshBasicMaterial( {
// 这里我们设置了一个颜色红色
color: 0xff0000 // 0xff0000 等同于 css当中的 #ff0000 这样的是以 0x 开头
});

// 7. 物体: Mesh 网格模型 , 网格模型就是最终需要展示的3d物体
// 创建最终要展示的物体
const cube = new THREE.Mesh(geometry, material);// 创建的物体是哪个着色器(几何体) 使用那种材质

// 在场景scene当中添加创建好的物体
// 也就是把物体添加到场景中
scene.add(cube);

// 8. 设置相机的位置
camera.position.z = 5;

// 上面导入了我们的控件以后我们就可以得到一个控制器
// 9. 我们创建一个控制器
// 需要传递参数
// 第一个: 我们的相机
// 第二个: 我们的渲染器中的节点
// 作用: 其实的对像机器的参数做出调整的
const controls = new OrbitControls(camera, renderer.domElement)
// 证明 : 对像机器的参数做出调整的
// 给控制器添加一个事件
controls.addEventListener('change', () => {
// 我们打印出相机的位置
console.log('camera.position', camera.position);
// 值发生改变以后执行重新的渲染即可
renderer.render(scene, camera)
})

// 这个时候我们直接使用渲染函数进行渲染就好了
// 也就不需要之前的自动旋转了
renderer.render(scene, camera)

</script>
</body>
</html>