首先要安装Three.js
import * as Three from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import screenfull from 'screenfull' 全屏需要安装的，如果不做全屏功能就不需要引入
其次模型的位置放入public,再到node_models里面找到Three里面的js，把draco文件复制到publici里面，引入模型.glb格式，格式要注意 loader.load('/波音.gltf.glb', (gltf) => {}）
<templatThreee>
<section>
<section id="container"></section>
<el-button style="color:#918F8F" @click="click">
{{isFullscreen?'退出全屏':'全屏'}}
</el-button>
<div id="canvas"></div>
</section>
</template>
<script>
import * as Three from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
// import $ from 'jquery'
import screenfull from 'screenfull'
export default {
name: 'Index',
data() {
return {
camera: null,
scene: null,
renderer: null,
mesh: null,
isFullscreen: false,
font: {}
}
},
mounted() {
this.init()
this.animate()
},
beforeDestroy() {
this.destroy()
},
methods: {
init() {
if (screenfull.isEnabled) {
screenfull.on('change', this.change)
}
const container = document.getElementById('container')
this.camera = new Three.PerspectiveCamera(90, container.clientWidth / container.clientHeight, 0.1, 10000)
this.renderer = new Three.WebGLRenderer(
{
antialias: true, // true/false表示是否开启反锯齿
alpha: true, // true/false 表示是否可以设置背景色透明
precision: 'highp', // highp/mediump/lowp 表示着色精度选择
premultipliedAlpha: false, // true/false 表示是否可以设置像素深度（用来度量图像的分率）
preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
maxLights: 3, // 最大灯光数
stencil: true // false/true 表示是否使用模板字体或图案
})
// this.camera.position.set(200, 200, 400)
this.camera.position.set(40, 40, 40);
this.scene = new Three.Scene()
this.renderer.setClearColor(new Three.Color(0xF7F2F1))
this.renderer.setSize(container.clientWidth, container.clientHeight)
this.renderer.shadowMap.enabled = true
container.appendChild(this.renderer.domElement)
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.target = new Three.Vector3(0, 0, 0)
let axisHelper = new Three.AxesHelper(20);
this.scene.add(axisHelper);
// 创建光源
const spotLight = new Three.SpotLight(0xffffff, 5); //(光照颜色,光照强度)
console.log(spotLight, 'list');
// 设置光源位置
spotLight.position.set(0, 20, 20);
// 将光源添加到场景中
this.scene.add(spotLight);
let canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 100;
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.font = "20px 宋体";
ctx.lineWidth = 10;
ctx.fillText("模型", 154, 16);
let texture = new Three.Texture(canvas);
texture.needsUpdate = true;
let material = new Three.SpriteMaterial({ map: texture });
let text = new Three.Sprite(material);
text.scale.set(0.5 * 100, 0.25 * 100, 0.75 * 100);
text.position.set(0, 0, 50);
this.scene.add(text)
this.loadLight()
this.load3D()
this.atrs()
},
click() {
if (!screenfull.isEnabled) {
this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
return false
}
screenfull.toggle()
},
//点击全屏按钮全屏
change() {
this.isFullscreen = screenfull.isFullscreen
},
showTip() {
if (this.lastPick) {
const properties = this.lastPick.object.parent.properties
console.log(properties, 'properties');
this.tooltip.textContent = properties.name
this.tooltip.style.visibility = 'visible'
} else {
this.tooltip.style.visibility = 'hidden'
}
},
destroy() {
if (screenfull.isEnabled) {
screenfull.off('change', this.change)
}
},
load3D() {
const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')
dracoLoader.preload()
loader.setDRACOLoader(dracoLoader)
loader.load('/波音.gltf.glb', (gltf) => {
this.scene.add(gltf.scene)
this.renderer.render(this.scene, this.camera)
}, (xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
}, (error) => {
console.error(error)
})
},
loadLight() {
// 点光源
// const point = new Three.PointLight(0xffffff)
// point.position.set(4000, 4000, 4000) // 点光源位置
// this.scene.add(point) // 点光源添加到场景中
// 环境光
const ambient = new Three.AmbientLight(0xFFFFFF)
this.scene.add(ambient)
},
animate() {
requestAnimationFrame(this.animate)
this.renderer.render(this.scene, this.camera)
},
}
}
</script>
<style scoped>
#container {
width: 100%;
height: calc(100vh - 84px);
}
</style>
效果图如下：
