几何体的线框模式,
一个正方平面最少可以由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