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 中的属性

javascript - Threejs - 在向 Threejs 对象添加纹理贴图时保持纵横比
我们想要创建一个 3D 鞋子设计工具，您可以在其中设计图案并将其上传到鞋子上。我正在尝试将图像放置在 Threejs Material 上。我可以更新 map ，但纹理很模糊。我是 Threejs
javascript - ThreeJS FBX模型是片面的
我正在尝试在 ThreeJS 中加载 FBX 模型。如果我加载模型，它只会从底部显示，而不是从顶部显示。似乎只渲染了一侧。有没有人想解决这个问题？我的加载函数: _LoadAnimatedMode
vector - Threejs - 如何按距离偏移二维几何体上的所有点
使用 Three.js，(虽然我相信这与数学更相关)我有一组可以创建二维几何体的二维点。例如正方形、矩形、五边形或自定义 2D 形状。基于原始的 2D 形状，我想创建一种方法来像附图那样均匀地向内或向
javascript - threejs 立方体相机没有像我预期的那样反射
我正在尝试创建一个在所有方面都镜像的对象。它几乎可以正常工作，但我不确定我在这里做错了什么。我只能看到某些 Angular 部分反射，并且反射的范围比被反射的物体(大象)大得多。这是代码:
javascript - ThreeJS - 错误的光旋转
无论导入场景，还是通过代码创建每个网格和灯光，都会出现以下问题。我的场景由一个平面、一个立方体和一个聚光灯组成。聚光灯在 y 轴上旋转 45 度。在示例 1 中，它位于点 (4, 0, 4)。在示例
javascript - 移动物体性能 - ThreeJs
上下文: 我正在开发一个非常简单的 THREE.JS 项目，我相信它已经以非常好的方式进行了优化。我正在使用 WebGLRenderer 来显示每 50 毫秒从音频信号中提取的大量波特图。这非常酷，但
javascript - ThreeJS 禁用相机后面的面部渲染
我正在编写一个全景查看器。图像显示在具有可变数量面的球体中。我希望它只在相机方向渲染脸部(以获得更好的性能)。 ThreeJS 会自动执行此操作吗？或者我可以声明不渲染的混搭的特定面吗？像mash.
javascript - Threejs 几何颜色
我使用十六进制值设置几何颜色 RichGeometry.prototype = new THREE.Geometry(); RichGeometry.prototype.constructor = R
javascript - Threejs 阴影不渲染
因此，我查看了此处的所有其他影子问题，但似乎没有一个与我的相关，或者我只是忽略了它大约 10 次。 https://gist.github.com/Sinistralis/58249d2f9aefa8
javascript - ThreeJS 中阴影的奇怪行为
所以我有一个 ThreeJS 场景，并且添加了一些球体(多 Material )。我还添加了定向光: this.light = new THREE.DirectionalLight( 0xFFFFFF
javascript - Threejs 创建多个对象并分别针对它们
我在“two.js”中创建了一个立方体，但我想创建同一个立方体 3 次，然后将它们作为目标，以便可以使用“Tweenmax”单独对它们进行动画处理我是 Three.js 的新手，因此我们将不胜感激
javascript - ThreeJS，获取指向点击方向的向量
我想要实现的是让特定的网格体向特定的向量移动，直到它最终被玩家停止。到目前为止，我已经成功获取了单击 Canvas 的 XY 坐标，并使用以下代码将它们投影到 3D 中。不幸的是，我不确定采取什么方
javascript - ThreeJS 对象组中的面部未收到阴影
我遇到了 Object3D 组中的面上未接收到阴影的问题。阴影从物体转换并被地面接收，但阴影在应该被接收的时候却没有被彼此接收。我四处搜寻，但似乎找不到类似的问题，这让我相信我的设置不正确。有人
javascript - ThreeJS 中克隆一组对象的函数？
我正在尝试为我的类(class)创建一个场景，其中必须克隆一组对象(模型)并将其显示在随机位置。我为此创建了一个函数，但不幸的是，它只能将同一个对象从一个地方传输到另一个地方。我需要添加更多对象而不是
javascript - Threejs 二十面体几何顶点颜色
我正在尝试动态更改选定顶点的颜色。引用https://jsfiddle.net/pmankar/m70cpxes/ ，我创建了一个二十面体几何点云几何体，并且在单击事件时我想更改顶点 100 的颜色。
javascript - 放大和缩小 Threejs
我已将球体添加到场景中，并在场景中添加了一些平面几何图形，当我放大时，我希望平面几何图形看起来更小，当我缩小时，平面几何图形应该显得更大，我不知道如何解决这个问题有人可以帮我解决这个问题吗？最佳答案
javascript - Threejs 动画对象不起作用
我开始学习使用 Threejs 创建旋转 3D 立方体。我关注了this教程，但为对象的旋转设置动画不起作用。在此之前，我收到旋转未定义的错误。我在 animate() 中使用以下代码解决了这个问题
javascript - Threejs 纹理
当我执行某些几何体的渲染时，我可以在控制台中看到此警告: THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter sho
javascript - Threejs，了解Raycaster相交的对象坐标
您好，我有一个疑问：我已经实现了光线投射器，并且已经进行了手动测试，但是我不知道为什么在3D模型上进行的大多数点击都没有得到交点。首先，我将向您展示我单击的点，然后向您显示在Web控制台中记录的点
javascript - Threejs，向场景添加点但看不到它们
您好，我有一个疑问: 我研究过: https://threejs.org/docs/#api/materials/PointsMaterial 我已经调整了该示例以与我现有的代码一起使用。目的是在我

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Threejs 波纹板定制形状