Three.js入门-使用轨道控制器
|
217
|
0
|
three.js学习

552 字
|
8 分钟

一、轨道控制器介绍

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。

二、在项目中使用

1. 导入轨道控制器

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

2. 创建场景、相机和物体，并将相机和物体添加到场景中，创建渲染器并将webgl渲染的canvas内容添加到body

// 创建场景
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);

// 将几何体添加到场景中
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);

3. 在使用渲染器，通过相机将场景渲染进来之前，创建轨道控制器

OrbitControls( object : Camera, domElement : HTMLDOMElement )

object：（必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。
domElement：用于事件监听的HTML元素。
const controls = new OrbitControls(camera, renderer.domElement);

4. 接着为了让浏览器每重绘一帧都重新调用一次这个渲染器，重新渲染一下画面，这样，当内容发生变化，画面才会跟着渲染出来

window.requestAnimationFrame

window.requestAnimationFrame(callback) 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
const render = () => {
    renderer.render(scene, camera);

    // 渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
}

render();

5. 为了让物体姿态更加直观，可以添加坐标轴辅助器

AxesHelper( size : Number )

size — （可选的）表示代表轴的线段长度. 默认为 1.
红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

此时，就完成了轨道控制器的添加

效果图

附：完整代码

/** 
 * Learning2
 * threejs使用轨道控制器
 * Author: Li Jincheng
 * Time: 2023/01/31
*/

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


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



export default {
    name: 'Learning2',
    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);

            // 将几何体添加到场景中
            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 = () => {
                renderer.render(scene, camera);
                // 渲染下一帧的时候就会调用render函数
                requestAnimationFrame(render);
            }

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

}
</script>
上一篇
下一篇