在vue-cli中使用threejs，并实现鼠标控制移动，以及点

作者: 风筝啊 | 来源:发表于2021-09-24 15:09 被阅读0次

这里假设已经了解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的舞台

初始化舞台，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()
        },
        methods: {
            start(){
                // 初始化三要素
                this.initMain()
                // 启用渲染
                this.render()
            },
            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;
                this.renderer = new THREE.WebGLRenderer({
                    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);
                this.scene.add(light)
            },
            render(){
                // 启动动画
                this.renderer.render(this.scene, this.camera);
                // 动态监听窗口尺寸变化
                if (this.resizeRendererToDisplaySize(this.renderer)) {
                    const canvas = this.renderer.domElement;
                    this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
                    this.camera.updateProjectionMatrix();
                }
                requestAnimationFrame(this.render.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){
                    this.renderer.setSize(this.canvasW, this.canvasH, false);
                }
                return needResize;
            },
        }
    }
</script>

<style>
    html, body{
        height: 100%;
        margin: 0;
        background: #0033CC;
    }
    .c{
        width: 100%;
        height: 100%;
        display: block;
    }
</style>

到这里，基本上你会看到一个白色的地的空白页面，因为还没有往画布里面添加内容

添加形状以及文字
在data中添加

data(){
  return{
    ...,
    planArr: [
      { x: -3, y: 3, name: '第一块区域' },
      { x: 3, y: 3, name: '第二块区域'},
      { x: -3, y: -3, name: '第三块区域' },
      { x: 3, y: -3, name: '第四块区域' }
    ]
  }
}

在methods方法中添加

methods: {
  ...,
  initMain(){
    // 这个是已经有的方法，
    // 只是需要在这里调用一下创建几何体的方法
    ..., 
    // 添加形状
    this.createCube()
  },
  geometry(width, height, depth){
    return new THREE.BoxGeometry(width, height, depth)
  },
  createCube(){
    for(let i = 0; i < this.planArr.length; i++){
        // 添加几何体
        const material = new THREE.MeshPhongMaterial({
            color: 0x8aff58
        })
                    
        const cube = new THREE.Mesh(this.geometry(5, 5, .001), material);
        this.scene.add(cube);
        // 添加名称
        cube.name = this.planArr[i].name
        // 设置几何模型形变
        cube.position.set(this.planArr[i].x, this.planArr[i].y, 0)
    }
  },
}

到这里，你会看到下面的效果图：

image.png

添加鼠标划过方块以及点击方块时的事件

同样首先在data中添加数据

data(){
  return{
    ...,
    events: {
      raycaster: new THREE.Raycaster(),
      pickedObject: null,
      pickedObjectSavedColor: 0,
      pickPosition: { x: 0, y: 0 }
    },
  }
}

在methods中添加方法

