如何解决ThreeJS:BufferGeometry的厚度
是否有可能将厚度添加到缓冲区几何中?在这里,我有一个带有顶点的缓冲区几何体,它是几何体细节的索引。在这里,我想更新缓冲区几何体的厚度。我可以增加/减少几何图形的高度,宽度或深度的大小,但是我不知道如何增加/减少几何图形的厚度。 这是小提琴https://jsfiddle.net/hw0c9x3L/
// Three.js - Custom Geometry - Cube - Vertex Colors
// from https://threejsfundamentals.org/threejs/threejs-custom-geometry-cube-vertex-colors.html
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r119/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
camera.position.z = 5;
const scene = new THREE.Scene();
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color,intensity);
light.position.set(-1,2,4);
scene.add(light);
}
const geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-1,-1,1),// 0
new THREE.Vector3( 1,// 1
new THREE.Vector3(-1,1,// 2
new THREE.Vector3( 1,// 3
new THREE.Vector3(-1,-1),// 4
new THREE.Vector3( 1,// 5
new THREE.Vector3(-1,// 6
new THREE.Vector3( 1,// 7
);
/*
6----7
/| /|
2----3 |
| | | |
| 4--|-5
|/ |/
0----1
*/
geometry.faces.push(
// front
new THREE.Face3(0,3,2),new THREE.Face3(0,3),);
geometry.faces.forEach((face,ndx) => {
face.vertexColors = [
(new THREE.Color()).setHSL(ndx / 12,0.5),(new THREE.Color()).setHSL(ndx / 12 + 0.1,(new THREE.Color()).setHSL(ndx / 12 + 0.2,];
});
geometry.computeFaceNormals();
function makeInstance(geometry,color,x) {
const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
const cube = new THREE.Mesh(geometry,material);
scene.add(cube);
cube.position.x = x;
return cube;
}
const cubes = [
makeInstance(geometry,0x44FF44,0),makeInstance(geometry,0x4444FF,-4),0xFF4444,4),];
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width,height,false);
}
return needResize;
}
function render(time) {
time *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
cubes.forEach((cube,ndx) => {
const speed = 1 + ndx * .1;
const rot = time * speed;
cube.rotation.x = rot;
cube.rotation.y = rot;
});
renderer.render(scene,camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。