three.js构建ShapeGeometry代码实例

a code template for generating three.js shape geometry，本例生成一个心形的多边形平面几何体。

three, shape, template, heart

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* Read more on：
http://techbrood.com/threejs/docs */

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 = 5;
camera.position.z = 30;

//构建场景代码放在这里
var x = 0, y = 0;

var heartShape = new THREE.Shape();

heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

var geometry = new THREE.ShapeGeometry( heartShape );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

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

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

renderer.render(scene, camera);
};

render();

编译

CSS

HTML

a code template for generating three.js shape geometry，本例生成一个心形的多边形平面几何体。

three, shape, template, heart

编辑器支持Emmet

快捷键

a code template for generating three.js shape geometry，本例生成一个心形的多边形平面几何体。

three, shape, template, heart

three.js实例化几何体（InstancedBufferGeometry）代码示例

three.js光线行进（ray marching picking）代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：