ThreeJS-缩放、旋转(四)

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

代码:

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

 效果:

ThreeJS-缩放、旋转(四)文章来源地址https://www.toymoban.com/news/detail-482967.html

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

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

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

相关文章

  • Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls

    正投影相机和透视相机的区别 如果都以高处俯视去看整个场景,正投影相机就类似于 2d 的可视化的效果,透视相机就类似于人眼观察效果 调整 left, right, top, bottom 范围大小 如果你想整体预览全部立方体,就需要调整相机的渲染范围,比如设置上下左右的范围。 使用场景:正

    2024年02月04日
    浏览(44)
  • 【VUE】Unterminated template literal:拼接字符串包括<script></script>时报错误

    vue拼接字符串包括script标签时报错误提示Unterminated template literal解决方法加反斜杠就可以,在script结束标签里边加反斜杠 /script

    2024年02月13日
    浏览(64)
  • Three.JS教程5 threejs中的材质

    Three.js中的材质(Material)是实现引人注目的3D效果的关键组件之一。本篇博客中,我们将深入探讨Three.js中的材质类型、属性和用法。 在Three.js中,材质是应用于几何体(Geometry)的外观和纹理的规则。它们决定了对象在场景中如何反射光线、显示颜色、反射环境等。 Three.j

    2024年02月21日
    浏览(58)
  • ThreeJS-3D教学三:平移缩放+物体沿轨迹运动

    我们在项目中会有一些这样的需求,我们可视化一个场景,需要俯视、平移、缩放,方便观察场景中的数据或者模型,之所以把这个案例拿出来 1、这是个很实用的需求,我相信很多人会用到 2、我自己认为在实际案例中我们可以学习相关知识点更易吸收些 为了丰富本篇文章

    2024年02月03日
    浏览(52)
  • 【THREE.JS学习(3)】使用THREEJS加载GeoJSON地图数据

    本文接着系列文章(2)进行介绍,以VUE2为开发框架,该文涉及代码存放在HelloWorld.vue中。 相较于上一篇文章对div命名class等,该文简洁许多。 接着引入核心库 其中,{OrbitControls}为控制器,加载后可以通过鼠标来移动加载数据的方向、放缩等 Three.js中的坐标系是以单位为米(

    2023年04月09日
    浏览(52)
  • ThreeJS-纹理旋转、重复(十一)

     文档:three.js docs 关键代码:    //设置旋转中心,默认左下角     docColorLoader.center.set(0.5,0.5);     //围绕旋转中心逆时针旋转45度     docColorLoader.rotation = Math.PI/4; 完整代码: template   div id=\\\"three_div\\\"/div /template   script import * as THREE from \\\"three\\\"; import { OrbitControls } from \\\"three/example

    2023年04月08日
    浏览(42)
  • threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

    绑定点击事件,通过 THREE.Raycaster 光线投射,用于确定鼠标点击位置上有哪些物体, raycaster.intersectObjects(scene.children) 返回点击位置上所有的物体的数组;我们用 var selected = intersects[0] 取第一个,也就是最前面的那个物体;在通过 selected.point 取点坐标

    2024年02月11日
    浏览(128)
  • 【js&threeJS】入门three,并实现3D汽车展示厅,附带全码

    首先放个最终效果图:   三维(3D)概念: 三维(3D)是一个描述物体在三个空间坐标轴上的位置和形态的概念。相比于二维(2D)只有长度和宽度的平面,三维增加了高度或深度这一维度 在三维空间中,我们使用三个独立的坐标轴来描述物体的位置。通常使用笛卡尔坐标系

    2024年02月11日
    浏览(130)
  • ThreeJS-3D教学六-物体位移旋转

    之前文章其实也有涉及到这方面的内容,比如在ThreeJS-3D教学三:平移缩放+物体沿轨迹运动这篇中,通过获取轨迹点物体动起来,其它几篇文章也有旋转的效果,本篇我们来详细看下,另外加了tween.js知识点,tween可以很好的协助 three 做动画,与之相似的还有 gsap.js方法类似。

    2024年02月04日
    浏览(49)
  • Three.js--》前端开发者掌握3d技术不再是梦,初识threejs

            这十年来 web 得到了快速的发展,随着 webgl 的普及,网页的表现能力越来越强大,网页上已经开始可以做出很多复杂的动画和精美的效果,还可以通过 webgl 在网页中绘制高性能的3d图形,别的不说,凡是入门程序员都离不开github这个网站,细心的人都会发现,gi

    2024年02月01日
    浏览(66)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包