Increase thickness of cylinder in three js

问题

I am trying to increase thickness of cylinder using ThreeBSP. Using this http://jsfiddle.net/gerdonabbink/tephoLr1/133/ fiddle but it gives me an constructor error.

Type Error: ThreeBSP is not a constructor

currently i am using <script type="module"> to load all JS file using 'import' keyword. so is there need to alter library? because i haven't seen any export statement in library so, or is there any other way is available to increase thickness of cylinder?

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

回答1:

You can form such cylinder, using the approach with THREE.Shape and 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>

来源：https://stackoverflow.com/questions/58498014/increase-thickness-of-cylinder-in-three-js

标签

three.js