ThreeJS-太阳球围绕旋转（二十四）

数学小知识：

我们根据旋转角度θ可以计算出任意时刻的x,y

sinθ = y0/r; 因此y0= rsinθ,

cosθ = x0/r,因此x0= rcosθ,

小拓展： y0^ +x0^ - r^2*sinθ^2 + r^2*cosθ^2 = r^2*(sinθ^2 + cosθ^2) = r^2;

这也是为什么在极坐标方程中

y0= rsinθ,

x0= rcosθ,

可以代表一个圆的原因。

会极坐标方程的同学可以直接跳过该描述。

关键代码：

//创建一个光球
           const sphereMesh = new THREE.Mesh(
           new THREE.SphereBufferGeometry(1, 50, 50),
           new THREE.MeshBasicMaterial({color:0xFF0000})
           );
           sphereMesh.position.set(10, 5, 10);
           //将光源加入球
           sphereMesh.add(directionalLight);

//渲染下一帧的时候就会调用回调函数
           const clock = new THREE.Clock();
           let renderFun = () => {
               let time = clock.getElapsedTime();
               sphereMesh.position.x = Math.sin(time)*10;
               sphereMesh.position.z = Math.cos(time)*10;
               //更新阻尼数据
               controls.update();
               //需要重新绘制canvas画布
               render.render(scene, camera);
               //监听屏幕刷新（60HZ,120HZ），每次刷新触发一次requestAnimationFrame回调函数
               //但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果
               window.requestAnimationFrame(renderFun);
           };

完整代码：

<template>
   <div id="three_div"></div>
</template>

<script>
   import * as dat from 'dat.gui' //界面控制
   import * as THREE from "three";
   import {
       OrbitControls
   } from "three/examples/jsm/controls/OrbitControls";
   import {
       RGBELoader
   } from "three/examples/jsm/loaders/RGBELoader"
   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);
           //添加物体
           //创建一个半径为1，经纬度分段数位20的球
           const cubeGeometry = new THREE.SphereBufferGeometry(2, 100, 100);
           //纹理加载器加载图片
           const cubeMaterial = new THREE.MeshStandardMaterial({
               //side: THREE.DoubleSide,
           });
           //根据几何体和材质创建物体
           const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
           //将物体加入到场景
           scene.add(mesh);

//创建平面几何体
           const planeGeometry = new THREE.PlaneBufferGeometry(50, 50);
           //创建平面物体
           const planeMesh = new THREE.Mesh(planeGeometry, cubeMaterial);
           planeMesh.position.set(0, -2, 0);
           planeMesh.rotation.x = -Math.PI / 2;
           //场景添加平面物体
           scene.add(planeMesh);

//给场景所有的物体添加默认的环境贴图
           //添加坐标轴辅助器
           const axesHepler = new THREE.AxesHelper(5);
           scene.add(axesHepler);
           //标准材质需要借助灯光

//添加周围环境灯光（由物体发出的灯光）参数（灯色，强度0-1）
           // const light = new THREE.AmbientLight(0xFFFFFF, 0.7);
           // scene.add(light);
           //创建点光源
           const directionalLight = new THREE.PointLight(0xFF0000, 0.7);
           // directionalLight.position.set(10, 10, 10);

           //创建一个光球
           const sphereMesh = new THREE.Mesh(
           new THREE.SphereBufferGeometry(1, 50, 50),
           new THREE.MeshBasicMaterial({color:0xFF0000})
           );
           sphereMesh.position.set(10, 5, 10);
           //将光源加入球
           sphereMesh.add(directionalLight);
           //将光源球加入到场景
           scene.add(sphereMesh);
           //初始化渲染器
           const render = new THREE.WebGLRenderer();
           //设置渲染器的尺寸
           render.setSize(window.innerWidth, window.innerHeight);
           //使用渲染器，通过相机将场景渲染进来

//创建轨道控制器，可以拖动,控制的是摄像头
           const controls = new OrbitControls(camera, render.domElement);
           //设置控制阻尼，让控制器有更真实的效果
           controls.enableDamping = true;

//开启投影
           //开启渲染器投影
           render.shadowMap.enabled = true;
           //开启灯光动态投影
           directionalLight.castShadow = true;
           //开启物体投影
           mesh.castShadow = true;
           //开启平面接受投影
           planeMesh.receiveShadow = true;
           //投影模糊度
           directionalLight.shadow.radius = 10;
           //设置投影的宽度和高度
           directionalLight.shadow.mapSize.set(1024, 1024);

//directionalLight.angle = Math.PI/10;
           //创建gui
           const gui = new dat.GUI();
           // gui.add(directionalLight.shadow.camera, 'near').min(1).max(25).step(1).name("相机近距离").onChange( () => {
           //    directionalLight.shadow.camera.updateProjectionMatrix();
           // })
           gui.add(mesh.position, 'x').min(-30).max(30).step(1).name("移动位置");
           //灯光有效距离，默认0表示不衰减
           directionalLight.distance = 0;
           gui.add(directionalLight, 'distance').min(0).max(100).step(1).name("灯光有效距离");
           //灯光衰减量控制
           directionalLight.decay = 2;
           gui.add(directionalLight, 'decay').min(-5).max(5).step(1).name("灯光衰减量");
           //控制灯光强度
           gui.add(directionalLight, 'intensity').min(0).max(30).step(1).name("灯光强度");

           //需要渲染器开启物理渲染
           render.physicallyCorrectLights =true;

