javascript - THREE.js 中的几何 Material

Question

我正在 THREE.js 中创建一个几何体:

var dotGeometry = new THREE.Geometry();
dotGeometry.dynamic = true;

var createDot = function (group, x, y, z){
    group.vertices.push(new THREE.Vector3( x, y, z));
}

var width = 300;
var height = 300;
var gap = 0.1;

for(var i = 0; i < width; i++){
    for(var j = 0; j < height; j++){
        createDot(dotGeometry, i*gap, j*gap, 0);
    }
}

只要我使用点 Material ，一切正常 - 我可以看到我的几何图形:

var dotMaterial = new THREE.PointsMaterial( { size: 1, color: 0xffffff, sizeAttenuation: false } );
var dot = new THREE.Points( dotGeometry, dotMaterial );
scene.add( dot );

但是一旦我想使用任何其他 Material 来查看类似“实体”表面的东西，我就什么也看不到了，例如:

var dotMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );
var dot = new THREE.Points( dotGeometry, dotMaterial );
scene.add( dot );

geometry 只能与 PointsMaterial 一起使用还是我做错了什么？

示例 1:工作

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

var renderer = new THREE.WebGLRenderer();

var light = new THREE.PointLight(0xffffff, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var dotGeometry = new THREE.Geometry();
dotGeometry.dynamic = true;

var createDot = function (group, x, y, z){
    group.vertices.push(new THREE.Vector3( x, y, z));
}

var width = 300;
var height = 300;
var gap = 0.1;

for(var i = 0; i < width; i++){
    for(var j = 0; j < height; j++){
        createDot(dotGeometry, i*gap, j*gap, 0);
    }
}

var dotMaterial = new THREE.PointsMaterial( { size: 1, color: 0xffffff, sizeAttenuation: false } );
var dot = new THREE.Points( dotGeometry, dotMaterial );

scene.add( dot );
scene.add(light);

camera.position.z = 5;
light.position.y = 2;
light.position.z = 5;
light.position.x = 0;

var render = function() {
  requestAnimationFrame(render);

  dot.rotation.x += 0.01;
  dot.rotation.y += 0.01;

  renderer.render(scene, camera);
};

render();

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

示例 2:不工作

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

var renderer = new THREE.WebGLRenderer();

var light = new THREE.PointLight(0xffffff, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var dotGeometry = new THREE.Geometry();
dotGeometry.dynamic = true;

var createDot = function (group, x, y, z){
    group.vertices.push(new THREE.Vector3( x, y, z));
}

var width = 300;
var height = 300;
var gap = 0.1;

for(var i = 0; i < width; i++){
    for(var j = 0; j < height; j++){
        createDot(dotGeometry, i*gap, j*gap, 0);
    }
}

var dotMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );
var dot = new THREE.Points( dotGeometry, dotMaterial );

scene.add( dot );
scene.add(light);

camera.position.z = 5;
light.position.y = 2;
light.position.z = 5;
light.position.x = 0;

var render = function() {
  requestAnimationFrame(render);

  dot.rotation.x += 0.01;
  dot.rotation.y += 0.01;

  renderer.render(scene, camera);
};

render();

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

感谢您的帮助!

Answer 1

您可以做的是使用您的 geometry.vertices 来填充 ConvexGeometry (您需要链接到 ConvexGeometry.js 和 QuickHull.js)。

您像以前一样创建几何图形

dotGeometry.vertices.push(new THREE.Vector3(0, 0, 0));

然后您需要像这样将其传递给您的ConvexGeometry:

var geometry = new THREE.ConvexGeometry(dotGeometry.vertices);

之后，您可以像往常一样应用您的 Material 。

var material = new THREE.MeshPhongMaterial({
    color: 0xffffff
});
var mesh = new THREE.Mesh(geometry, material);

这是 CodePen 中的示例;

这是假设您需要一个凸形。如果您只需要一架飞机，请使用 PlaneGeometry .

r87