three.js extrude shape代码示例

ExtrudeBufferGeometry example: heart shape and cloud shape

three, extrude

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.y = 1;
camera.position.z = 20;

//构建场景代码放在这里
var extrudeSettings = {
    amount: 8,
    bevelEnabled: true,
    bevelSegments: 2,
    steps: 2,
    bevelSize: 1,
    bevelThickness: 1
};

const cloudShape = new THREE.Shape();
cloudShape.moveTo(0, 0);
cloudShape.bezierCurveTo(5, 0, 7, 0, 8.75, 0);
cloudShape.bezierCurveTo(11.4, 0.2, 10.4, 3, 8.5, 2.75);
cloudShape.bezierCurveTo(9.1, 4.8, 6.8, 5.85, 5.95, 3.9);
cloudShape.bezierCurveTo(6.6, 6.25, 2.6, 7.1, 2.5, 3.9);
cloudShape.bezierCurveTo(1.65, 6.45, -1.7, 4.9, -0.25, 2.7);
cloudShape.bezierCurveTo(-2.75, 3.15, -3.15, -0.5, 0, 0);

const cloudGeom = new THREE.ExtrudeBufferGeometry(cloudShape, extrudeSettings);
var cloudMesh = new THREE.Mesh(cloudGeom);
scene.add(cloudMesh);

var heartShape = new THREE.Shape();

heartShape.moveTo(2.5, 2.5);
heartShape.bezierCurveTo(2.5, 2.5, 2.0, 0, 0, 0);
heartShape.bezierCurveTo(3.0, 0, 3.0, 3.5, 3.0, 3.5);
heartShape.bezierCurveTo(3.0, 5.5, 1.0, 7.7, 2.5, 9.5);
heartShape.bezierCurveTo(6.0, 7.7, 8.0, 5.5, 8.0, 3.5);
heartShape.bezierCurveTo(8.0, 3.5, 8.0, 0, 5.0, 0);
heartShape.bezierCurveTo(3.5, 0, 2.5, 2.5, 2.5, 2.5);

var heartGeom = new THREE.ExtrudeBufferGeometry(heartShape, extrudeSettings);
var heartMesh = new THREE.Mesh(heartGeom);
scene.add(heartMesh);

var render = function() {
    requestAnimationFrame(render);

//更新场景代码放在这里

renderer.render(scene, camera);
};

render();

编译

CSS

HTML

ExtrudeBufferGeometry example: heart shape and cloud shape

three, extrude

编辑器支持Emmet

快捷键

ExtrudeBufferGeometry example: heart shape and cloud shape

three, extrude

three.js透明阴影（transparency shadow）代码示例

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：