Three.js ThreeJS:缓冲几何体的厚度
是否有可能将厚度添加到缓冲几何体中?这里,我有一个带有顶点的缓冲区几何体,用于几何体细节的索引。这里,我想更新缓冲区几何体的厚度。我可以增加/减少几何体的高度、宽度或深度,但我不知道如何增加/减少几何体的厚度。 这是小提琴Three.js ThreeJS:缓冲几何体的厚度,three.js,Three.js,是否有可能将厚度添加到缓冲几何体中?这里,我有一个带有顶点的缓冲区几何体,用于几何体细节的索引。这里,我想更新缓冲区几何体的厚度。我可以增加/减少几何体的高度、宽度或深度,但我不知道如何增加/减少几何体的厚度。 这是小提琴 你说的厚度是什么意思?对于立方体,改变其比例会改变其在每个方向上的厚度。@Marquizzo我指的是平面的厚度。在这个示例中,我将有一个立方体的面,我正在寻找面(平面)的厚度。你不能改变平面的厚度。它是无限薄的。尽管你可以通过使两个平面相互平行来伪装厚度。 // Three.
你说的厚度是什么意思?对于立方体,改变其比例会改变其在每个方向上的厚度。@Marquizzo我指的是平面的厚度。在这个示例中,我将有一个立方体的面,我正在寻找面(平面)的厚度。你不能改变平面的厚度。它是无限薄的。尽管你可以通过使两个平面相互平行来伪装厚度。
// 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, 1), // 1
new THREE.Vector3(-1, 1, 1), // 2
new THREE.Vector3( 1, 1, 1), // 3
new THREE.Vector3(-1, -1, -1), // 4
new THREE.Vector3( 1, -1, -1), // 5
new THREE.Vector3(-1, 1, -1), // 6
new THREE.Vector3( 1, 1, -1), // 7
);
/*
6----7
/| /|
2----3 |
| | | |
| 4--|-5
|/ |/
0----1
*/
geometry.faces.push(
// front
new THREE.Face3(0, 3, 2),
new THREE.Face3(0, 1, 3),
);
geometry.faces.forEach((face, ndx) => {
face.vertexColors = [
(new THREE.Color()).setHSL(ndx / 12 , 1, 0.5),
(new THREE.Color()).setHSL(ndx / 12 + 0.1, 1, 0.5),
(new THREE.Color()).setHSL(ndx / 12 + 0.2, 1, 0.5),
];
});
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),
makeInstance(geometry, 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();