ThreeJS-移动(三)

这篇具有很好参考价值的文章主要介绍了ThreeJS-移动(三)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

关键代码

通过设置定位信息进行移动

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

拖动物体:按住ctrl+按住鼠标左键 进行拖动

代码: 

<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;

    let renderFun = ()=>{

      mesh.position.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>

效果图:

 ThreeJS-移动(三)文章来源地址https://www.toymoban.com/news/detail-496510.html

到了这里,关于ThreeJS-移动(三)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包