网站描述优化,智能软件开发就业前景,跨境网络服务,营销通本文 我们来说 顶点缩放
我们官网搜索 BufferGeometry 下面有一个 scale 函数 例如 我们先将代码写成这样 上面图片和资源文件 大家需要自己去加一下
import ./style.css
import * as THREE from three;
import { OrbitControls } from three/examples/j…本文 我们来说 顶点缩放
我们官网搜索 BufferGeometry 下面有一个 scale 函数 例如 我们先将代码写成这样 上面图片和资源文件 大家需要自己去加一下
import ./style.css
import * as THREE from three;
import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js;
import { RGBELoader } from three/examples/jsm/loaders/RGBELoader.js;
//创建相机
const camera new THREE.PerspectiveCamera(45, //视角 视角越大 能看到的范围就越大window.innerWidth / window.innerHeight,//相机的宽高比 一般和画布一样大最好0.1,1000
);
const scene new THREE.Scene();
let uvTexture new THREE.TextureLoader().load(/textUv.jpg);const geometry new THREE.BufferGeometry();
// 创建顶点数据
const vertices new Float32Array([-1.0,-1.0 ,0.0,1.0 ,-1.0, 0.0,1.0 ,1.0 ,0.0,-1.0 ,1.0, 0.0
])
geometry.setAttribute(position, new THREE.BufferAttribute(vertices, 3));
const indices new Uint16Array([0 ,1 ,2, 0, 3, 2]);
const material new THREE.MeshBasicMaterial({map: uvTexture,side: THREE.DoubleSide
})
const uv new Float32Array([0, 0, 1, 0, 1, 1, 0, 1
])
geometry.setAttribute(uv, new THREE.BufferAttribute(uv, 2));
const normals new Float32Array([0, 0, 1,0, 0, 1,0, 0, 1,0, 0, 1
])
geometry.setAttribute(normal, new THREE.BufferAttribute(normals, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
console.log(geometry);
const cube new THREE.Mesh(geometry, material);
scene.add(cube)//c创建一个canvas容器 并追加到 body上
const renderer new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//设置相机位置 这里 我们设置Z轴 大家可以试试 S Y 和 Z 都是可以的
camera.position.z 5;
//设置相机默认看向哪里 三个 0 代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls new OrbitControls(camera, renderer.domElement);let rgbeloader new RGBELoader();
rgbeloader.load(/xhdr/Alex_Hart-Snow_Pano_2k.hdr,(texture) {scene.background texture;texture.mapping THREE.EquirectangularReflectionMapping;material.envMap texture;
})function animate() {controls.update();requestAnimationFrame(animate);/*cube.rotation.x 0.01;cube.rotation.y 0.01;*/renderer.render(scene, camera);
}
animate();这里 我们将它 x y z三个轴 都缩放三倍 运行代码 最直观的就是 几何体放大了很多 打开控制台 position 的数值也会随之改变 帮你算出现在的值 顶点操作 最大的好处还是 如果几何体数据后端返回且有偏差 就可以通过顶点操作修整 但是坏处就是 没有痕迹 我们无法通过几何体对象 看出它做了哪些操作
