jjzjj

ThreeJS-移动(三)

不穿铠甲的穿山甲 2024-02-05 原文

关键代码

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

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移动renderTHREEconst数码相机前端

有关ThreeJS-移动(三)的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  2. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？

  3. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  4. ruby - 在 ruby​​ Selenium 中移动鼠标(move_to) - 2

    我正在尝试使用Ruby中的SeleniumWebDriver2.4模拟鼠标移动如果我运行测试，是否应该看到鼠标在我的屏幕上移动？我很困惑。我试过很多不同的方法示例代码:require'selenium-webdriver'driver=Selenium::WebDriver.for:firefoxdriver.navigate.to'http://www.google.com'element=driver.find_element(:id,'gbqfba')那我试过了driver.action.move_to(element).performdriver.mouse.move_to(e

  5. threejs 720/360全景工具开发心得 - 2

    前言最近做了一个720全景工具，有很多开发人员觉得全景图很简单，github上也有很多全景图的源码，但当实际使用的时候会发现有很多坑，还达不到真正意义上的商用级别，下面我会把我们开发这个项目遇到的一些坑和解决方案都梳理处理，已经发布到线上https://720.h5ds.com/工具简介：H5-720全景（简称H5-720）是一款基于threejs+h5的全景图制作工具，用户可上传全景图片制作全景图，H5-720可以预设按钮，添加元素，添加热点，添加特效，添加多种交互方式，一键开启重力感应，VR眼镜支持，PC端制作后可以适配多端查看。什么是全景图？在这之前，简单的介绍下全景图，可以360度无死

  6. ruby - 在控制台中向左移动一个字符 - 2

    在控制台中，您可以像这样打印"\b"来删除光标左侧的字符(退格键)print"thelastcharisgoingtobeerased\b"#thelastcharisgoingtobeerased如何只向左移动一个位置而不是删除(向左箭头)？ 最佳答案 这取决于终端类型和连接，但通常可以假定ANSI光标移动，因此光标向左是ESC+'['+'D':print"Thecursorshouldbebetweenthearrows:->参见http://ascii-table.com/ansi-escape-sequences.php获取

  7. ruby - 如何将 Ruby 哈希 "up"中的属性移动一级 - 2

    x={:name=>"John",:data=>{:physical=>{:age=>25,:weight=>150}}}我希望将数据的子属性向上移动一个级别(但不一定只是简单地展平所有属性)。在这种情况下，我基本上想将:physical属性“向上”移动一个级别。我正在尝试这个y=x[:data']y.each{|key|x[key]=y[key]}但是我得到...x=x.except(:data)=>{:name=>"John",[:physical,{:age=>25,:weight=>150}]=>nil}我在找...=>{:name=>"John",:physical=>{:a

  8. ruby - 在 Middleman 中移动博客文章位置 - 2

    我正在为我的网站使用MiddlemanBloggem，但默认情况下，博客文章似乎需要位于/source中，这在查看vim中的树时并不是特别好并尝试在其中找到其他文件之一(例如模板)。通过查看文档，我看不出是否有任何方法可以移动博客文章，以便将它们存储在其他地方，例如blog_articles文件夹或类似文件夹。这可能吗？ 最佳答案 将以下内容放入您的config.rb文件中。activate:blogdo|blog|blog.permalink=":year-:month-:day-:title.html"blog.sources=

  9. ruby-on-rails - 如何将救援 block 移动到方法 - 2

    我的一个模型中有以下方法来保存用户记录:defsave_user(params)beginsave_user_details(params)rescueActiveRecord::RecordInvalid=>ex{success:false,errors:ex.messages}rescueException=>exRails.logger.info(ex.message)Rails.logger.info(ex.backtrace.join(‘\n’){success:false,errors:’Someerroroccurred.}endend我们可以看到rescueblock很

  10. ruby - (Watir webdriver) 在 OSX 10.9 中使用多显示器时如何将浏览器移动到另一个屏幕 - 2

    我知道有一个名为browser.window.move_to(0,0)的函数可以将浏览器移动到不同的位置，但OSX10.9对它来说是全新的。有什么方法可以将浏览器移动到另一个桌面吗？例如。在“桌面2”中触发命令的控制台，但我希望浏览器出现在“桌面1”中。非常感谢! 最佳答案 哈，在我尝试这个之前我正要说这可能是不可能的:browser.window.move_to(-1200,0)我的第二台显示器位于主屏幕的左侧。有效。好问题。您需要花点时间才能正确使用它，但watir似乎能够使用整个显示器Canvas。例如，如果您的显示器位于主屏

随机推荐