|
|
@@ -0,0 +1,159 @@
|
|
|
+<template>
|
|
|
+ <div class="mode">
|
|
|
+ <canvas ref="three"></canvas>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as THREE from 'three';
|
|
|
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
|
|
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
|
|
|
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scene: null,
|
|
|
+ light: null,
|
|
|
+ camera: null,
|
|
|
+ renderer: null,
|
|
|
+ controls: null,
|
|
|
+ mesh: null,
|
|
|
+ angularSpeed: 0.2,
|
|
|
+ lastTime: 0,
|
|
|
+ farmeCount: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ const scene = new THREE.Scene();
|
|
|
+ scene.background = new THREE.Color('#181818');
|
|
|
+ const canvas = this.$refs.three;
|
|
|
+ const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
|
|
|
+ const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
|
+ camera.position.z = 90;
|
|
|
+ this.scene = scene;
|
|
|
+ this.camera = camera;
|
|
|
+ this.renderer = renderer;
|
|
|
+ const fbxLoader = new FBXLoader();
|
|
|
+ var mesh = null;
|
|
|
+ fbxLoader.load('https://zhirongip.oss-cn-hangzhou.aliyuncs.com/cs_xong.FBX', fbx => {
|
|
|
+ console.log(fbx);
|
|
|
+ mesh = fbx;
|
|
|
+ mesh.scale.multiplyScalar(0.3);
|
|
|
+ mesh.position.set(0, 0, 0);
|
|
|
+ // mesh.rotation.x = -45;
|
|
|
+ //添加这段代码
|
|
|
+ //遍历模型每部分
|
|
|
+ // mesh.traverse(o => {
|
|
|
+ // //将图片作为纹理加载
|
|
|
+ // let explosionTexture = new THREE.TextureLoader().load(
|
|
|
+ // 'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/matilda/textures/color.2.1001.png'
|
|
|
+ // );
|
|
|
+ // //调整纹理图的方向
|
|
|
+ // explosionTexture.flipY = true;
|
|
|
+ // //将纹理图生成基础网格材质(MeshBasicMaterial)
|
|
|
+ // const material = new THREE.MeshBasicMaterial({
|
|
|
+ // map: explosionTexture
|
|
|
+ // });
|
|
|
+ // //给模型每部分上材质
|
|
|
+ // o.material = material;
|
|
|
+ // });
|
|
|
+ scene.add(fbx);
|
|
|
+ });
|
|
|
+
|
|
|
+ const controls = new OrbitControls(camera, renderer.domElement);
|
|
|
+ controls.enableDamping = true;
|
|
|
+ const clock = new THREE.Clock();
|
|
|
+ function animate() {
|
|
|
+ controls.update();
|
|
|
+ renderer.render(scene, camera);
|
|
|
+ requestAnimationFrame(animate);
|
|
|
+
|
|
|
+ const time = Date.now() * 0.0005;
|
|
|
+ const delta = clock.getDelta();
|
|
|
+
|
|
|
+ if (mesh) mesh.rotation.y -= 0.5 * delta;
|
|
|
+
|
|
|
+ //添加下面代码
|
|
|
+ if (resizeRendererToDisplaySize(renderer)) {
|
|
|
+ const canvas = renderer.domElement;
|
|
|
+ camera.aspect = canvas.clientWidth / canvas.clientHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ animate();
|
|
|
+
|
|
|
+ function resizeRendererToDisplaySize(renderer) {
|
|
|
+ const canvas = renderer.domElement;
|
|
|
+ var width = window.innerWidth;
|
|
|
+ var height = window.innerHeight;
|
|
|
+ var canvasPixelWidth = canvas.width / window.devicePixelRatio;
|
|
|
+ var canvasPixelHeight = canvas.height / window.devicePixelRatio;
|
|
|
+
|
|
|
+ const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height;
|
|
|
+ if (needResize) {
|
|
|
+ renderer.setSize(width, height, false);
|
|
|
+ }
|
|
|
+ return needResize;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rorateAnimate() {}
|
|
|
+ // init() {
|
|
|
+ // this.scene = new THREE.Scene();
|
|
|
+ // this.scene.add(new THREE.AmbientLight(0x404040, 6)); //环境光
|
|
|
+ // this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
|
|
|
+ // this.light.position.set(50, 200, 100);
|
|
|
+ // this.light.position.multiplyScalar(0.3);
|
|
|
+ // this.scene.add(this.light);
|
|
|
+ // /**
|
|
|
+ // * 相机设置
|
|
|
+ // */
|
|
|
+ // let container = this.$refs.three; //显示3D模型的容器
|
|
|
+ // this.camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10);
|
|
|
+ // this.camera.position.z = 1;
|
|
|
+ // /**
|
|
|
+ // * 创建渲染器对象
|
|
|
+ // */
|
|
|
+ // this.renderer = new THREE.WebGLRenderer({ alpha: true });
|
|
|
+ // this.renderer.setSize(container.clientWidth, container.clientHeight);
|
|
|
+ // container.appendChild(this.renderer.domElement);
|
|
|
+ // //创建控件对象
|
|
|
+ // this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
|
|
+ // },
|
|
|
+ // loadFbx() {
|
|
|
+ // let self = this;
|
|
|
+ // let fbxLoader = new FBXLoader();
|
|
|
+ // //load一个测试模型路径：public/model/zhuozi2.gltf
|
|
|
+ // fbxLoader.load('https://zhirongip.oss-cn-hangzhou.aliyuncs.com/cs_xong.FBX', function (fbx) {
|
|
|
+ // self.isLoading = false; //关闭载入中效果
|
|
|
+ // self.mesh = fbx;
|
|
|
+ // // self.mesh.scale.set(0.4, 0.4, 0.4); //设置大小比例
|
|
|
+ // // self.mesh.position.set(0, 0, 0); //设置位置
|
|
|
+ // self.scene.add(self.mesh); // 将模型引入three、
|
|
|
+ // self.animate();
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // animate() {
|
|
|
+ // if (this.mesh) {
|
|
|
+ // requestAnimationFrame(this.animate);
|
|
|
+
|
|
|
+ // // this.mesh.rotation.x += 0.01;
|
|
|
+ // this.mesh.rotation.y += 0.004;
|
|
|
+ // this.renderer.render(this.scene, this.camera);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.mode {
|
|
|
+ canvas {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vw;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
panhui