Question

我正在尝试使用ThreeBSP增加圆柱的厚度。使用此http://jsfiddle.net/gerdonabbink/tephoLr1/133/小提琴，但会给我构造函数错误。

Type Error: ThreeBSP is not a constructor

当前，我正在使用<script type="module">使用'import'关键字加载所有JS文件。所以需要改变图书馆吗？因为我没有在库中看到任何出口声明，或者是否有其他方法可以增加气瓶的厚度？

My Code Sample 'Instead of 'THREE' i used 'Mine' as module'

Answer 1

您可以使用THREE.Shape和THREE.ExtrudeBufferGeometry()的方法来形成这样的圆柱体：

body {
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from 'https://threejs.org/build/three.module.js'; 
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(3, 5, 8); 
var renderer = new THREE.WebGLRenderer({antialias: true}); 
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); 

var controls = new OrbitControls(camera, renderer.domElement); 

scene.add(new THREE.GridHelper(10, 10));

var arcShape = new THREE.Shape(); 
arcShape.absarc( 0, 0, 2, 0, Math.PI * 2, false ); 
var holePath = new THREE.Path(); 
holePath.absarc( 0, 0, 1, 0, Math.PI * 2, true );
arcShape.holes.push( holePath );

var extrudeGeom = new THREE.ExtrudeBufferGeometry(arcShape, {depth: 6, curveSegments: 36, bevelEnabled: false});
extrudeGeom.translate(0, 0, -3);
extrudeGeom.rotateX(-Math.PI * 0.5);

var cylinder = new THREE.Mesh(extrudeGeom, new THREE.MeshNormalMaterial());
scene.add(cylinder);


renderer.setAnimationLoop(() => { renderer.render(scene, camera); });
</script>

在三个js中增加圆柱体的厚度

1 个答案: