Vue中Three.js的天空盒

踩坑：vue使用three.js中CubeTextureLoader()加载图片不能直接使用load()路径获取,如.load( [ ‘…/…/img/posx.jpg’, ] )。。

。需要先require(’…/assets/xxxxx’)

<template><div id="blocker" style="height: 100%"  ><div id="container" ref="ray"></div></div>
</template><script>import * as Three from '../../node_modules/three/build/three.module.js';//import * as Three from 'three'import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js'export default {name: 'ThreeTest',data() {return {camera: null,scene: null,renderer: null,mesh: null,controls:"",intersections:null,objects : [],clock:"",moveForward:false,moveLeft:false,moveBackward:false,moveRightInit:false,direction : new Three.Vector3(),velocity : new Three.Vector3(),prevTime : performance.now(),group:"",posx:require('../assets/img/posx.jpg'),negx:require('../assets/img/negx.jpg'),posy:require('../assets/img/posy.jpg'),negy:require('../assets/img/negy.jpg'),posz:require('../assets/img/posz.jpg'),negz:require('../assets/img/negz.jpg')}},methods: {init() {this.initScene()//场景对象this.initCamera()//相机this.initWebGLRenderer()//渲染器this.initAxisHelper()//辅助坐标this.render()this.createControls()//控件对象},创建场景对象SceneinitScene(){let that=thisthat.scene = new Three.Scene();// 默认您已经创建了相机和渲染器，就直接在场景上加入背景就行that.scene.background = new Three.CubeTextureLoader().load( [ that.posx, that.negx, that.posy, that.negy, that.posz, that.negz ] );//添加天空盒子背景图},相机initCamera(){let container = document.getElementById('container');this.camera = new Three.PerspectiveCamera(60, container.clientWidth/container.clientHeight, 1, 1000);this.camera.position.set(292, 109, 268);//设置相机位置this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)//this.scene.fog = new Three.Fog(0x43CD80, 1, 10);},// 网格initGrid() {let gridHelper = new Three.GridHelper(2, 50, 0xff00ff, 0x808080);this.scene.add(gridHelper);},//创建渲染器对象initWebGLRenderer(){this.renderer = new Three.WebGLRenderer({antialias: true});this.renderer.setSize(container.clientWidth, container.clientHeight);//设置渲染区域尺寸//this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色container.appendChild(this.renderer.domElement);//body元素中插入canvas对象},//辅助三维坐标系AxisHelperinitAxisHelper(){this.axisHelper = new Three.AxisHelper(250);this.scene.add(this.axisHelper);},render:function(){let that=this//this.mesh.rotation.x+=0.01requestAnimationFrame(that.render); //请求再次执行渲染函数renderthat.renderer.render(that.scene,that.camera);//执行渲染操作},// 创建控件对象createControls () {this.controls = new OrbitControls(this.camera,this.renderer.domElement)}},mounted() {this.init();this.render();}}
</script>
<style scoped>#container {width: 100%;height: 100%;}#blocker {position: absolute;margin: 0;padding: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);}
</style>

Vue中Three.js的天空盒相关推荐

Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
Vue中向js中传递参数并在js中定义对象并转换参数
场景有下面这种主从表结构上面的信息是主表的信息,下面是从表的信息. 在Vue中将页面的信息传递到js的方法中,在js方法中将参数进行转换使其与后台接收的参数相匹配. 注: 博客: https:// ...
vue中使用js进行AES加密及解密（含密钥和iv偏移量）、以及HMAC-SHA256加密方法对于签名加密的使用
一.AES加密解密 1.下载安装 npm install crypto-js --save-dev 2.在utils文件夹下创建encryp.js文件进行aes加密解密工具类方法的封装 import ...
js 获取vue组件html_关于Vue中main.js，App.vue，index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
浅析vue中wavesurfer.js的Minimap插件的使用
前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/104635357 1.Minimap插件的使 ...
vue中引入js，然后new js里的方法
阿里云Web播放器Web端使用SDK说明:https://help.aliyun.com/document_detail/51991.html?spm=5176.11065259.1996646101 ...
Vue中Share.js分享组件
Share.js是一款一键转发工具,它可以一键分享到新浪微博.微信.QQ空间.QQ好友.腾讯微博.豆瓣.Facebook组件.Twitter.Linkedin.Google+.点点等社交网站,使用字体 ...
vue中通过js控制页面样式方法
在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...

Vue中Three.js的天空盒

踩坑：vue使用three.js中CubeTextureLoader()加载图片不能直接使用load()路径获取,如.load( [ ‘…/…/img/posx.jpg’, ] )。。

Vue中Three.js的天空盒相关推荐

最新文章

热门文章