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);
    }
}

只要我使用点材料，一切正常 - 我可以看到我的几何：

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

但是一旦我想使用任何其他材料看到像“坚实”表面的东西，我就看不到任何东西，例如：

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);

之后，您照常使用材料。

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

以下是CodePen;

中的一个示例

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

R87

THREE.js中的几何材料

1 个答案: