Threejs相机控件的定义及使用
文档地址: http://www.webgl3d.cn/pages/837374/
案例 · 效果图:
- 截图如下:
重要代码:
- 代码:
import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
注意:
- 如果版本不同,可能会出现引入
OrbitControls.js
失败的情况, 可在/node_modues/three/目录下
进行搜索对应文件,然后拷贝路径使用即可。
// 添加辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(15);//数值代表坐标轴线段长度(红R、绿G、蓝B分别对应坐标系的x、y、z轴)
scene.add(axesHelper);
// 添加相机控件(设置相机控件轨道控制器OrbitControls)
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
// 浏览器控制台查看相机位置变化
console.log('camera.position',camera.position);
renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件
附:案例源码:
- 全部代码:
<template>
<div class="app-container">
<div ref="container" id="container"></div>
</div>
</template>
<script>
import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default {
name: 'VR',
data() {
return {
sceneUrl: 'http://localhost:81/static/img/profile.473f5971.jpg', // 需要预览的图片绝对路径
camera: null,
scene: null,
renderer: null,
isUserInteracting: false,
onPointerDownPointerX: 0,
onPointerDownPointerY: 0,
lon: 0,
onPointerDownLon: 0,
lat: 0,
onPointerDownLat: 0,
phi: 0,
theta: 0,
target: new THREE.Vector3()
}
},
mounted() {
this.init();
},
methods: {
init(){
console.log("init")
// 不同硬件设备的屏幕的设备像素比window.devicePixelRatio值可能不同
console.log('查看当前屏幕设备像素比',window.devicePixelRatio);
//1. 创建场景和摄像机
const scene = new THREE.Scene();
// 2. 创建摄像机
// const camera = new THREE.PerspectiveCamera('视角', '指投影窗口的长宽比', '表示从距离摄像机多远的位置开始渲染', '表示距离摄像机多远的位置截止渲染 1000')
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1 , 1000)
// 创建ThreeJS渲染器
const renderer = new THREE.WebGLRenderer({antialias: true});// new THREE.WebGLRenderer();
// 设置渲染器场景的大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 把渲染器添加到我们的页面中去
// document.body.appendChild(renderer.domElement);
this.$refs.container.appendChild(renderer.domElement)
// 创建基础几何模型(在场景中添加几何物品)
// const geometry = new THREE.BoxGeometry(40,40,40);//BoxGeometry('X轴的长', 'Y轴的长', 'Z轴的长'):长方体
// const geometry = new THREE.SphereGeometry(30);// SphereGeometry:球体
const geometry = new THREE.CylinderGeometry(20,15,10,4,3,false,0,4);// CylinderGeometry:圆柱
// const geometry = new THREE.PlaneGeometry(50,20);// PlaneGeometry:矩形平面
// const geometry = new THREE.CircleGeometry(20);// CircleGeometry:圆形平面
//矩形几何体PlaneGeometry的参数3,4表示细分数,默认是1,1
// const geometry = new THREE.PlaneGeometry(80,40,2,1);
// 创建纹理贴图
const texture = new THREE.TextureLoader().load(require("@/views/example/vr/images/wenli_07.png"));
// 创建材质
const material = new THREE.MeshBasicMaterial({
// color: 0x00ff00,
map: texture,
side: THREE.DoubleSide, // 默认THREE.FrontSide 只有正面可见,THREE.BackSide 设置只有背面可见,THREE.DoubleSide 两面可见
});
material.transparent = true;//开启透明
material.opacity = 0.5;//设置透明度
// 创建网络对象
const cube = new THREE.Mesh(geometry, material);
// 把网格对象添加到场景中去
scene.add(cube)
// 添加辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(15);//数值代表坐标轴线段长度(红R、绿G、蓝B分别对应坐标系的x、y、z轴)
scene.add(axesHelper);
// 添加相机控件(设置相机控件轨道控制器OrbitControls)
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
// 浏览器控制台查看相机位置变化
console.log('camera.position',camera.position);
renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件
//添加帧渲染
function animate(){
requestAnimationFrame(animate)
/*// 网格对象自动旋转
cube.rotation.x += 0.005
cube.rotation.y += 0.005*/
// 渲染器渲染场景和照相机
renderer.render(scene, camera)
}
animate()
// 摄像机空间Z轴位置
camera.position.z = 100;// 数值越大,模型距离屏幕感觉越远
// 动态响应窗口缩放尺寸
window.addEventListener('resize', () => {
// 初始化摄像机
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix()// 初始化摄像机矩阵投影
// 初始化渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight)
})
},
}
}
</script>
<style type="text/css">
#container {
width: 100%;
height: 100vh;
background: #eee;
}
</style>
完结。