在vue-cli中使⽤threejs，并实现⿏标控制移动，以及点击交互效
果
这⾥假设已经了解threejs中基本的三要素等基础知识
如题，前戏不多，直接提上阵
第⼀步： 创建⼀个vue-cli项⽬
按照vue-cli官⽹⽅式创建 , 这⾥话不多说，不需要过多设置，能运⾏起来就欧克（当然是vue2.x）。
第⼆步： 安装threejs插件
完全可以按照threejs官⽹的教程安装
注意：如果打开为英⽂状态，可以在左上⾓那个地⽅点击en，切换成中⽂
image.png
第三步： 初始项⽬展⽰页⾯
安装完成之后，运⾏项⽬， 当然没什么屌变化，还是初始界⾯。
所以现在以组件的形式继续实现标题内容。
这⾥只在vue-cli中运⾏threejs，所以不安装其他插件，⼲扰视线
image.png
上图是⽬录结构，下⾯的代码内容主要是在ThreeJs组件中实现。所以，⽬前主要是先把测试ThreeJs
是否能正常引⼊并展⽰。（PS： 按照HelloWorld组件的⽅式，基本上不会出错）
App.vue中的代码：
image.png
ThreeJs中的代码:
image.png 到⽬前为⽌，基本上页⾯上会展⽰ hello-threejs
image.png 第四步：开始在ThreeJS组件中，实现threejs的舞台
1. 初始化舞台，ThreeJs组件
<template>
<div>
<canvas class="c" ref="ThreeJS"></canvas>
</div>
</template>
<script>
import * as THREE from 'three'
export default{
data(){
return{
scene: null,
camera: null,
cameraPole: null,
renderer: null,
canvas: null,
canvasW: 0,
canvasH: 0,
cameraParam: {
fov: 30,
aspect: 2,
near: .1,
far: 200
},
}
},
created() {
this.canvasW = window.innerWidth;
this.canvasH = window.innerHeight;
// 初始化设置宽⾼⽐
this.cameraParam.aspect = this.canvasW / this.canvasH
},
mounted(){
this.start()
this.start()
},
methods: {
start(){
// 初始化三要素
this.initMain()
// 启⽤渲染
},
initMain(){
// 初始化三要素
this.initScene()
this.initCamera()
this.initRenderer()
// 添加环境光
this.addLight()
},
initScene(){
// 创建场景
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color('white');
},
initCamera(){
// 创建透视摄像头
const cP = this.cameraParam;
this.camera = new THREE.PerspectiveCamera(cP.fov, cP.aspect, cP.near, cP.far);
this.camera.position.z = 30;
this.scene.add(this.camera)
},
initRenderer(){
// 渲染器
this.canvas = this.$refs.ThreeJS;
canvas: this.canvas,
antialias: true,//是否开启反锯齿，设置为true开启反锯齿。
alpha: true,//是否可以设置背景⾊透明。
logarithmicDepthBuffer: true//模型的重叠部位便不停的闪烁起来。这便是Z-Fighting问题，为解决这个问题，我们可以采⽤该种⽅法                })
},
addLight(){
// 环境光
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.AmbientLight(color, intensity);
js控制滚动条this.scene.add(light)
},
render(){
// 启动动画
// 动态监听窗⼝尺⼨变化
if (derer)) {
const canvas = derer.domElement;
this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
this.camera.updateProjectionMatrix();
}
der.bind(this))
},
resizeRendererToDisplaySize(renderer){
const canvas = renderer.domElement;
this.canvasW = window.innerWidth;
this.canvasH = window.innerHeight;
const needResize = canvas.width !== this.canvasW || canvas.height !== this.canvasH;
if(needResize){
}
return needResize;
},
}
}
</script>
<style>
html, body{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。