javascript - Threejs 波纹板定制形状

标签 javascript three.js geometry

我正在用如下所示的波纹板 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 前侧壁，如下图所示

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

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/

上一篇：javascript - 根据数组的键对数组进行分组，并使用组作为索引创建一个新数组

下一篇：javascript - 如何获取 JSON 数组中的 JSON 对象名称

相关文章：

javascript - 将 Drip 脚本代码片段安装到 Wix 网站

javascript - 如何动态添加问题到Vue Webpack模板的meta.js文件中？

javascript - 将粘贴事件 Hook 到隐藏的文本区域

javascript - 带有 three.js 的简单太阳系

THREE.JS - 如何检测设备性能/能力并相应地提供场景元素

javascript - 调整大小脚本会放大，而不是缩小。使用行列式会让事情变得紧张

html - CSS:创建一个带有边界半径的时钟

javascript - AngularJS : $watch vs. $observe when newValue === oldValue

javascript - Three.js 向场景添加多个立方体的更好方法

python - python中圆圈内均匀间隔点的生成器

©2024 IT工具网  联系我们