//将webgl渲染的canvas内容添加到body上
           document.getElementById("three_div").appendChild(render.domElement);

//渲染下一帧的时候就会调用回调函数
           const clock = new THREE.Clock();
           let renderFun = () => {
               let time = clock.getElapsedTime();
               sphereMesh.position.x = Math.sin(time)*10;
               sphereMesh.position.z = Math.cos(time)*10;
               //更新阻尼数据
               controls.update();
               //需要重新绘制canvas画布
               render.render(scene, camera);
               //监听屏幕刷新（60HZ,120HZ），每次刷新触发一次requestAnimationFrame回调函数
               //但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果
               window.requestAnimationFrame(renderFun);
           };
           // window.requestAnimationFrame(renderFun);
           renderFun();

//画布全屏
           window.addEventListener("dblclick", () => {
               if (document.fullscreenElement) {
                   document.exitFullscreen();
               } else {
                   //document.documentElement.requestFullscreen();
                   render.domElement.requestFullscreen();
               }
           });

//监听画面变化，更新渲染画面，（自适应的大小）
           window.addEventListener("resize", () => {
               //更新摄像机的宽高比
               camera.aspect = window.innerWidth / window.innerHeight;
               //更新摄像机的投影矩阵
               camera.updateProjectionMatrix();
               //更新渲染器宽度和高度
               render.setSize(window.innerWidth, window.innerHeight);
               //设置渲染器的像素比
               render.setPixelRatio(window.devicePixelRatio);
               console.log("画面变化了");
           });
       },
       methods: {
           paush(animate) {
               animate.pause();
           },
       },
   };
</script>

<style scoped lang="scss">
</style>

效果图：

ThreeJS-太阳球围绕旋转（二十四）相关推荐

智课雅思词汇---二十四、形容词后缀-al-ial-ar-ary-ic-id-ish-ile-ine-oid-ory
智课雅思词汇---二十四.形容词后缀-al-ial-ar-ary-ic-id-ish-ile-ine-oid-ory 一.总结一句话总结: 1.形容词后缀-al? autumnal 英 [ɔː'tʌ ...
matlab火星漫游车转向控制,OSG开发笔记（二十四）：OSG漫游之平移与转向
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936 本文章博客地址:https://blog.csdn.net/qq21497936/ ...
数字图像处理领域的二十四个典型算法及vc实现、第一章
数字图像处理领域的二十四个典型算法及vc实现.第一章作者:July 二零一一年二月二十六日. 参考:百度百科.维基百科.vc数字图像处理. --------------------------- ...
[系统安全] 二十四.逆向分析之OllyDbg调试INT3断点、反调试、硬件断点与内存断点
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
数字图像处理领域的二十四个典型算法
数字图像处理领域的二十四个典型算法及vc实现.第一章一.256色转灰度图二.Walsh变换三.二值化变换四.阈值变换五.傅立叶变换六.离散余弦变换数字图像处理领域的二十四个典型算法及vc ...
噢~已二十四了。。。
鱼跃龙门恨难敌,潜龙困兽终是迷.又是一篇章-- 二十四,已二十四了. 二十四,就这么二十四了. 二十四,我记住了很多. 二十四,我忘记了很多. 二十四,算是什么概念呢? ...
二十四、Struts2中的UI标签
二十四.Struts2中的UI标签 Struts2中UI标签的优势: 数据回显页面布局和排版(Freemark),struts2提供了一些常用的排版(主题:xhtml默认 simple ajax) ...
python 分数序列求和公式_Python分数序列求和，编程练习题实例二十四
本文是关于Python分数序列求和的应用练习,适合菜鸟练习使用,python大牛绕行哦. Python练习题问题如下: 问题简述:有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13 要 ...
异常处理程序和软件异常——Windows核心编程学习手札之二十四
异常处理程序和软件异常 --Windows核心编程学习手札之二十四 CPU负责捕捉无效内存访问和用0除一个数值这种错误,并相应引发一个异常作为对错误的反应,CPU引发的异常称为硬件异常(hardwar ...
山海演武传·黄道·第一卷雏龙惊蛰第二十二 ~ 二十四章真龙之剑·星墟列将...
山海演武传·黄道·第一卷雏龙惊蛰第二十二 ~ 二十四章真龙之剑·星墟列将 "我是第一次--请你,请你温柔一点--"少女一边娇喘着,一边将稚嫩的红唇紧贴在男子耳边,樱桃小嘴盈溢 ...

ThreeJS-太阳球围绕旋转（二十四）

ThreeJS-太阳球围绕旋转（二十四）相关推荐

最新文章

热门文章