import * as THREE from 'three'
import {STLLoader} from ‘three/examples/jsm/loaders/STLLoader’ //一定要从jsm中引入loader文件,否则会报错导致文件无法加载,同时STLLoader需要用大括号包含,作为一个结构体
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls' //同样需要从jsm中引入,也要作为一个结构体
后续就可以正常按照three.js加载模型语法进行编写了(因为使用的是Vue,所以data中定义省略)
<template>
<div id="Container" style="width: 1000px;height: 800px;"></div>
</template>
<script>
let container = document.getElementById('container')
this.camera = new THREE.PerspectiveCamera(30, document.getElementById('container').clientWidth /
document.getElementById('container').clientHeight, 1, 2000);
this.camera.position.set(-200, 150, 250);
this.scene = new THREE.Scene()
var pointLight = new THREE.PointLight(0xffffff, 1);
this.camera.add(pointLight);
this.scene.add(this.camera);
// 显示坐标系
var axes = new THREE.AxesHelper(50);
this.scene.add(axes)
this.renderer = new THREE.WebGLRenderer({alpha: true});
this.renderer.setClearAlpha(0);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(container.clientWidth, container.clientHeight)
container.appendChild(this.renderer.domElement)
</script>
在写完相机和场景之后,就可以进行进行模型的加载了,代码如下:
new STLLoader().load('/static/BMW.stl', geometry => {
console.log(geometry)
let material = new THREE.MeshPhongMaterial({
color: 0xffffff,
wireframe: true
})
this.mesh = new THREE.Mesh(geometry, material)
this.mesh.position.set(0, 0, 0)
this.scene.add(this.mesh)
this.renderer.render(this.scene, this.camera)
}, event => {
console.log(event)
},
onerror => {
console.log(onerror)
})
在引用时,请注意一下几点:
1.要从three.js的examples/jsm中引用loader函数,从js目录下引用会产生错误
2.模型文件放到static目录下,个人尝试,放到相同目录使用相对路径查找,无法显示
网友评论