首页 > 其他分享 >three.js-坐标轴辅助器

three.js-坐标轴辅助器

时间:2024-02-23 14:58:24浏览次数:31  
标签:scene const THREE three 坐标轴 renderer new js AxesHelper

坐标轴辅助器(AxesHelper)

用于简单模拟3个坐标轴的对象.
红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

const axesHelper = new THREE.AxesHelper( 5 );

scene.add( axesHelper );

文档地址:https://threejs.org/docs/index.html#api/zh/helpers/AxesHelper

构造函数(Constructor)

AxesHelper( size : Number )

size -- (可选的) 表示代表轴的线段长度. 默认为 1.

方法(Methods)

.setColors ( xAxisColor : Color, yAxisColor : Color, zAxisColor : Color ) : this

将轴颜色设置为 xAxisColoryAxisColor,zAxisColor

.dispose () : undefined

释放此实例分配的GPU相关资源。每当应用程序中不再使用此实例时,请调用此方法。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add(cube);

camera.position.z = 5;
const controls = new OrbitControls( camera, renderer.domElement );
// 坐标轴
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

展示效果:

 

标签:scene,const,THREE,three,坐标轴,renderer,new,js,AxesHelper
From: https://www.cnblogs.com/shangguancn/p/18029518

相关文章

  • three.js-轨道控制器(OrbitControls)
    轨道控制器(OrbitControls)Orbitcontrols(轨道控制器)可以使得相机围绕目标进行轨道运动。要使用这一功能,就像在/examples(示例)目录中的所有文件一样,您必须在HTML中包含这个文件。进口OrbitControls是一个附加组件,必须显式导入。See Installation/Addons.import{OrbitCont......
  • Playwright nodejs切换页面tab
    主要使用下面的代码awaitpage.bringToFront();录制代码时,鼠标点击页面tab的代码没有录制进去,需要手动加上面一行代码完整的代码如下import{test,expect}from'@playwright/test';test('test',async({page})=>{awaitpage.goto('https://www.baidu.com/')......
  • 译:使用现代的 Node.js 构建简单的CLI工具
    原文地址:https://evertpot.com/node-changelog-cli-tool/作者:EvertPot发布时间:2023-02-13只使用Node.js的标准库,不安装任何外部依赖,写一个命令行工具。前言作者是多个开源项目的维护者,长久以来都是手动维护项目的变更日志(changelog)。下面是项目a12n-server的变更日......
  • js-模块化AMD vs CMD
    1.AMD和require.jsdefine(function(){varbasicNum=0;varadd=function(x,y){returnx+y;};return{add:add,basicNum:basicNum};});//定义一个依赖underscore.js的模块define(['underscore'],func......
  • 搭建我们自己的第一个three项目
    搭建项目我们要学习three,那么我们势必需要在本地搭建一个自己的项目。首先我们需要在我们自己的电脑中安装node,创建一个node环境。这个自行从网上百度,这里就不再介绍了。(简单的一批,自行百度吧,如果不会,那么也不要学习three了)Parcel这里我们使用Parcel来打包我们的项目(你也可以......
  • 认识three.js和本地环境搭建
    要学习three.js首先我们要了解几个概念什么是3d,什么是webgl,那么three.js又是什么。下面我们来一一介绍。首先什么是3d?3D,全称为Three-Dimensional,即三维,是指在空间中具有三个维度(长度、宽度和高度)的概念。在现实世界中,我们所处的就是一个三维空间,物体都有立体形态,可以从不同的......
  • C# http请求 ( post方式 JSON格式 )
    直接上代码usingSystem.Net;usingSystem.IO;privatevoidbtnPost_Click(objectsender,EventArgse){this.txtResult.AppendText(DateTime.Now.ToString("yyyy-MM-ddHH:mm:ss")+"准备请求"+"\r\n");//js......
  • .net core 读取appsetting.json 封装
    /*需要引入的包Microsoft.Extensions.Configuration-提供配置的核心功能。Microsoft.Extensions.Configuration.Json-支持从JSON文件加载配置。Microsoft.Extensions.Configuration.FileExtensions-支持文件相关的配置,如设置基路径。Microsoft.Extensions.Configura......
  • js闭包和循环
    for(vari=1;i<=5;i++){setTimeout(functiontimer(){console.log(i);},i*1000);}以上代码输出都是6。因为整个过程中只有i一个变量,所有循环共享i变量,循环执行完毕(定时器执行之前)后i为6for(vari=1;i<=5;i++){letj=i;setTimeout(function......
  • js 基础知识
     01-数据类型值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。02-检测数据类型2.1-typeof<!DOCTYPEhtml><ht......