1.实现效果
2.代码
1.npm安装three.js
复制代码
npm install three
2.引入three.js
复制代码
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
3.初始化模型
javascript
复制代码
init(val) {
this.container = document.querySelector('.container')
// 初始场景
this.scene = new THREE.Scene()
// 初始化相机
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 相机位置
this.camera.position.z = 5
// 初始化渲染器
this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(window.innerWidth, window.innerHeight)
// 添加球体方式一：对于.hdr图片
// 添加球体方式二：对于.jpg .png图片
const geometry = new THREE.SphereGeometry(5, 32, 32)
const meterial = new THREE.MeshBasicMaterial()
// 这里图片的地址val默认位置在public文件下方，所以测试的图片直接添加在public文件夹内部即可，val格式'./images/demo1.jpg'
let texture = new THREE.TextureLoader().load(val)
meterial.map = texture
this.sphere = new THREE.Mesh(geometry, meterial)
// 改变视角，进入球体内部
this.sphere.geometry.scale(1, 1, -1)
this.scene.add(this.sphere)
// 添加控制器，控制视角
const controls = new OrbitControls(this.camera, this.container)
// controls.enableDamping = true
// 容器上面添加渲染器
this.container.appendChild(this.renderer.domElement)
// 逐帧渲染
const circleRender = () => {
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(circleRender)
}
circleRender()
},
4.展示结束销毁模型
javascript
复制代码
disposeThreeJS() {
if (this.renderer) {
this.renderer.domElement.remove(); // 从DOM中移除渲染器元素
this.renderer.dispose();
}
if (this.sphere && this.sphere.geometry) {
this.sphere.geometry.dispose();
}
if (this.sphere && this.sphere.material) {
this.sphere.material.dispose();
}
if (this.controls) {
// OrbitControls没有直接的dispose方法，但可以通过设置引用为null来释放它
this.controls.dispose = () => { }; // 假设你有一个空方法来标记它已被"处理"
this.controls = null;
}
// 注意：场景和相机通常不需要显式销毁，除非你有大量的资源需要清理
// 但为了完整性，你可以将它们设置为null
this.scene = null;
this.camera = null;
},
5.测试图片
