three.js从入门到精通系列教程051 - 制作立体桃心图形
·
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.js从入门到精通系列教程051 - 制作立体桃心图形</title>
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
<script src="ThreeJS/OrbitControls.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({ antialias: true });
myRenderer.setClearColor('white', 1.0);
myRenderer.setSize(window.innerWidth, window.innerHeight);
$("#myContainer").append(myRenderer.domElement);
var myCamera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
myCamera.position.set(0, -100, -130);
var myScene = new THREE.Scene();
myScene.add(new THREE.AmbientLight(0xffffff, 0.9));
//渲染桃心图形
animate();
function animate() {
myRenderer.render(myScene, myCamera);
requestAnimationFrame(animate);
}
//创建桃心图形
var myShape = new THREE.Shape();
var x = 0, y = 0;
myShape.moveTo(x + 5, y + 5);
myShape.bezierCurveTo(x + 5, y + 5, x + 4, y, x, y);
myShape.bezierCurveTo(x - 6, y, x - 6, y + 7, x - 6, y + 7);
myShape.bezierCurveTo(x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19);
myShape.bezierCurveTo(x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7);
myShape.bezierCurveTo(x + 16, y + 7, x + 16, y, x + 10, y);
myShape.bezierCurveTo(x + 7, y, x + 5, y + 5, x + 5, y + 5);
var myOptions = {
depth: 4, bevelEnabled: true, bevelThickness: 1,
bevelSize: 1, bevelSegments: 24,
};
var myGeometry = new THREE.ExtrudeBufferGeometry(myShape, myOptions);
var myMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, wireframe: true });
var myMesh = new THREE.Mesh(myGeometry, myMaterial);
myMesh.scale.set(5, 5, 5);
myMesh.position.y = 30;
myMesh.position.x = -30;
myMesh.rotation.x = 60;
myScene.add(myMesh);
//创建轨道控制器(旋转、缩放桃心图形)
var myOrbitControls = new THREE.OrbitControls(myCamera);
</script>
</body>
</html>
更多推荐
7
0- 0
已为社区贡献6条内容
所有评论(0)