three.js使用细分修改器（SubdivisionModifier）实现圆角立方体

three.js round corner cube

three, cube, modifier

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3634
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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

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

var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(10, 10, 10);
scene.add(dirLight);

scene.add(new THREE.AmbientLight(0x404040));

/*var loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin("");
loader.setPath( 'https://techbrood.com/threejs/examples/textures/cube/pisa/' );

var textureCube = loader.load( [
	'px.png', 'nx.png',
	'py.png', 'ny.png',
	'pz.png', 'nz.png'
] );*/

var cubeMat = new THREE.MeshStandardMaterial({
    roughness: 0.5,
    metalness: 1
});

var cubeGeo = new THREE.BoxGeometry(3, 3, 3, 10, 10, 10);
var smooth = cubeGeo.clone();
var modifier = new THREE.SubdivisionModifier(3);
modifier.modify(smooth);
cubeGeo = smooth;

cubeGeo.computeVertexNormals();

var cube = new THREE.Mesh(cubeGeo, cubeMat);
cube.position.set(0, 0, 0);
scene.add(cube);

render();

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

编译

CSS

HTML

three.js round corner cube

three, cube, modifier

编辑器支持Emmet

快捷键

three.js round corner cube

three, cube, modifier

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

three.js使用Points和RawShaderMaterial实现高性能3D点云

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：