javascript - Threejs 波纹板定制形状-6ren

javascript - Threejs 波纹板定制形状

转载作者：行者123 更新时间：2023-11-28 17:34:07

我正在用如下所示的波纹板 build 一座类似房屋的结构。在这里，我使用 BoxGeometry 绘制结构并更新顶点以制作波纹板墙。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);


var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, 1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, 1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, -1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, -1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, 1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, 1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, -1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, -1, -1);
  scene.add( directionalLight1 );


scene.add(new THREE.AmbientLight(0xffffff, .5));

var geom = new THREE.BoxGeometry(50, 50, 0.1, 500, 1, 1);
geom.vertices.forEach(function(v){
	var x_val = Math.abs(v.x);
	if((x_val % 9) < 0.75 || (x_val % 9) > 8.25){
  	var m = parseInt(x_val/9) *9;
    var l = 0.75 - (m - x_val);
    v.z =  0.75 * Math.sin(l* Math.PI/1.5);
  }
  else if(x_val % 3 < 0.25 || (x_val % 3) > 2.75){
    var m = parseInt(x_val/3) * 3;
    var l = 0.25 - (m - x_val);
    v.z =  0.25 * Math.sin(l* Math.PI/0.5);
  }
});
geom.computeFaceNormals();
geom.computeVertexNormals();

var corrugated = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({color: "silver"}));
scene.add(corrugated);


render();
function render(){
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<html>
  <head>
    <script src="https://threejs.org/build/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js">			</script>
  </head>
  <body>
    
  </body>
</html>

我想用波纹板 build 前侧壁，如下图所示

我已尝试使用形状使用以下代码。并尝试更新顶点作为第一个示例。但没有获得所需的波纹图案。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);


var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, 1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, 1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, -1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( 1, -1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, 1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, 1, -1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, -1, 1);
  scene.add( directionalLight1 );

  var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.2);
  directionalLight1.castShadow = true;
  directionalLight1.position.set( -1, -1, -1);
  scene.add( directionalLight1 );

scene.add(new THREE.AmbientLight(0xffffff, .5));

var wallShape = new THREE.Shape();

wallShape.moveTo( -50, 0 );
wallShape.bezierCurveTo( -50, 33, -50, -66, -50, 100);
wallShape.bezierCurveTo( -32, 116, -16, 132, 0, 150 );
wallShape.bezierCurveTo( 16, 132, 32, 116, 50, 100 );
wallShape.bezierCurveTo( 50, 66, 50, 33, 50, 0 );
wallShape.lineTo(-50, 0 );

var extrudeSettings = { amount: 0.1, bevelEnabled: false, curveSegments: 500};

var geometry = new THREE.ExtrudeGeometry( wallShape, extrudeSettings );

geometry.vertices.forEach(function(v){
        var yval = Math.abs(v.y);
        if((yval % 9) < 0.75 || (yval % 9) > 8.25){
          var m = parseInt(yval/9) *9;
          var l = 0.75 - (m - yval);
          v.z =  v.z + 0.75 * Math.sin(l* Math.PI/1.5);
        }
});



geometry.computeFaceNormals();
geometry.computeVertexNormals();

var mesh = new THREE.Mesh( geometry,  new THREE.MeshLambertMaterial({color: "silver"}));
	scene.add( mesh );

render();
function render(){
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<html>
  <head>
    <script src="https://threejs.org/build/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js">			</script>
  </head>
  <body>
    
  </body>
</html>

关于如何制作所需的波纹结构有什么建议吗？

最佳答案

我同意 Mugen87 关于用创作工具制作东西的观点。但是，如果由于某些原因你不想使用可加载的东西，那么你可以做类似的事情，随意地根据需要变换几何图形(这里是一个粗略的概念):

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 15);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, .5));

var w = 5,
  h = 5;
var geom = new THREE.BoxGeometry(w, h, 0.125, 50, 1, 1);
geom.vertices.forEach(function(v) {
  if (v.y > 0) {
    v.y += (w / 2) - Math.abs(v.x); // here you can use whatever dependency y from x :)
  }
});
geom.vertices.forEach(function(v) {
  v.z += Math.sin(v.x * Math.PI * 2) * .125;
});
geom.computeFaceNormals();
geom.computeVertexNormals();

var corrugated = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({
  color: "silver"
}));
scene.add(corrugated);


render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

关于javascript - Threejs 波纹板定制形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49555873/

文章推荐： python - Matplotlib 与 Pandas : Elementwise comparison failed

文章推荐： python - 如何使用 Crypto 在 python 中导入公钥？

文章推荐： ios - 将 UIViewControllers 设置为其他 UIViewController 中的属性

