更多有趣示例 尽在小红砖社区

示例

HTML

<div id="controls"><button id="generate" class="btn btn-secondary" onclick="generateTree()">New Tree</button><br><br><button id="saveOBJ" class="btn btn-secondary" onclick="exportSceneOBJ()">Save as OBJ file</button><br><br><button id="saveSTL" class="btn btn-secondary" onclick="exportSceneSTL()">Save as STL file</button>
</div>
</div>
<div id="ThreeJS" style="z-index: 0; position: absolute; left:0px; top:30vh; height:70vh"></div><!-- Trigger/Open The Modal -->
<button id="myBtn" class="btn btn-primary">🛈 Help</button><!-- The Modal -->
<div id="myModal" class="modal"><!-- Modal content --><div class="modal-content"><span class="close">&times;</span><h5>Parameter Descriptions:</h5><br><br><ul><li>Max Slices:<br>controls the maximum number of branch sub-sectionsthat are allowed to be rendered</li><br><li>Split Chance:<br>controls the probability of a new branch splitting off of aalready existing branch</li><br><li>Angle Mod:<br>modifies how much a branch can change its angle by for each sub-section</li><br><li>Height Mod:<br>multiplies the height of the branch-subsections, making the treetaller</li><br><li>Width Mod:<br>multiplies the speed at which branches spread out, making the tree wider</li><br><li>Starting Size:<br>Changes the radius of the stump of the tree, making the tree wideror slimer around the base</li><br><li>Size Decrement:<br>Sets the amount by which the branches get reduced in width for each sub-section </li><br><li>Branch Variance:<br>Changes the percentage in width that a child branch can be smaller than a parent branch by. Generally makes trees look more "natural" and random.</li><br><li>Sections:<br>controls the number of faces that each sub-section of a branch has. Increase to produce more rounded looking branches</li></ul></div></div> 

CSS

body 
{font-family: Monospace;font-weight: bold;background-color: black;margin: 0px;overflow: hidden;
}#controls{position:absolute;top:0; left:0;z-index:1;margin:20px;
}.dg.ac{position: absolute;z-index:2;
}#myBtn{position:absolute;bottom: 20px;right: 20px;
}/* The Modal (background) */
.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 2; /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}/* Modal Content/Box */
.modal-content {background-color: #fefefe;margin: 15% auto; /* 15% from the top and centered */padding: 20px;border: 1px solid #888;width: 80%; /* Could be more or less, depending on screen size */
}/* The Close Button */
.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;
}.close:hover,
.close:focus {color: black;text-decoration: none;cursor: pointer;
} 

JS

var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();var slices = 0;
var maxSlices = 2500;
var angleMod = 0.05;
var splitChance = .15;var heightMod = 1;
var widthMod = .2;
var startingSize = 1;
var branchVariance = .3;var sizeMod = 4;
var sizeDec = .03;var sections = 10;var objects = [];
var gui;window.onload = function() {gui = new dat.GUI();var controllers = [];controllers.push(gui.add(this, 'maxSlices', 100, 10000));controllers.push(gui.add(this, 'splitChance', 0, 1, .01));controllers.push(gui.add(this, 'angleMod', 0, .2, .01));controllers.push(gui.add(this, 'heightMod', .1, 4, .1));controllers.push(gui.add(this, 'widthMod', .1, 1, .05));controllers.push(gui.add(this, 'startingSize', 0, 10, .01));controllers.push(gui.add(this, 'sizeDec', .01, 1, .01));controllers.push(gui.add(this, 'branchVariance', 0, 1, .01));controllers.push(gui.add(this, 'sections', 3, 30, 1));gui.add(this, 'randomizeVars');gui.add(this, 'resetVars');for (var i = 0; i < controllers.length; i++){controllers[i].onFinishChange(function(){generateTree();});}
};function RW(x, y, z, size, tickOffset){this.x = x;this.y = y;this.z = z;this.prevX = x;this.prevY = y;this.prevZ = z;this.prevSize = this.size;this.size = size;this.numTicks = tickOffset;this.speed = Math.random()*widthMod + .05;this.angle = Math.random()*2*Math.PI;this.angleMod = Math.random()*angleMod + .05;this.angleMod *= 2*Math.PI;this.geom = new THREE.Geometry();this.update = function(){slices++;this.prevX = this.x;this.prevY = this.y;this.prevZ = this.z;this.prevSize = this.size;this.x += Math.cos(this.angle)*this.speed*sizeMod;this.y += Math.sin(this.angle)*this.speed*sizeMod;this.z += heightMod;this.size -= sizeDec;if (this.size < 0) return;if (Math.random() < .5) this.angleMod *= -1;this.angle += Math.random()*this.angleMod;var vertices = [];for (var i = 0; i < sections; i++){var mod = 0if (this.numTicks%2 == 0) mod = .5;var ratio = (i+mod)/sections;var ratio2 = (i + .5 + mod)/sections;var a1 = ratio*2*Math.PI;var a2 = ratio2*2*Math.PI;vertices.push(new THREE.Vector3((Math.cos(a1)*this.prevSize + this.prevX)*sizeMod,this.prevZ*sizeMod,(Math.sin(a1)*this.prevSize + this.prevY)*sizeMod));vertices.push(new THREE.Vector3((Math.cos(a2)*this.size + this.x)*sizeMod,this.z*sizeMod,(Math.sin(a2)*this.size + this.y)*sizeMod));}var base = this.geom.vertices.length;for (var i = 0; i < vertices.length; i++){this.geom.vertices.push(vertices[i]);}for (var i = 0; i < vertices.length; i++){if (i%2 == 1){this.geom.faces.push(new THREE.Face3(// base + i,base + (i+2)%vertices.length,base + (i+1)%vertices.length,base + i,));} else {this.geom.faces.push(new THREE.Face3(base + i,base + (i+1)%vertices.length,base + (i+2)%vertices.length));}}this.numTicks++;}
}init();
animate();function init() 
{scene = new THREE.Scene();var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;	var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);scene.add(camera);camera.position.set(0,150,400);camera.lookAt(scene.position);//// RENDERER ////if ( Detector.webgl ) renderer = new THREE.WebGLRenderer( {antialias:true} );else renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);container = document.getElementById( 'ThreeJS' );container.appendChild( renderer.domElement );// EVENTS //THREEx.WindowResize(renderer, camera);THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });//// CONTROLS ////controls = new THREE.OrbitControls( camera, renderer.domElement );controls.autoRotate = true;///// STATS /////stats = new Stats();stats.domElement.style.position = 'absolute';stats.domElement.style.bottom = '0px';stats.domElement.style.zIndex = 100;container.appendChild( stats.domElement );///// LIGHT /////var light = new THREE.DirectionalLight(0xffffff);light.position.set(200,1000,200);scene.add(light);var ambientLight = new THREE.AmbientLight(0x111111);scene.add(ambientLight);//generate a tree:generateTree();
}function clearScene(){while(scene.children.length > 0){ scene.remove(scene.children[0]); }
}function generateTree(){slices = 0;for (var i = 0; i < objects.length; i++){scene.remove(objects[i]);}objects = [];var rws = [];rws.push(new RW(0, 0, 0, startingSize, 0));while(slices < maxSlices && rws.length > 0){for (var i = rws.length-1; i > -1; i--){rws[i].update();if (rws[i].size < 0){rws.splice(i, 0);continue;}if (slices < maxSlices && Math.random() < splitChance) rws.push(new RW(rws[i].x,rws[i].y,rws[i].z,rws[i].size*(Math.random()*branchVariance + (1 - branchVariance)),rws[i].numTicks%2));}}for (var i = 0; i < rws.length; i++){rws[i].geom.computeFaceNormals();// var material = new THREE.MeshPhongMaterial({color: 0xffffff});var material = new THREE.MeshNormalMaterial();// material.side = THREE.DoubleSide;material.perPixel = true;var object = new THREE.Mesh(rws[i].geom, material);object.name = "" + performance.now();objects.push(object);scene.add(object);}
}function animate() 
{requestAnimationFrame( animate );render();		update();
}function update()
{// delta = change in time since last call (in seconds)var delta = clock.getDelta(); // functionality provided by THREEx.KeyboardState.jsif ( keyboard.pressed("1") )document.getElementById('message').innerHTML = ' Have a nice day! - 1';	if ( keyboard.pressed("2") )document.getElementById('message').innerHTML = ' Have a nice day! - 2 ';	controls.update();stats.update();
}function randomizeVars(){for (var i = 0; i < gui.__controllers.length - 2; i++){var controller = gui.__controllers[i];var range = controller.__max - controller.__min;console.log(range);var value = controller.__min + Math.random()*range;if (controller.__step > 1) value = Math.floor(value);controller.setValue(value);}generateTree();
}function resetVars(){for (var i = 0; i < gui.__controllers.length; i++){gui.__controllers[i].setValue(gui.__controllers[i].initialValue);}generateTree();
}function exportSceneOBJ(){var date = new Date();var exporter = new THREE.OBJExporter();var output = exporter.parse(scene);var blob = new Blob([output], {type: "text/plain;charset=utf-8"});saveAs(blob, "Tree_" + date.getTime() + ".obj");
}function exportSceneSTL(){var date = new Date();saveSTL(scene, "TreeGeneratorSTL_" + date.getTime());
}document.body.onmousedown = function() { controls.autoRotate = false;
}
document.body.onmouseup = function() {controls.autoRotate = true;
}function render() 
{	renderer.render( scene, camera );
}// Get the modal
var modal = document.getElementById('myModal');// Get the button that opens the modal
var btn = document.getElementById("myBtn");// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];// When the user clicks on the button, open the modal
btn.onclick = function() {modal.style.display = "block";
}// When the user clicks on <span> (x), close the modal
span.onclick = function() {modal.style.display = "none";
}// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}
}