three.js基础01（创建一个场景并实现鼠标拖动摄像机，不同角度观看物体）

韩同学的开发备忘录

已于 2023-09-27 17:48:23 修改

阅读量629

点赞数

文章标签： javascript arcgis 开发语言

于 2023-09-27 17:44:14 首次发布

本文链接：https://blog.csdn.net/m0_64684712/article/details/133359354

版权

本文介绍了如何使用Vite框架和JavaScript直接在main.js中创建一个简单的3D项目，引入three.js库，实现场景、摄像机、渲染器的设置，以及使用OrbitControls进行交互式摄像机控制。通过`renderLoop`实现场景的实时更新。

摘要由CSDN通过智能技术生成

// 方便学习一下代码基于vite和js直接写在main.js中   npm init vite@latest 项目名称-template创建一个普通的vite项目(此处没有使用类似vue的前端框架)然后在index.html里引入main.js
// 第一步 npm i three下载依赖
// 引入three.js
import * as THREE from 'three'
// 引入轨道控制器组件
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 定义场景，摄像机，渲染器
let scene, camera , renderer
// 定义轨道控制器
let controls
  // ============================   创建场景   ============================
function init() {
  scene = new THREE.Scene()
  // 创建摄像机
  // (角度，宽高比，近截面距离，远截面距离)
   camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 摄像机向z轴移动5个单位
   camera.position.z = 5
   // 创建渲染器并设置大小
 renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth,window.innerHeight)
//  渲染器加入页面
 document.body.append(renderer.domElement)


}
// ============================   创建物体   ============================
function createCube(params) {
  // 创建图形宽高深为1
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 创建材质
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 创建网格物体对象传入图形和材质
const cube = new THREE.Mesh( geometry, material );
// 将创建的物体添加到场景
scene.add( cube );
// const geometryA = new THREE.PlaneGeometry( 2, 2 );
// // geometryA.position.x=20
// 		const materialA = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
// 		const plane = new THREE.Mesh( geometryA, materialA );
//     plane.position.x=1
// 		scene.add( plane );
}
// ============================初始化轨道控制器函数============================
function controlsCreate(){
controls = new OrbitControls( camera, renderer.domElement );
// 阻尼效果
controls.enableDamping=true
// 摄像机自动旋转
controls.autoRotate=true
// 控制垂直角度的旋转范围
controls

}
// ============================   循环渲染 (可是实现使用鼠标拖动摄像机然后场景实时更新)  ============================
function renderLoop(){
  console.log('场景更新');
  // 更新渲染场景(本质上就是渲染场景函数，renderLoop函数不停的调用所以渲染场景的函数写在renderLoop里也可以不断调用从而实现了实时的更新场景画面)
  renderer.render(scene,camera)
  // 手动用js代码更新摄像机的信息必须调用轨道控制器的update方法
  controls.update()
  // 根据当前浏览器刷新帧率不断递归调用此函数渲染最新的画面状态
  requestAnimationFrame(renderLoop)
}
// 创建辅助工具
function createHelper(){
  // 创建坐标轴对象并设置长度
const axesHelper=new THREE.AxesHelper(5)
// 将坐标轴对象添加到场景中
scene.add(axesHelper)
}
// 调用创建场景的函数
init()
// 调用创建辅助工具的函数
createHelper()
// 调用创建轨道控制器的函数
controlsCreate()
// 调用创建立方体的函数
createCube()
// 调用enderLoop()