标签：vue obj THREE controls js renderer new scene

1、3d图的obj文件要放在静态资源文件下

 2、

import * as THREE from 'three'
import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
const OrbitControls = require('three-orbit-controls')(THREE)

3、data中初始化

  // 相机
      camera: null,
      // 场景
      scene: null,
      // 渲染器对象
      renderer: null,
      // 材质对象
      mesh: null,
      controls: null,

4、

initScene() {
      //创建一个场景
      this.scene = new THREE.Scene()
      //环境光源，颜色会直接作用物体的当前颜色上
      const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4)
      this.scene.add(ambientLight)
      //创建一个可视化的三维坐标系，参数为轴的大小
      var axesHelper = new THREE.AxesHelper(15)
      this.scene.add(axesHelper)
      //方向光源，例如太阳光
      var light = new THREE.DirectionalLight(0xffffff)
      //光源位置
      light.position.set(500, 50, 5)
      //光源添加到场景中
      this.scene.add(light)
      // id = setInterval(draw, 20) //每隔20s重绘一次
    },
    initCamera() {
      const aspect = window.innerWidth / innerHeight
      //透视投影照相机（for,aspect,near,far）
      // 视野角：fov 这里视野角(有的地方叫拍摄距离)越大，场景中的物体越小，视野角越小，场景中的物体越大
      // 纵横比：aspect   (3d物体的宽/高比例)
      // 相机离视体积最近的距离：near
      // 相机离视体积最远的距离：far
      this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 1000)
      this.camera.position.set(15, 25, 20)
      // 让相机指向原点
      this.camera.lookAt(new THREE.Vector3(0, 0, 0))
      const pointLight = new THREE.PointLight(0xffffff, 1, 100)
      pointLight.position.set(0, 0, 20100)
      this.scene.add(pointLight)
      this.scene.add(this.camera)
    },
    initRenderer() {
      //是否开启反锯齿，设置为true开启反锯齿,是否可以设置背景色透明。
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      //像素比
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.setSize(window.innerWidth, innerHeight)
      //渲染到那个容器
      var con = document.getElementsByClassName('ot')
      con[0].appendChild(this.renderer.domElement)
    },
    // 初始化控制器
    initOrbitControls() {
      let controls = new OrbitControls(this.camera, this.renderer.domElement)
      controls.enableDamping = true
      controls.enableZoom = true
      controls.autoRotate = false
      controls.autoRotateSpeed = 3
      controls.enablePan = true
      controls.enableKeys = true
      controls.keyPanSpeed = 7
      controls.keys = {
        LEFT: 25,
        UP: 38,
        RIGHT: 88,
        BOTTOM: 40,
      }
      this.controls = controls
    },
    animate() {
      this.renderer.render(this.scene, this.camera)
      this.requestId = requestAnimationFrame(this.animate)
    },
    init() {
      this.group = new THREE.Group()
      this.initScene()
      this.initCamera()
      this.initRenderer()
      this.initOrbitControls()
    },
    /**加载模型 */
    loadPlant() {
      let that = this
      let objLoader = new OBJLoader()
      let mtlLoader = new MTLLoader()
      mtlLoader.load('/static/models/rx.obj', function (materials) {
        // materials.preload();
        objLoader.setMaterials(materials)
        objLoader.load(
          '/static/models/rx.obj',
          function (obj) {
            obj.position.set(5, 5, 5)
            obj.scale.set(0.002, 0.002, 0.002)
            that.scene.add(obj)
          },
          //   called while loading is progressing
          function (xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
          },
          //   called when loading has errors
          function (error) {
            console.log('An error happened')
          }
        )
      })
    },

5、调用

mounted(){
   this.init()
    this.loadPlant()
    this.animate()
}

标签：vue,obj,THREE,controls,js,renderer,new,scene
来源： https://blog.csdn.net/weixin_41610842/article/details/121292378

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。