Vue里面使用threeJS 的 OrbitControls报错问题

子规啼518

于 2022-11-04 10:02:12 发布

阅读量1.9k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48203356/article/details/127682391

版权

vue使用 OrbitControls 首先需要按需引入

1、执行 npm install three --save-dev

npm install three --save-dev

2 按需引入

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

3 使用鼠标控制器

  /**
   * 创建渲染器对象
   */
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);//设置渲染区域尺寸
  renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  renderer.render( scene, camera );

  const controls = new OrbitControls( camera, renderer.domElement );
   controls.addEventListener('change', renderer);//监听鼠标、键盘事件

此时使用鼠标控制几何体，肯定会出一个错误如three.module.js?6573:257 Uncaught TypeError: array[i].call is not a function

此时发现出现一个很蠢的错误： addEventListener 第二个参数是一个方法，不能直接把renderer写进去，改成如下就正常了

  const controls = new OrbitControls( camera, renderer.domElement );
  controls.addEventListener('change', ()=>{
      renderer.render( scene, camera );
  });//监听鼠标、键盘事件