0
点赞
收藏
分享

微信扫一扫

Threejs相机控件的定义及使用

Threejs相机控件的定义及使用

文档地址: http://www.webgl3d.cn/pages/837374/

案例 · 效果图:

  • 截图如下:

Threejs相机控件的定义及使用_控件

Threejs相机控件的定义及使用_ide_02


重要代码:

  • 代码:

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>

完结。

举报

相关推荐

0 条评论