《Three.JS零基础入门教程》-----之项目规划

jnfy

于 2024-09-05 10:05:48 发布

阅读量410

点赞数 12

分类专栏： threejs 文章标签： javascript 数码相机开发语言

本文链接：https://blog.csdn.net/cui137610/article/details/141923478

版权

threejs 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一个three.js的项目由这么几个部分组成

场景
物体
灯光
相机
渲染器
工具

这里我们可以对项目目录结构进行拆分, 分为：

scene: 场景
mesh: 网格(物体)
light: 灯光
camera: 相机
renderer: 渲染器
utils: 工具

1 封装场景

创建src/scene/index.js

import * as THREE from 'three'
const scene = new THREE.Scene()
export default scene

2 封装相机

创建src/camera/index.js

import * as THREE from 'three'
const camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000)
camera.position.set(0, 0, 10)
export default camera

3 封装渲染器

创建src/renderer/index.js

import * as THREE from 'three'
function isFunction(val) {  return typeof val === 'function'}
class Renderer extends THREE.WebGLRenderer {  constructor(scene, camera) {    super({ antialias: true })    this.scene = scene    this.camera = camera    this.init()  }  init() {    this.setPixelRatio(window.devicePixelRatio)    this.setSize(window.innerWidth, window.innerHeight)    document.body.appendChild(this.domElement)
    // 默认渲染    this.render(this.scene, this.camera)  }  animation(cb) {    if (!isFunction(cb)) {      console.error('param must be a function')      return    }
    this.setAnimationLoop(cb)  }}
export default Renderer

4 封装物体

创建src/mesh/index.js

import * as THREE from 'three'
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2)const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
export default cube

5 封装工具集

创建src/untils/index.js

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls'
export default class Utils {  constructor(options = {}) {    this.scene = options.scene    this.camera = options.camera    this.renderer = options.renderer
    if (!this.scene || !this.camera || !this.renderer) {      console.error('scene, camera, renderer can not be null')      return    }    this.init(options)  }  init(options) {    this.initOrbitControls(options.orbitControl)    this.initAxesHelper(options.axesHelper)    this.initGridHelper(options.gridHelper)  }  // 默认开启轨道控制器， 只有当传入的orbitControl===false时关闭  initOrbitControls(value) {    if (value === false) {      console.log('orbitControl disabled')      return    }
    new OrbitControls(this.camera, this.renderer.domElement)  }  // 默认开启坐标轴辅助工具， 只有当传入的axesHelper===false时关闭  initAxesHelper(value) {    if (value === false) {      console.log('axesHelper disabled')      return    }
    const init = {      size: 10,    }    const params = Object.assign(init, value)
    const axesHelper = new THREE.AxesHelper(params.size)    this.scene.add(axesHelper)  }  // 默认开启网格辅助工具， 只有当传入的gridHelper===false时关闭  initGridHelper(value) {    if (value === false) {      console.log('gridHelper disabled')      return    }    const init = {      size: 20,      divisions: 20,      color1: 0xffffff,      color2: 0xffffff    }    const params = Object.assign(init, value)
    const gridHelper = new THREE.GridHelper(...Object.values(params))    gridHelper.material.transparent = true    gridHelper.material.opacity = 0.5
    this.scene.add(gridHelper)  }}

6 导入使用

在main.js中导入

import scene from './scene'import camera from './camera'import mesh from './mesh'import Renderer from './renderer'import Utils from './utils'
scene.add(mesh)
const renderer = new Renderer(scene, camera)
renderer.animation(() => {  renderer.render(scene, camera)})
new Utils({  scene,  camera,  renderer,})