vue使用three.js并导入.obj模型

//下载three.js等依赖
npm install three.js
	//data下面定义的
     canvasDom: null,
     renderer: null,
     scene: null,
     camera: null,
     controls: null,
//在需要用到three.js模型渲染的界面导入
import * as THREE from 'three'
//three.js控制器引入
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
//初始化场景并将obj模型初始化
 initThree () {
      //创建场景
      this.scene = new THREE.Scene();
      //创建相机
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
      this.camera.position.set(0, 2, 6)
      //创建渲染器
      this.renderer = new THREE.WebGLRenderer({
        //抗锯齿
        antialias: true,
      })

      this.renderer.setSize(window.innerWidth / 3, window.innerHeight / 2)

      console.log(window.innerWidth / 3, window.innerHeight / 2, "这是用来测试three.js场景的宽高")


      console.log(this.renderer, 'biubiubiubiubiubibu')

      //把渲染器插入到dom中
      this.$refs.canvasDom.appendChild(this.renderer.domElement)

      //初始化渲染器,渲染背景
      this.renderer.setClearColor("#000");
      this.scene.background = new THREE.Color("#ccc");
      this.scene.environment = new THREE.Color("#ccc");

      this.render()

      //添加网格地面
      const gridHelper = new THREE.GridHelper(10, 10);
      gridHelper.material.opacity = 0.2;
      gridHelper.material.transparent = true;
      this.scene.add(gridHelper)

      //添加控制器

      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.update()


      const loader = new OBJLoader();

      loader.load("./model/test.obj", (gltf) => {
        console.log(gltf, "------我是3D的模型")
        this.scene.add(gltf)
      }, (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      }, (error) => {
        console.log('An error happened');
      })

    },

    render () {
      this.renderer.render(this.scene, this.camera);
      this.controls && this.controls.update();
      requestAnimationFrame(this.render);
    }
//mounted的生命周期添加
 mounted () {
    //初始化three.js
    this.initThree()
  }

参考教程:https://www.bilibili.com/video/BV1Gg411X7FY?p=44&vd_source=4716b12357fe8e4b33b293b4bbbbfcd8

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值