Three.js入门-物体缩放以及旋转
|
249
|
0
|
three.js学习

674 字
|
8 分钟

一、缩放

.scale : Vector3

物体的局部缩放。默认值是Vector3( 1, 1, 1 )。

Vector3（三维向量）

该类表示的是一个三维向量（3D vector）。 一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为x、y和z）， 可被用来表示很多事物，例如：
1. 一个位于三维空间中的点。
2. 一个在三维空间中的方向与长度的定义。在three.js中，长度总是从(0, 0, 0)到(x, y, z)的 Euclidean distance（欧几里德距离，即直线距离）， 方向也是从(0, 0, 0)到(x, y, z)的方向。
3. 任意的、有顺序的、三个为一组的数字组合。
4. 其他的一些事物也可以使用二维向量进行表示，比如说动量矢量等等； 但以上这些是它在three.js中的常用用途。
对 Vector3 实例进行遍历将按相应的顺序生成它的分量 (x, y, z)。
cube.scale.set(3, 2, 1);
效果图

或

cube.scale.x = 5
效果图

二、旋转

.rotation : Euler

物体的局部旋转，以弧度来表示。（请参阅Euler angles-欧拉角）

Euler（欧拉角）

欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。
对 Euler 实例进行遍历将按相应的顺序生成它的分量 (x, y, z, order)。

Euler Constructor （欧拉角构造器）

Euler( x : Float, y : Float, z : Float, order : String )

x – (optional) 用弧度表示x轴旋转量。 默认值是 0。
y – (optional) 用弧度表示y轴旋转量。 默认值是 0。
z – (optional) 用弧度表示z轴旋转量。 默认值是 0。
order – (optional) 表示旋转顺序的字符串，默认为’XYZ’（必须是大写）。

1. 以X轴为轴旋转45°

cube.rotation.set(Math.PI / 4, 0, 0);
以X轴为轴旋转45°效果图

2. 边移动边旋转

要实现这个效果，还是在render函数中操作

const render = () => {
    cube.position.x += 0.01; // 每帧以x为轴向前移动0.01
    cube.rotation.x += 0.01; // 每帧旋转0.01弧度
    if(cube.position.x > 5) {
        cube.position.x =0;
    }
    renderer.render(scene, camera);
    // 渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
}
边移动边旋转案例

附：完整代码

/** 
 * Learning4
 * threejs控制3d物体缩放以及旋转
 * Author: Li Jincheng
 * Time: 2023/02/01
*/

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


<script>
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'



export default {
    name: 'Learning4',
    methods: {
        init() {
            // 创建场景
            const scene = new THREE.Scene();

            // 创建（透视投影）相机
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            // 设置相机位置
            camera.position.set(0, 0, 10);
            scene.add(camera);

            // 添加物体
            // 创建几何体
            const cubeGeometry = new THREE.BoxGeometry();
            const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

            // 根据几何体和材质创建物体
            const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

            //修改物体的为位置
            // cube.position.set(5, 0, 0);
            // cube.position.x = 3;
            // 缩放
            // cube.scale.set(3, 2, 1);
            // cube.scale.x = 5
            // 旋转
            // cube.rotation.set(Math.PI / 4, 0, 0);

            // 将几何体添加到场景中
            scene.add(cube);

            // 初始化渲染器
            const renderer = new THREE.WebGLRenderer();

            // 设置渲染的尺寸大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            // console.log(renderer)

            // 将webgl渲染的canvas内容添加到body
            document.body.appendChild(renderer.domElement);

            // // 使用渲染器，通过相机将场景渲染进来
            // renderer.render(scene, camera);

            //创建轨道控制器
            const controls = new OrbitControls(camera, renderer.domElement);

            // 添加坐标轴辅助器
            const axesHelper = new THREE.AxesHelper(5);
            scene.add(axesHelper);

            const render = () => {
                cube.position.x += 0.01;
                cube.rotation.x += 0.01;
                if(cube.position.x > 5) {
                    cube.position.x =0;
                }
                renderer.render(scene, camera);
                // 渲染下一帧的时候就会调用render函数
                requestAnimationFrame(render);
            }

            render();
        }
    },
    mounted() {
        this.init()
    }

}
</script>
上一篇
下一篇