Question

我很好奇是否有可能呈现此对象，以用于在three.js中导出和使用

pic of cylinder

当时看起来很简单，但要使其正常工作一直很麻烦。我可以通过Blender的“自由式线条”接近我想要的东西，但它们不可导出。

cylinder in blender

看起来我将不得不制作自定义材料或类似的东西，但是我想知道是否还有一种更直接的方式我从未见过。我尝试了Three的“线框”和“ EdgeGeometry”工具，但我试图避免渲染模型的内部边缘。

除非有我看不到的东西，否则要用UV绘制出数学上完美的圆柱轮廓似乎真的很困难！

无论如何，谢谢您的时间

Answer 1

我不确定这种方法的正确性，但是其结果几乎相似到您提供的图片上显示的内容。

Reference

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5).setLength(400);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x999999);
renderer.setSize(window.innerWidth, window.innerHeight);
effect = new THREE.OutlineEffect(renderer);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var cylinder = new THREE.Mesh(new THREE.CylinderBufferGeometry(100, 100, 200, 32), new THREE.MeshBasicMaterial({
  color: "white"
}));
scene.add(cylinder);

var lid = new THREE.Mesh(new THREE.CylinderBufferGeometry(99, 99, 0.001, 32), new THREE.MeshBasicMaterial({
  color: "white"
}));
lid.geometry.translate(0, 101.0, 0);
scene.add(lid);

var lid2 = new THREE.Mesh(new THREE.CylinderBufferGeometry(99, 99, 0.001, 32), new THREE.MeshBasicMaterial({
  color: "white"
}));
lid2.geometry.translate(0, -101.0, 0);
scene.add(lid2);

render();

function render() {
  requestAnimationFrame(render);
  effect.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>
<script src="https://threejs.org/examples/js/effects/OutlineEffect.js"></script>

在搅拌器或three.js中3D渲染2D圆柱体？

1 个答案: