29-THREE.JS 根據公式畫形狀
阿新 • • 發佈：2018-10-31
wire https aced control ane sig animation adr geo
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <div id="Stats-output"> </div> <div id="WebGL-output"> </div> <script type="text/javascript"> // 初始化 function init() { var stats = initStats(); // 創建一個場景 var scene = new THREE.Scene(); // 創建一個相機 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 創建一個渲染器 var webGLRenderer = new THREE.WebGLRenderer(); webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); webGLRenderer.setSize(window.innerWidth, window.innerHeight); webGLRenderer.shadowMapEnabled = true; var shape = createMesh(new THREE.ShapeGeometry(drawShape())); // 把形狀添加到場景中去 scene.add(shape); // 設置相機的場景 camera.position.x = -30; camera.position.y = 70; camera.position.z = 70; camera.lookAt(new THREE.Vector3(10, 0, 0)); // 添加聚光燈 var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); scene.add(spotLight); // 把渲染之後的結果放到DOM元素中去 document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement); var step = 0; var controls = new function () { this.asGeom = function () { // remove the old plane scene.remove(shape); // create a new one shape = createMesh(new THREE.ShapeGeometry(drawShape())); // add it to the scene. scene.add(shape); }; this.asPoints = function () { // remove the old plane scene.remove(shape); // create a new one shape = createLine(drawShape(), false); // add it to the scene. scene.add(shape); }; this.asSpacedPoints = function () { // remove the old plane scene.remove(shape); // create a new one shape = createLine(drawShape(), true); // add it to the scene. scene.add(shape); }; }; var gui = new dat.GUI(); gui.add(controls, ‘asGeom‘); gui.add(controls, ‘asPoints‘); gui.add(controls, ‘asSpacedPoints‘); render(); function drawShape() { // create a basic shape var shape = new THREE.Shape(); // startpoint shape.moveTo(10, 10); // straight line upwards shape.lineTo(10, 40); // the top of the figure, curve to the right shape.bezierCurveTo(15, 25, 25, 25, 30, 40); // spline back down shape.splineThru( [new THREE.Vector2(32, 30), new THREE.Vector2(28, 20), new THREE.Vector2(30, 10), ]); // curve at the bottom shape.quadraticCurveTo(20, 15, 10, 10); // add ‘eye‘ hole one var hole1 = new THREE.Path(); hole1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true); shape.holes.push(hole1); // add ‘eye hole 2‘ var hole2 = new THREE.Path(); hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true); shape.holes.push(hole2); // add ‘mouth‘ var hole3 = new THREE.Path(); hole3.absarc(20, 16, 2, 0, Math.PI, true); shape.holes.push(hole3); // return the shape return shape; } function createMesh(geom) { // assign two materials var meshMaterial = new THREE.MeshNormalMaterial(); meshMaterial.side = THREE.DoubleSide; var wireFrameMat = new THREE.MeshBasicMaterial(); wireFrameMat.wireframe = true; // create a multimaterial var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); return mesh; } function createLine(shape, spaced) { console.log(shape); if (!spaced) { var mesh = new THREE.Line(shape.createPointsGeometry(10), new THREE.LineBasicMaterial({ color: 0xff3333, linewidth: 2 })); return mesh; } else { var mesh = new THREE.Line(shape.createSpacedPointsGeometry(3), new THREE.LineBasicMaterial({ color: 0xff3333, linewidth: 2 })); return mesh; } } function render() { stats.update(); shape.rotation.y = step += 0.01; // render using requestAnimationFrame requestAnimationFrame(render); webGLRenderer.render(scene, camera); } function initStats() { var stats = new Stats(); stats.setMode(0); // 0: fps, 1: ms // Align top-left stats.domElement.style.position = ‘absolute‘; stats.domElement.style.left = ‘0px‘; stats.domElement.style.top = ‘0px‘; document.getElementById("Stats-output").appendChild(stats.domElement); return stats; } } window.onload = init; </script> </body> </html>
29-THREE.JS 根據公式畫形狀