methods: {
  ...,
  // 点击当前坐标
            clickPickPosition(){
                this.pickEvents(this.events.pickPosition, this.scene, this.camera, obj=>{
                    obj.userData.checked = !obj.userData.checked;
                    // alert(`您选中了--${obj.name}`)
                    if(!obj.userData.checked){
                        obj.material.color.setHex(0x8aff58)
                        alert(`您已经取消选中--${obj.name}`)
                    }else{
                        obj.material.color.setHex(0xFFFF00)
                        alert(`您选中了--${obj.name}`)
                    }
                })
            },
            // 获取当前焦点坐标
            setPickPosition(event){
                const pos = this.getCanvasRelativePosition(event);
                this.events.pickPosition.x = (pos.x / this.canvas.width) * 2 - 1;
                this.events.pickPosition.y = (pos.y / this.canvas.height) * -2 + 1;
                
                this.pickEvents(this.events.pickPosition, this.scene, this.camera)
            },
            // 获取当前事件焦点坐标所在位置
            getCanvasRelativePosition(event){
                const rect = this.canvas.getBoundingClientRect();
                return {
                    x: (event.clientX - rect.left) * this.canvas.width / rect.width,
                    y: (event.clientY - rect.top) * this.canvas.height / rect.height
                }
            },
            // 添加鼠标划过以及点击事件
            clickEvents(){
                window.addEventListener('click', this.clickPickPosition);   
                window.addEventListener('mousemove', this.setPickPosition);
            },
            // 创建点击事件(默认是离摄像头最近的相交)
            pickEvents(normalizedPosition, scene, camera, callback){
                // 如果存在拾取的对象，则恢复颜色
                if(this.events.pickedObject){
                    this.events.pickedObject.material.emissive.setHex(this.events.pickedObjectSavedColor);
                    this.events.pickedObject = undefined;
                }
                // 沿着摄像头的方向投射射线
                this.events.raycaster.setFromCamera(normalizedPosition, camera)
                // 获取与射线光线相交的对象列表
                const intersectedObjects = this.events.raycaster.intersectObjects(this.scene.children);
                if(intersectedObjects.length){
                    // 获取与射线光纤相交的第一个对象。也是最近的一个
                    this.events.pickedObject = intersectedObjects[0].object;
                    // 保存当前对象的颜色
                    this.events.pickedObjectSavedColor = this.events.pickedObject.material.emissive.getHex();
                    // 将其发射颜色设置为闪烁的红色/黄色
                    this.events.pickedObject.material.emissive.setHex(0xFFFF00)
                    
                    if(callback){
                        callback(this.events.pickedObject)
                    }
                }
            },
}

在methods的initMain方法中调用一下鼠标点击事件

methods: {
  initMain(){
    ...,
    this.clickEvents();
  }
}

至此，基本上已经完全实现效果： 鼠标滑过几何体变成黄色，点击几何体变成黄色
完整版代码中添加了文字

ThreeJS.vue完整版代码：

