前言

上一篇文章Three.js（二）基本结构，我们把基本的代码结构写了，也只能预览到一个面

通常来说，用户要旋转内容去看不同的角度。

这个时候，我们需要一个控制器

这么多个控制器，详情大家去看官网吧OrbitControls

步骤

• 导入控制器

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

其实我们要看到物体旋转，有两个方式，一个是物体自己旋转，一个是我们的眼睛旋转，是吧！

所以呢我们要把相机和渲染器内容交给控制器

new OrbitControls(mCamera, mRender.domElement);

然后每当浏览器刷新的时候，我们就渲染一次

我在method中添加了以下方法

methods: {
            doRender() {
                mRender.render(mScene, mCamera);
                //浏览器渲染的时候，就调用doRender，也就当前方法
                requestAnimationFrame(this.doRender);
            }
        },

效果

参考代码

以下是参考代码

// app.vue
<template>
    <div id="main">
        <div class="left-part"></div>
        <div class="right-part" id="right-part">

        </div>
    </div>
</template>

<script>
    import * as THREE from 'three';
    import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

    let mCamera;
    let mScene;
    let mRender;
    export default {
        methods: {
            doRender() {
                mRender.render(mScene, mCamera);
                //浏览器渲染的时候，就调用doRender，也就当前方法
                requestAnimationFrame(this.doRender);
            }
        },
        mounted() {
            let container = document.getElementById('right-part');
            //相机-->预览内容
            //场景-->类似于容器
            //渲染器-->渲染场景
            //内容-->要被渲染的内容
            //关系：把内容放到场景中，用渲染器渲染，用相机查看
            mScene = new THREE.Scene();
            //fov — 摄像机视锥体垂直视野角度
            //aspect — 摄像机视锥体长宽比
            //near — 摄像机视锥体近端面
            //far — 摄像机视锥体远端面
            mCamera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
            //设置相机的位置
            mCamera.position.set(0, 0, 2);
            //创建一个立方体,我从官网CP的：
            //https://threejs.org/docs/index.html?q=box#api/zh/geometries/BoxGeometry
            let geometry = new THREE.BoxGeometry(1, 1, 1);
            let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
            let cube = new THREE.Mesh(geometry, material);
            //加到场景中
            mScene.add(cube);
            console.log(container.offsetWidth);
            mRender = new THREE.WebGL1Renderer();
            mRender.setSize(container.offsetWidth, container.offsetHeight);
            mRender.render(mScene, mCamera);
            container.appendChild(mRender.domElement);

            new OrbitControls(mCamera, mRender.domElement);
            this.doRender();
        }
    }
</script>

<style>

    .right-part {
        height: 300px;
        width: 300px;
        background: #9988aa;
    }

    .left-part {
        width: 300px;
        height: 300px;
        background: #ff99aa;
    }

    #main {
        display: flex;
    }
</style>

显示坐标轴

为了更加明显的旋转效果，我们可以把坐标轴显示出来

官方文档：AxesHelper

const axesHelper = new THREE.AxesHelper(5);
mScene.add(axesHelper);

红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

也可以修改坐标轴的颜色

axesHelper.setColors(0xff0000,0x00ff00,0x0000ff);

对物体的控制

我们可以让物体旋转，位移，缩放之类的

对于面向对象的变成，我们都大概知道它的一个套路。

如果我们要编辑物体，那么这个物体上具备这样的方法

比如说我们修改前面这个立方体的位置

//设置相机的位置
mCamera.position.set(0, 0, 5);
//创建一个立方体,我从官网CP的：
//https://threejs.org/docs/index.html?q=box#api/zh/geometries/BoxGeometry
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
let cube = new THREE.Mesh(geometry, material);

//x,y,z
cube.position.set(1,0,0);
//或者单独设置
//cube.position.x = 1

效果：

缩放

//缩放
cube.scale.x = 2;

旋转

//旋转:x,y,z
cube.rotation.set(45, 0, 0);