three.js创建可鼠标操作立方体
一、three.js创建鼠标操作立方体几个重要步骤1.创建场景2.创建网格模型3.创建光源4.创建相机5.创建渲染器6.创建控件对象7.渲染二、全量示例代码三、demo验证一、three.js创建鼠标操作立方体几个重要步骤
1.创建场景
createScene () {this.scene = new THREE.Scene()}
2.创建网格模型
createMesh () {const geometry = new THREE.BoxGeometry(120, 120, 120) // 创建一个立方体几何对象Geometryconst material = new THREE.MeshLambertMaterial({color: 0xe1e1e1}) // 材质对象Materialthis.mesh = new THREE.Mesh(geometry, material) // 网格模型对象Meshthis.scene.add(this.mesh) // 网格模型添加到场景中}
3.创建光源
createLight () {// 点光源const point = new THREE.PointLight(0xffffff)point.position.set(400, 200, 300) // 点光源位置this.scene.add(point) // 点光源添加到场景中// 环境光const ambient = new THREE.AmbientLight(0x66666)this.scene.add(ambient)}
4.创建相机
createCamera () {const element = document.getElementById('container')const width = element.clientWidth // 窗口宽度const height = element.clientHeight // 窗口高度const k = width / height // 窗口宽高比const s = 200 // 三维场景显示范围控制系数，系数越大，显示的范围越大// OrthographicCamera(left, right, top, bottom, near, far)this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)this.camera.position.set(200, 300, 200) // 设置相机位置this.camera.lookAt(this.scene.position) // 设置相机方向}
5.创建渲染器
createRender () {const element = document.getElementById('container')this.renderer = new THREE.WebGLRenderer()this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色element.appendChild(this.renderer.domElement)}
6.创建控件对象
createControls () {this.controls = new OrbitControls(this.camera, this.renderer.domElement)}
7.渲染
render () {this.renderer.render(this.scene, this.camera)// 通过requestAnimationFrame实现周期性调用renderrequestAnimationFrame(this.render)}
二、全量示例代码
<template><div><div id="container"></div></div></template><script>import * as THREE from 'three'import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'export default {data () {return {camera: null,scene: null,renderer: null,mesh: null,controls: null}},mounted () {this.init()},methods: {// 初始化init () {this.createScene() // 创建场景this.createMesh() // 创建网格模型this.createLight() // 创建光源this.createCamera() // 创建相机this.createRender() // 创建渲染器this.createControls() // 创建控件对象this.render() // 渲染},// 创建场景createScene () {this.scene = new THREE.Scene()},// 创建网格模型createMesh () {const geometry = new THREE.BoxGeometry(120, 120, 120) // 创建一个立方体几何对象Geometryconst material = new THREE.MeshLambertMaterial({color: 0xe1e1e1}) // 材质对象Materialthis.mesh = new THREE.Mesh(geometry, material) // 网格模型对象Meshthis.scene.add(this.mesh) // 网格模型添加到场景中},// 创建光源createLight () {// 点光源const point = new THREE.PointLight(0xffffff)point.position.set(400, 200, 300) // 点光源位置this.scene.add(point) // 点光源添加到场景中// 环境光const ambient = new THREE.AmbientLight(0x66666)this.scene.add(ambient)},// 创建相机createCamera () {const element = document.getElementById('container')const width = element.clientWidth // 窗口宽度const height = element.clientHeight // 窗口高度const k = width / height // 窗口宽高比const s = 200 // 三维场景显示范围控制系数，系数越大，显示的范围越大// OrthographicCamera(left, right, top, bottom, near, far)this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)this.camera.position.set(200, 300, 200) // 设置相机位置this.camera.lookAt(this.scene.position) // 设置相机方向},// 创建渲染器createRender () {const element = document.getElementById('container')this.renderer = new THREE.WebGLRenderer()this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色element.appendChild(this.renderer.domElement)},render () {this.renderer.render(this.scene, this.camera)// 通过requestAnimationFrame实现周期性调用renderrequestAnimationFrame(this.render)},// 创建控件对象createControls () {this.controls = new OrbitControls(this.camera, this.renderer.domElement)}}}</script><style>#container {position: absolute;width: 100%;height: 100%;}</style>
三、demo验证
demo运行起来，一起验证一下鼠标操作效果
缩放：滚动—鼠标中键
旋转：拖动—鼠标左键
平移：拖动—鼠标右键
