当前位置：首页 > news >正文

ThreeJS-缩放、旋转(四)

news 2025/8/2 10:17:01

代码：

<template>

<div id="three_div">

</div>

</template>

<script>

import * as THREE from "three";

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

export default {

name: "HOME",

components: {

// vueQr,

// glHome,

},

data() {

return {

};

},

mounted() {

//使用控制器控制3D拖动旋转OrbitControls

//控制3D物体移动

//1.创建场景

const scene = new THREE.Scene();

console.log(scene)

//2.创建相机

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(2,2,2);

const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00});

//根据几何体和材质创建物体

const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);

//将物体加入到场景

scene.add(mesh);

//添加坐标轴辅助器

const axesHepler = new THREE.AxesHelper(5)

scene.add(axesHepler)

//初始化渲染器

const render = new THREE.WebGLRenderer();

//设置渲染器的尺寸

render.setSize(window.innerWidth, window.innerHeight);

//使用渲染器，通过相机将场景渲染进来

//创建轨道控制器，可以拖动,控制的是摄像头

const controls = new OrbitControls(camera, render.domElement);

//将webgl渲染的canvas内容添加到body上

document.getElementById('three_div').appendChild(render.domElement);

//修改3D位置

mesh.position.set(0, 0, 0);

// render.render(scene, camera);

//渲染下一帧的时候就会调用回调函数

let i=1;

//缩放

mesh.scale.x = 5;

let renderFun = ()=>{

//位移

mesh.position.x += 0.02*i;

//旋转吧

mesh.rotation.x += 0.01;

// mesh.scale.x += 0.02*i;

if(mesh.position.x >= 5){

i = -1;

}

if(mesh.position.x <= 0){

i = 1;

}

console.log(1)

//需要重新绘制canvas画布

render.render(scene, camera);

//监听屏幕刷新（60HZ,120HZ），每次刷新触发一次requestAnimationFrame回调函数

//但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果

window.requestAnimationFrame(renderFun);

}

// window.requestAnimationFrame(renderFun);

renderFun();

},

methods: {

},

};

</script>

<style scoped lang="scss">

</style>