美文网首页
vue-cli中使用threejs, 并实现OrbitContr

vue-cli中使用threejs, 并实现OrbitContr

作者: 风筝啊 | 来源:发表于2021-09-26 11:05 被阅读0次

    主要是接上一篇在vue-cli中使用threejs,并实现鼠标控制移动,以及点击交互效果

    基于在vue-cli中使用threejs,并实现鼠标控制移动,以及点击交互效果这篇的代码结构,添加如下代码

    vue-cli中引入OrbitControls

    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
    
    methods: {
      ...,
      start(){
        ...
        // 添加鼠标控制事件
        this.initControls()
      },
      ...,
      // 鼠标基础控制事件
      initControls(){
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        // 定义左键拖动,滚轮放大缩小,右键不做操作
        this.controls.mouseButtons = {
            LEFT: THREE.MOUSE.PAN,
            MIDDLE: THREE.MOUSE.DOLLY,
            RIGHT: null
        }
        this.controls.update()
      },
    }
    

    OK,基本的姿势已经解锁了。冲刺。

    相关文章

      网友评论

          本文标题:vue-cli中使用threejs, 并实现OrbitContr

          本文链接:https://www.haomeiwen.com/subject/psszgltx.html