<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
                },
                planArr: [
                    { x: -3, y: 3, name: '第一块区域' },
                    { x: 3, y: 3, name: '第二块区域'},
                    { x: -3, y: -3, name: '第三块区域' },
                    { x: 3, y: -3, name: '第四块区域' }
                ],
                events: {
                    raycaster: new THREE.Raycaster(),
                    pickedObject: null,
                    pickedObjectSavedColor: 0,
                    pickPosition: { x: 0, y: 0 }
                }
            }
        },
        created() {
            this.canvasW = window.innerWidth;
            this.canvasH = window.innerHeight;
            // 初始化设置宽高比
            this.cameraParam.aspect = this.canvasW / this.canvasH
        },
        mounted(){
            this.start()
        },
        methods: {
            start(){
                // 初始化三要素
                this.initMain()
                // 启用渲染
                this.render()
            },
            initMain(){
                // 初始化三要素
                this.initScene()
                this.initCamera()
                this.initRenderer()
                
                // 添加环境光
                this.addLight()
                
                // 添加形状
                this.createCube()
                
                // 调用点击事件
                this.clickEvents()
            },
            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;
                this.renderer = new THREE.WebGLRenderer({
                    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);
                this.scene.add(light)
            },
            render(){
                // 启动动画
                this.renderer.render(this.scene, this.camera);
                // 动态监听窗口尺寸变化
                if (this.resizeRendererToDisplaySize(this.renderer)) {
                    const canvas = this.renderer.domElement;
                    this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
                    this.camera.updateProjectionMatrix();
                }
                requestAnimationFrame(this.render.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){
                    this.renderer.setSize(this.canvasW, this.canvasH, false);
                }
                return needResize;
            },
            
            // ====================================基础设置完成=======================
            // ====================================创建立方体========================
            geometry(width, height, depth){
                return new THREE.BoxGeometry(width, height, depth)
            },
            createCube(){
                for(let i = 0; i < this.planArr.length; i++){
                    // 添加几何体
                    const material = new THREE.MeshPhongMaterial({
                        color: 0x8aff58
                    })
                    
                    const cube = new THREE.Mesh(this.geometry(5, 5, .001), material);
                    this.scene.add(cube);
                    // 添加名称
                    cube.name = this.planArr[i].name
                    // 设置几何模型形变
                    cube.position.set(this.planArr[i].x, this.planArr[i].y, 0)
                    
                    // 添加文字
                    let texture = new THREE.Texture(this.getTextCanvas(this.planArr[i].name));
                    texture.needsUpdate = true;
                    let spriteMaterial = new THREE.PointsMaterial({
                            map: texture,
                            size: 12,
                            transparent: true,
                            opacity: 1,
                    });
                    //创建坐标点，并将材质给坐标
                    let geometry = new THREE.BufferGeometry();
                    let vertices = [0, 0, 0];
                    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
                    let sprite = new THREE.Points(geometry, spriteMaterial);
                    sprite.position.set(0, 0, .002);
                    
                    cube.add(sprite);
                }
            },
            // 创建文字canvas
            getTextCanvas(text){
                var width=100, height=100; 
                const canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;
                const ctx = canvas.getContext('2d');
                ctx.fillStyle = 'transparent';
                ctx.fillRect(0, 0, width, height);
                ctx.font = '6px';
                ctx.fillStyle = '#2891FF';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(text, width/2,height/2); 
                return canvas;
            },
            // 点击当前坐标
            clickPickPosition(){
                this.pickEvents(this.events.pickPosition, this.scene, this.camera, obj=>{
                    obj.userData.checked = !obj.userData.checked;
                    // alert(`您选中了--${obj.name}`)
                    if(!obj.userData.checked){
                        obj.material.color.setHex(0x8aff58)
                        alert(`您已经取消选中--${obj.name}`)
                    }else{
                        obj.material.color.setHex(0xFFFF00)
                        alert(`您选中了--${obj.name}`)
                    }
                })
            },
            // 获取当前焦点坐标
            setPickPosition(event){
                const pos = this.getCanvasRelativePosition(event);
                this.events.pickPosition.x = (pos.x / this.canvas.width) * 2 - 1;
                this.events.pickPosition.y = (pos.y / this.canvas.height) * -2 + 1;
                
                this.pickEvents(this.events.pickPosition, this.scene, this.camera)
            },
            // 获取当前事件焦点坐标所在位置
            getCanvasRelativePosition(event){
                const rect = this.canvas.getBoundingClientRect();
                return {
                    x: (event.clientX - rect.left) * this.canvas.width / rect.width,
                    y: (event.clientY - rect.top) * this.canvas.height / rect.height
                }
            },
            // 添加鼠标划过以及点击事件
            clickEvents(){
                window.addEventListener('click', this.clickPickPosition);   
                window.addEventListener('mousemove', this.setPickPosition);
            },
            // 创建点击事件(默认是离摄像头最近的相交)
            pickEvents(normalizedPosition, scene, camera, callback){
                // 如果存在拾取的对象，则恢复颜色
                if(this.events.pickedObject){
                    this.events.pickedObject.material.emissive.setHex(this.events.pickedObjectSavedColor);
                    this.events.pickedObject = undefined;
                }
                // 沿着摄像头的方向投射射线
                this.events.raycaster.setFromCamera(normalizedPosition, camera)
                // 获取与射线光线相交的对象列表
                const intersectedObjects = this.events.raycaster.intersectObjects(this.scene.children);
                if(intersectedObjects.length){
                    // 获取与射线光纤相交的第一个对象。也是最近的一个
                    this.events.pickedObject = intersectedObjects[0].object;
                    // 保存当前对象的颜色
                    this.events.pickedObjectSavedColor = this.events.pickedObject.material.emissive.getHex();
                    // 将其发射颜色设置为闪烁的红色/黄色
                    this.events.pickedObject.material.emissive.setHex(0xFFFF00)
                    
                    if(callback){
                        callback(this.events.pickedObject)
                    }
                }
            },
        }
    }
</script>

<style>
    html, body{
        height: 100%;
        margin: 0;
        background: #0033CC;
    }
    .c{
        width: 100%;
        height: 100%;
        display: block;
    }
</style>

最终展示效果：

鼠标划过

第一次点击选中几何体

第二次点击取消选中几何体

在vue-cli中使用threejs，并实现鼠标控制移动，以及点

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读