首页 > 其他分享 >threejs 几何体的本质 顶点

threejs 几何体的本质 顶点

时间:2024-05-01 09:57:00浏览次数:26  
标签:threejs const THREE 几何体 window camera new 顶点

几何体的线框模式,

一个正方平面最少可以由4个顶点组成,两个三角形组成(公用了 2个顶点,使用了索引创建顶点属性) 。

// 导入 threejs 
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
// 创建场景 scene
const scene = new THREE.Scene();
// console.log(scene,'scene');
// 创建相机 -- 观看物体的不同视角
const camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight,  // 宽高比
    0.1,  // 近平面
    1000 // 远平面
);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 置canvas画设布的尺寸  -- 设置threejs渲染区域的尺寸 像素 px
renderer.setSize(window.innerWidth,window.innerHeight); 
// domElement 就是一个 canvas 标签  结果 -- 把 canvas 渲染到了页面上
document.body.appendChild(renderer.domElement);

// 添加坐标轴
const axesHelper = new THREE.AxesHelper(5); // 参数为轴的长度
scene.add(axesHelper);
// 设置相机的位置 position 
camera.position.set(10,10,10);  // 远距离和近距离
// camera.position.y = 50;  // 远距离和近距离
camera.lookAt(0,0,0);
// camera.lookAt(mesh.position);// 指向mesh对应的位置

// 引入相机控件  -- 轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);

// 浏览器大小调整事件监听  -- 监听窗口的变化
window.addEventListener("resize", () => {
    // console.log('test');
    renderer.setSize(window.innerWidth,innerHeight);  // 根据缩放的窗口重新设置画布的大小
    // 垂直相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机投影矩阵
    camera.updateProjectionMatrix();
});

// 使用 GUI 放入全屏和退出全屏功能
const gui = new GUI();
const objFun = {
    requestFullscreen:function(){
        document.body.requestFullscreen();
    },
    exitFullscreen:function(){
        document.exitFullscreen(); 
    },
};
gui.add(objFun,"requestFullscreen");
gui.add(objFun,"exitFullscreen");

// 集合体 -- 顶点
//类型化数组创建顶点数据
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    2, 0, 0, //顶点2坐标
    0, 2, 0, //顶点3坐标
    2, 0, 0, //顶点2坐标
    0, 2, 0, //顶点3坐标
    2, 2, 0, //顶点3坐标
]);
// 通过索引创建顶点  -- 公用了 2 个顶点
const vertices1 = new Float32Array([
    0, 0, 0, //顶点1坐标
    2, 0, 0, //顶点2坐标
    0, 2, 0, //顶点3坐标
    2, 2, 0, //顶点3坐标
]);
const indices = new Uint16Array([0,1,2,1,2,3]);
// 创建空几何体
const geometry = new THREE.BufferGeometry();
// 创建顶点属性
geometry.setAttribute("position",new THREE.BufferAttribute(vertices1,3));
geometry.setIndex(new THREE.BufferAttribute(indices,1));

// 创建材质
const material01 = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide,  // 设置可以看到二面的材质
});
const plane = new THREE.Mesh(geometry,material01);
scene.add(plane);


// 添加带阻尼的惯性
controls.enableDamping = true;   //  设置后会有滑动的效果
controls.dampingFactor = 0.2011;   // 时间越小 滑动的时间越小

controls.autoRotate = false;  // 自动旋转

// 动态的渲染函数
function animate() {
    controls.update(); // 如果使用了 autoRotate 属性等 需要在动画中执行 update 方法
    requestAnimationFrame(animate);  // 逐帧渲染
    // 旋转
    // mesh.rotation.x += 0.01;
    // mesh.rotation.y += 0.01;
    renderer.render(scene,camera);
}
animate()

 

标签:threejs,const,THREE,几何体,window,camera,new,顶点
From: https://www.cnblogs.com/zhulongxu/p/18169033

相关文章

  • threejs - js库 gui 的使用 调试开发3D效果
    //导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//引入dat.gui.js的一个类GUIimport{GUI}from'three/addons/libs/lil-gui.module.min.js';//创建场景scene......
  • blender python api 将指定的顶点组(water)转换为颜色属性water_colors
    1.选中物体,进入权重绘制模式2.代码:importbpy#获取当前活动的物体obj=bpy.context.object#确保物体是网格类型ifobj.type!='MESH':print("当前激活的对象不是网格类型。")#exit()#使用exit()来提前退出脚本#获取名为“water”的顶点组vertex_gro......
  • blender python api 获取所有顶点组并将各自的顶点组转换为对应的颜色属性
    1.选中物体,进入权重绘制模式2.代码importbpy#获取当前活动的物体obj=bpy.context.object#确保物体是网格类型ifobj.type!='MESH':print("当前激活的对象不是网格类型。")#exit()#遍历所有顶点组forvg_nameinobj.vertex_groups.keys():#获......
  • threejs 浏览器窗口resize变化 自适应 html 全屏
    全屏:画布全屏和body页面全屏;//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建场景sceneconstscene=newTHREE.Scene();//console.log(scene,'scene');//......
  • threejs 父元素 相对位置 position 网格对象
    设置position都是相对于父元素的位置设置的//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建场景sceneconstscene=newTHREE.Scene();//console.log(scene,'scene'......
  • threejs - 渲染第一个3D场景 - 旋转的正方体
    1.安装threejs&使用2.创建三要素 场景scene相机camera渲染器render 3.场景newTHREE.Scene()  相机分为2种 1.透视相机2.正交相机 渲染器的使用 把canvas标签渲染到body页面document.body.appendChild(renderer.doLement); // 渲染canvasre......
  • blender将多个选择的顶点x值改为0,非常诡异的操作
    选择顶点,然后按S,X,0 InEditmodeselecttheverticesandScaleto0ontheaxisatissue,inthisexampleontheXaxis(SX0):Nowthatalltheverticesareinthesamepositiononthataxis,alltheirpositionscanbeset(inthisexampleto-0.25)in......
  • threejs——开发一款塔防游戏
    前言完成效果gif图较大,耐心等待,源码见文末为了上班摸鱼合理的玩游戏,我写了一个3d塔防游戏,其中功能包含动画、敌人运动、放置武器、升级武器、销毁武器、动态检测等功能。请动动小手,点赞收藏,这就发车~目录结构思维导图具体功能和思路如下有了这个思维导图,就可以......
  • OpenMesh 计算网格顶点Voronoi面积
    文章目录一、简介二、实现代码三、实现代码参考资料一、简介在计算离散的微分算子时(如拉普拉斯算子、高斯曲率等),总是会需要计算某个网格顶点的局部面积,主要有以下几种:该操作类似于点云中的邻域操作,只不过点云的邻域一般是基于一个圆或者一个圆柱,而这里则......
  • 在Blender中,重新调整已经绑定权重的骨骼位置而不影响绑定的顶点位置
    在Blender中,重新调整已经绑定权重的骨骼位置而不影响绑定的顶点位置,是一个比较特殊的需求。这通常涉及到调整骨骼的“RestPose”(休息姿势),而不是它的“PosePosition”(姿势位置),以保持顶点相对于骨骼的位置不变。下面是详细的步骤和一些建议,以达到这个目的:1. 准备工作确保你的......