在vue中使用threejs,建3D图
前言: 记录在vue中使用threejs步骤:
一、安装
npm install three --save
安装完成如下图:
二、 引入
// 引入threejs核心模块 import * as THREE from "three" // 引入OrbitControls import { OrbitControls } from "three/examples/jsm/controls/OrbitControls" // 引入FBXLoader // import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader" // 引入GLTFLoader // import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
需要引入模块儿不知道路径可以在node_modules去找到three -> examples -> jsm中去寻找。js目录下放的是非模块化的js文件,直接用script src去引入的。jsm目录下放的是模块化的文件。按需去引入即可
三、 创建场景
<template> <div class="webgl-container"> <div id="webglDom"ref="webglDom"></div> </div> </template> <script> // 引入threejs核心模块 import * as THREE from "three" // 引入OrbitControls import { OrbitControls } from "three/examples/jsm/controls/OrbitControls" // 引入FBXLoader // import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader" // 引入GLTFLoader // import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader" export default { name: 'ThreePage', data () { return { scene: null, camera: null, renderer: null, textloader: null, width: 0, height: 0, } }, watch: { skyType () { this.addSkeyBox(); } }, mounted () { this.$nextTick(this.init); }, methods: { init () { // 初始化画布宽高 const container = this.$refs.webglDom; this.width = container.offsetWidth; this.height = container.offsetHeight; // 场景 this.scene = new THREE.Scene(); this.scene.fog = new THREE.Fog(0x005577, 1, 2800) this.textloader = new THREE.TextureLoader(); // 相机 this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.01, 10000); this.camera.position.set(860, 470, 720); this.add(this.camera); this.camera.lookAt(this.scene.position); // AxesHelper let axisHelper = new THREE.AxesHelper(100, 100); this.add(axisHelper); // 添加灯光 this.addLight(); this.addBox(); // 渲染器 this.renderer = new THREE.WebGLRenderer({ antialias: true }) this.renderer.setClearColor(new THREE.Color('#000000'), 1); this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); this.renderer.setSize(this.width, this.height); document.getElementById("webglDom").appendChild(this.renderer.domElement); // OrbitControls new OrbitControls(this.camera, this.renderer.domElement); this.render(); }, addBox () { const geometry = new THREE.BoxBufferGeometry(300, 300, 300); const material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); const mesh = new THREE.Mesh(geometry, material); this.add(mesh); }, addLight () { // 环境光 const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light this.add(light); // // 平行光源 const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(200, 600, 200); this.add(directionalLight); }, add (obj) { this.scene.add(obj); }, render () { this.renderer.render(this.scene, this.camera); requestAnimationFrame(this.render); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> #webglDom, .webgl-container { width: 100%; height: 100%; overflow: hidden; } </style>
四、 效果图
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了