python - Tensorflow Assign 要求两个张量的形状匹配。 lhs 形状= [20] rhs 形状= [48]
我是 TensorFlow 菜鸟。我已经从 deeppose 的开源实现中训练了一个 TensorFlow 模型，现在必须针对一组新图像运行该模型。该模型是在大小为 100 * 100 的图像上训练
形状=圆形的节点的大小
我正在尝试以这种方式设置节点的大小: controller[shape=circle,width=.5,label="Controller",style=filled,fillcolor="#8EC1
excel - 如何在选择中的每个单元格周围添加文本框/形状？
是否有 VBA 代码可以在选择的每个单元格周围添加文本框。文本框应该是单元格的大小(类似于边框)？最佳答案您可以使用 .AddTextbox方法。循环遍历您选择的单元格，并使用单元格的尺寸属性来设
平铺张量的 tensorflow 形状
我有一个变量 a尺寸 (1, 5) 我想“平铺”的次数与我的小批量的大小一样多。例如，如果小批量大小为 32，那么我想构造一个张量 c维度为 (32, 5)，其中每一行的值与原始 (1, 5) 变量
java - 在JavaFX中指定时间显示文本/形状
我在使用 javaFX 时遇到问题。我想每 1000 毫秒在应用程序窗口中显示一次时间。 public class Main extends Application { StackPane root
单击时的 JavaFX 形状
所以我目前正在创建这个 API。这个登录类应该只创建一个场景，其中包含制作 GUI 所需的所有框。我遇到的问题是，单击时我的形状不会执行任何操作。我有事件监听器，但它不起作用。 import
python turtle 形状
我正在用 python turtle 画一些东西，我使用了形状函数，但是形状 overdraw 了它们之前的其他形状(我可以看到形状在移动)，并且我只得到了最后一个形状: `up() goto(-20
python - 如何将选定的数据转换为相同的长度(形状)
我正在读取多个 .csv 文件作为具有相同形状的 panda DataFrame。对于某些索引，某些值为零，因此我想选择具有相同形状的每个索引的值，并为相同的索引放置零值并删除零以成为相同的形状: a
c# - 查找周长上的点以表示边界/形状
我有一个简单的二维网格，格式为 myGrid[x,y] 我正在尝试找到一种方法来找到围绕选定网格的周长，这样我就有了一个可供选择的形状。这是我的意思的一个例子: 这里的想法是找到所有相关的“角”，也
swift - 根据路径更改响应模型/形状
我有一个网络层，用于调用多个端点。我想减少重复代码的数量，并认为也许我可以将响应模型作为端点的一部分传递。这个想法是不需要多个仅因响应而不同的函数，我可以调用我的网络层并根据路径进行设置。我看到的
Android自定义 ImageView 形状
我正在创建一个自定义 ImageView，它将我的图像裁剪成六边形并添加边框。我想知道我的方法是否正确，或者我是否以错误的方式这样做。有很多自定义库已经在执行此操作，但开箱即用的库中没有一个具有我正在
python - 从节点云中查找几何(形状)
我正在编写一些代码，这些代码需要识别一些基于节点云的相当基本的几何图形。我会对检测感兴趣: 板(简单有界平面) 圆柱体(两个节点循环) 半圆柱(圆弧+直线+圆弧+直线) 圆顶(n*loop+top n
带有边框和角截断的 iOS 形状
我有这个形状: http://screencast.com/t/9UUhAXT5Wu 但边界在截止点处没有跟随它 - 我该如何解决？这是我当前 View 的代码: self.view.backgro
c++ - 简单的嵌套循环问题。 * 形状 *
我现在脑震荡，所以我想问一个非常简单的问题。目前，我正在尝试打印出这样的开头当输入为 7 时，输出为 * ** * ** * ** * 这里是我的代码，它打印 14 次而不是 7 次，或者当我输入
导航选项卡上的 CSS 形状
我想生成如下设计。计划选项卡顶部的"new"。我使用的属性适用于 chrome 和 mozilla，但在 Edge 中出现故障。以下是我在 chrome 中应用的样式: a.subnav__item
形状中的 Android 形状
我想要一个带有两种颜色边框轮廓的 shape 元素。我可以使用 solid 元素做一个单一的颜色轮廓，但这只允许我画一条线。我尝试在我的形状中使用两个 stroke 元素，但这也不起作用。有没有办法
ios - 如何绘制不同颜色的填充路径/形状
我需要为屏幕上的形状着色任何我想要的颜色。我目前正在尝试使用 UIImage 来执行此操作，我想根据自己的需要重新着色。据我所知，执行此操作的唯一方法是获取 UIImage 的各个像素，这需要更多我想
java - 面向对象的设计 - 形状
因此，经过多年的 OOP，我从我的一门大学类(class)中得到了一个非常简单的家庭作业，以实现一个简单的面向对象的结构。要求的设计: 实现面向对象的解决方案以创建以下形状: 椭圆、圆形、正方形、矩
CSS3 形状 - 什么是可能的？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
css - 制作一个笨拙的 div 形状
我想知道是否可以使用类似于以下的 div 制作复杂的形状: 它基本上是一个四 Angular 向内收缩的圆 Angular 正方形。目标是使用背景图像来填充它。我可以使用具有以下 SVG 路径的剪辑蒙

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Threejs 波纹板定制形状