-
three.js实现管道漫游
先看效果：https://live.csdn.net/v/345285
- <div>
- <el-container>
- <el-main>
- <div class="box-card-left">
- <div id="threejs" style="border: 1px solid red">div>
- <div class="box-right">
- <pre style="font-size: 16px">pre>
- <el-button type="primary" @click="Wormhole" round plain>虫洞风格el-button>
- <el-button type="primary" @click="pipeline" round plain>管道风格el-button>
- <br>
- <br>
- <el-button type="primary" @click="start">开始漫游el-button>
- <el-button type="primary" @click="end">结束漫游el-button>
- div>
- div>
- el-main>
- el-container>
- div>
- template>
- <script>
- import Drawer from "@/components/Drawer.vue";
- // 引入轨道控制器扩展库OrbitControls.js
- import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
- import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
- export default {
- components: { Drawer },
- data() {
- return {
- name: "",
- cameraX: 200,
- cameraY: 200,
- cameraZ: 200,
- scene: null,
- camera: null,
- renderer: null,
- mesh: null,
- mesh_sun: null,
- geometry: null,
- group: null,
- axis: null,
- texture: null,
- loader: null,
- animationId: null,
- line: null,
- lineFlag: true,
- circleFlag: true,
- catmullRowCurve3: null,
- controls: null,
- request: null,
- tubeGeometry: null,
- tubeGeometry2: null,
- light: null,
- r: 300,
- angle: 0,
- i: 0,
- points:[]
- };
- },
- created() {},
- mounted() {
- this.name = this.$route.query.name;
- this.init();
- },
- methods: {
- pipeline() {
- this.scene.remove(this.mesh);
- if(this.renderer) {
- this.renderer.render(this.scene, this.camera);
- }
- // 创建纹理加载器对象
- const textLoader = new this.$three.TextureLoader();
- // const texture = textLoader.load(require("../../assets/guan2.jpg"), e => {
- const texture = textLoader.load(require("../../assets/wenli_2.png"), e => {
- e.wrapS = this.$three.RepeatWrapping;
- // e.wrapT = this.$three.RepeatWrapping;
- e.repeat.x = 10;
- this.tubeGeometry2 = new this.$three.TubeGeometry(this.catmullRowCurve3, 100, 10, 36, false);
- const material = new this.$three.MeshLambertMaterial({
- map: e,
- side: this.$three.DoubleSide
- });
- this.mesh_sun = new this.$three.Mesh(this.tubeGeometry,material);
- this.scene.add(this.mesh_sun);
- this.renderer.render(this.scene, this.camera);
- });
- },
- Wormhole() {
- this.scene.remove(this.mesh_sun);
- // 创建管道缓冲几何体
- this.tubeGeometry = new this.$three.TubeGeometry(this.catmullRowCurve3, 100, 10, 36, false);
- // 创建网格材质对象
- const meshBasicMaterial = new this.$three.PointsMaterial({
- color: 0xbbddff,
- // side: this.$three.DoubleSide
- });
- this.mesh = new this.$three.Points(this.tubeGeometry,meshBasicMaterial);
- this.scene.add(this.mesh);
- if(this.renderer) {
- this.renderer.render(this.scene, this.camera);
- }
- },
- end(){
- window.cancelAnimationFrame(this.request)
- },
- goBack() {
- this.$router.go(-1);
- },
- start() {
- window.cancelAnimationFrame(this.request)
- this.points = this.catmullRowCurve3.getPoints(220);
- this.render_flash();
- },
- render_flash() {
- if(this.i < this.points.length-1) {
- this.camera.position.copy(this.points[this.i]);
- this.camera.lookAt(this.points[this.i+1]);
- this.camera.updateProjectionMatrix();
- this.controls.target.copy(this.points[this.i+1]);
- this.controls.update();
- this.i++;
- } else {
- this.i = 0;
- }
- this.renderer.render(this.scene, this.camera);
- this.request = requestAnimationFrame(this.render_flash);
- },
- // 管道漫游案例：首先创建一个管道；管道使用纹理贴图；获取管道的扫描线上的 n个点；相机固定在 i 点， lookAt i+1 点位置；
- init() {
- // 1,创建场景对象
- this.scene = new this.$three.Scene();
- // 创建缓存几何体对象
- this.geomery = new this.$three.BufferGeometry();
- // 创建环境光对象
- this.light = new this.$three.AmbientLight( 0xffffff );
- this.scene.add(this.light);
- // this.light = new this.$three.PointLight( 0xffffff, 1, 0 );
- // this.scene.add( this.light );
- // 通过 Vector3(x,y,z) 创建顶点数据
- var pointsArr = [
- new this.$three.Vector3(0, 0, 0),
- new this.$three.Vector3(100, 0, 0),
- new this.$three.Vector3(100, 0, 100),
- new this.$three.Vector3(0, 100, 100),
- new this.$three.Vector3(-50, 50, 50),
- new this.$three.Vector3(-50, 0, 0),
- new this.$three.Vector3(0, 0, 0),
- ];
- // 创建三维样条曲线对象(参数是三维点数组)
- this.catmullRowCurve3 = new this.$three.CatmullRomCurve3(pointsArr);
- // 获取三维样条曲线上的100个点
- const points = this.catmullRowCurve3.getPoints(220);
- // 设置缓存点模型的点数据
- this.geomery.setFromPoints(points);
- // 创建线材质对象
- this.material = new this.$three.LineBasicMaterial({ color: 0xaabb11 });
- // 创建线模型对象
- this.line = new this.$three.Line(this.geomery, this.material);
- this.scene.add(this.line);// 调用方法生成虫洞风格的效果
- this.Wormhole();
- // 创建透视投影相机对象
- this.camera = new this.$three.PerspectiveCamera(90, 1, 0.01, 3000);
- this.camera.position.set(150, 150, 150);
- this.camera.lookAt(0, 0, 0);
- // 创建辅助坐标轴对象
- const axesHelper = new this.$three.AxesHelper(150);
- this.scene.add(axesHelper);
- // 创建渲染器对象
- this.renderer = new this.$three.WebGLRenderer();
- this.renderer.setSize(1000, 800);
- this.renderer.render(this.scene, this.camera);
- document.getElementById("threejs").appendChild(this.renderer.domElement);
- // 创建空间轨道控制器对象
- this.controls = new OrbitControls(this.camera, this.renderer.domElement);
- this.controls.addEventListener("change", () => {
- this.renderer.render(this.scene, this.camera);
- });
- },
- },
- };
- script>
- //
- <style lang="less" scoped>
- .msg {
- padding: 20px;
- text-align: left;
- display: flex;
- justify-content: flex-start;
- flex-wrap: wrap;
- .span {
- margin: 0 30px 30px 0;
- // white-space: nowrap;
- }
- .p {
- text-align: left;
- }
- }
- .box-card-left {
- display: flex;
- align-items: flex-start;
- flex-direction: row;
- width: 100%;
- .box-right {
- text-align: left;
- padding: 10px;
- .xyz {
- width: 100px;
- margin-left: 20px;
- }
- .box-btn {
- margin-left: 20px;
- }
- }
- }
- style>
-
相关阅读:
Android修行手册 - 一文全了解Kotlin几种静态变量、函数实现的那些事
数据查询优化技术方案
哪些专业跟芯片有关？
七彩动态|棱镜七彩获“北京国家金融科技认证中心”颁发的「金融开源技术服务商能力评估证书」
测试计划包括哪些内容?
【793. 阶乘函数后 K 个零】
手机远程控制plc有什么优势
设计模式之组合模式-创建层次化的对象结构
Python实现猎人猎物优化算法(HPO)优化LightGBM回归模型(LGBMRegressor算法)项目实战
Netty7-Netty核心模块
- 原文地址：https://blog.csdn.net/yinge0508/article/details/134515528
