标签: buffer-geometry
使用 Three.js 在 3D 模型之间转换顶点
我正在尝试实现类似于以下的多边形吹制和重新组装效果：
在这两个示例中，您可以看到它们如何将顶点从一个 3D 模型变形/过渡到另一个，从而产生非常酷的效果。我有类似的工作，但我无法理解它们如何通过速度偏移来转换顶点（请参阅第一个链接，看看粒子如何不简单地映射和缓动到新位置，而是如何做一些角度偏移）：
因此，我在 Three.js 中导入两个模型，采用顶点数较大的模型并复制其几何图形，同时将第二个模型数据作为属性附加：
class CustomGeometry extends THREE.BufferGeometry {
constructor (geometry1, geometry2) {
super()
let { count } = geometry1.attributes.position
// this will hold
let targetArr = new Float32Array(count * 3)
let morphFactorArr = new Float32Array(count)
for (let i = 0; i < count; i += 3) {
targetArr[i + 0] = geometry2.attributes.position.array[i + 0] || 0
targetArr[i + 1] = geometry2.attributes.position.array[i + 1] || 0
targetArr[i + 2] = geometry2.attributes.position.array[i + 2] || 0 …2
推荐指数
推荐指数
1
解决办法
解决办法
3098
查看次数
查看次数
JavaScript/three.js：THREE.BufferGeometry 没有接收到任何光线或阴影
我正在尝试使用噪声函数生成地形，但在让 BufferGeometry 网格接收来自 PointLight 的任何光时遇到问题。设置 AmbientLight 时，我可以看到 BufferGeometry 但只有 PointLight 它不起作用。它旁边的 CubeGeometry 适用于两种类型的光。我还希望地形接收阴影。我需要在网格上运行一些额外的方法吗？我在这里缺少什么？
https://jsfiddle.net/cbo8fx1s/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://threejs.org/build/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;
const renderer = new THREE.WebGLRenderer({antialias: true});
// scene.add(new THREE.AmbientLight(0xffffff));
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
window.addEventListener('load', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
} …2
推荐指数
推荐指数
1
解决办法
解决办法
983
查看次数
查看次数
球体的三个js缓冲区几何
我试图制作一个显示许多球形对象的三个 js 文档，最快的方法是使用缓冲区几何。从这里的这篇文章中，我了解到我可以使用以下方法将普通几何体转换为缓冲几何体：
var sphere = new THREE.SphereGeometry( 4, 0.05, 0.025 );
var geometry = THREE.BufferGeometryUtils.fromGeometry( sphere );
但这对我来说似乎不起作用，创建对象的其余代码如下：
var positions = new Float32Array( x_GAMA.length * 3 );
for ( var i = 0; i < x_GAMA.length; i += 1 ) {
// positions
positions[ 3*i ] = x_GAMA[i]*10000;
positions[ 3*i + 1 ] = y_GAMA[i]*10000;
positions[ 3*i + 2 ] = z_GAMA[i]*10000;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
var material = new …1
推荐指数
推荐指数
1
解决办法
解决办法
3765
查看次数
查看次数
我无法从bufferGeometry获取position属性
我随机选择了"在我的场景中走来走去"(某种3D蛇),接下来要做的就是在它的头部设置一个盒子.该行bufferGeometry由设置
var positions1 = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
var positions2 = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
buffGeometry1.addAttribute( 'position', new THREE.BufferAttribute( positions1, 3 ) );
buffGeometry2.addAttribute( 'position', new THREE.BufferAttribute( positions2, 3 ) );
我选择boxGeometry在它周围设置一个立方体(对象),并使用以下代码行来尝试实现:
var positioning = buffGeometry1.getAttribute('position');
cube.position.x = positioning[0];//(line1.geometry.attributes.position.array[drawCount]);
cube.position.y = positioning[1];//(line1.geometry.attributes.position.array[drawCount + 1]);
cube.position.z = positioning[2];
在调试时,我看到我的positioning数组未定义.所以我觉得出了问题.
谢谢.
1
推荐指数
推荐指数
1
解决办法
解决办法
1262
查看次数
查看次数