渲染效果如下:
实现步骤:
- 引入three.js相关依赖: npm install three
- 准备模型文件:改项目中使用的模型类型为fbx('需要模型关注“极光游戏工作室”公众号下载)
- 注意事项:项目中引入模型路径必须使用绝对路径,否则找不到;
- 将模型文件放入public文件下的model文件下
5
实现代码:
<template>
<div id="model"></div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
export default {
data() {
return {
camera: null,
scene: null,
renderer: null,
controls: null,
modelPath: "/model/Reaction.fbx"
};
},
methods: {
init() {
let self = this;
let container = document.getElementById("model");
let mouse = new THREE.Vector2();
self.camera = new THREE.PerspectiveCamera(
45,
container.clientWidth / container.clientHeight,
0.01,
2000
);
self.camera.position.set(100, 200, 300);
self.scene = new THREE.Scene();
// ground
var mesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2000, 2000),
new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })
);
mesh.rotation.x = -Math.PI / 2;
mesh.receiveShadow = true;
self.scene.add(mesh);
var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
grid.material.opacity = 0.2;
grid.material.transparent = true;
self.scene.add(grid);
self.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
precision: "highp"
});
self.renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(self.renderer.domElement)
self.controls = new OrbitControls(self.camera, self.renderer.domElement);
self.controls.target.set(0, 100, 0);
self.controls.update();
var light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 200, 0);
self.scene.add(light);
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 200, 100);
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 120;
self.scene.add(light);
let fbxLoader = new FBXLoader();
fbxLoader.load(self.modelPath, function (object) {
self.scene.add(object);
});
},
animate() {
requestAnimationFrame(this.animate);
this.renderer.clear();
this.renderer.render(this.scene, this.camera);
this.renderer.clearDepth();
}
},
mounted() {
this.init();
this.animate();
}
};
</script>
<style scoped>
#model {
width: 100vw;
height: 100vh;
background-image: radial-gradient(red, yellow, green);
}
</style>