3D Pythagoras tree II

Developer
Josep Llodrà
Size
3,941 Kb
Views
6,072
  1. 3D Pythagoras tree II Previews
  2. 3D Pythagoras tree II HTML Codes
  3. 3D Pythagoras tree II CSS Codes
  4. 3D Pythagoras tree II JS Codes

How do I make an 3d pythagoras tree ii?

A beautiful version. What is a 3d pythagoras tree ii? How do you make a 3d pythagoras tree ii? This script and codes were developed by Josep Llodrà on 19 January 2023, Thursday.

3D Pythagoras tree II Previews
IQ Test

3D Pythagoras tree II - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Pythagoras tree II</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body class="scene"> <p><a href="https://twitter.com/josep_llodra">@josep_llodra</a></p>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Pythagoras tree II - Script Codes CSS Codes

body { overflow: hidden; background-color: #ffffff; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFF6F6F6'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjFmMWYxIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNlMWUxZTEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(50%, #f1f1f1), color-stop(51%, #e1e1e1), color-stop(100%, #f6f6f6)); background-image: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); background-image: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); background-image: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
}
p { font-family: sans-serif; position: absolute; bottom: 0;
}
a { color: black; text-decoration: none;
}
a:hover { color: black;
}

3D Pythagoras tree II - Script Codes JS Codes

// by @josep_llodra
function Scene(){ var self = this; var W, H; var camera, scene, renderer; var geometry, material, mesh; var pointLight, ambientLight; var mouseX = 0; var mouseY = 0; var nbmesh = 1; var edge_w = 100; var edge_h = 150; var levels = 10; // slow? lower this this.init = function(){ // SET scene = new THREE.Scene(); W = window.innerWidth; H = window.innerHeight; // LIGHTS pointLight = new THREE.PointLight(0xD0D0D0, 2, 1000); pointLight.position.z = 100; pointLight.position.y = 100; pointLight.position.x = 500; scene.add(pointLight); ambientLight = new THREE.AmbientLight( 0x404040 ); //scene.add(ambientLight); // CAMERA camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.x = 500; // CAST geometry = new THREE.CubeGeometry( edge_w, edge_h, edge_w ); var mesh; var color; //color = new THREE.Color(0xff0000); color = new THREE.Color("rgb(153,90,0)"); material = new THREE.MeshPhongMaterial( { color:color, wireframe: false } ); mesh = new THREE.Mesh( geometry, material ); scene.add(mesh); mesh.matrix.makeTranslation(0,-125,0); mesh.matrixAutoUpdate=false; function tree (n, mat, c) { if(n > 0) { var new_mat = new THREE.Matrix4(); var new_mat2 = new THREE.Matrix4(); var new_mat_t0 = new THREE.Matrix4(); var new_mat_t = new THREE.Matrix4(); var new_mat_r = new THREE.Matrix4(); var new_mat_r2 = new THREE.Matrix4(); var new_mat_s = new THREE.Matrix4(); var mat2 = mat.clone(); var col1 = c.clone(); var col2 = c.clone(); //col1.offsetHSL(0.12,0,0); col1.g += 0.64/levels; material = new THREE.MeshPhongMaterial( { color:col1, wireframe: false } ); mesh = new THREE.Mesh(geometry, material); new_mat_t0.makeTranslation(edge_w/2,0,0); new_mat_t.makeTranslation(0,edge_h,0); new_mat_r.makeRotationZ(-Math.PI/4); new_mat_r2.makeRotationY(Math.PI/2); new_mat_s.makeScale(0.75,0.75,0.75); new_mat.multiply(new_mat_r2); // new_mat.multiply(new_mat_t0); new_mat.multiply(new_mat_r); new_mat.multiply(new_mat_s); new_mat.multiply(new_mat_t); new_mat.multiply(mat); mesh.matrix.copy(new_mat); mesh.matrixAutoUpdate=false; mesh.updateMatrix=false; // scene.add(mesh); tree(n-1, mesh.matrix.clone(), col1); //col2.offsetHSL(0.12,0,0); col2.g += 0.64/levels; material = new THREE.MeshPhongMaterial( { color:col2, wireframe: false } ); mesh = new THREE.Mesh(geometry, material); new_mat_t0.makeTranslation(-edge_w/2,0,0); new_mat_t.makeTranslation(0,edge_h,0); new_mat_r.makeRotationZ(Math.PI/4); new_mat_r2.makeRotationY(Math.PI/2); new_mat_s.makeScale(0.75,0.75,0.75); new_mat2.multiply(new_mat_r2); // new_mat2.multiply(new_mat_t0); new_mat2.multiply(new_mat_r); new_mat2.multiply(new_mat_s); new_mat2.multiply(new_mat_t); new_mat2.multiply(mat); mesh.matrix.copy(new_mat2); mesh.matrixAutoUpdate=false; mesh.updateMatrix=false; // scene.add(mesh); tree(n-1, mesh.matrix.clone(), col2); } } tree(levels, mesh.matrix, color); // ACTION renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.querySelector('.scene').appendChild( renderer.domElement ); window.addEventListener( "resize", this.onresize); document.addEventListener( "mousemove", this.onmousemove); } this.animate = function(){ requestAnimationFrame(self.animate);	camera.position.z += ( mouseX - camera.position.z ) * .05;	camera.position.y += ( - mouseY + 100 - camera.position.y ) * .05; camera.lookAt( scene.position ); renderer.render(scene, camera); } this.onresize = function(){ W = window.innerWidth H = window.innerHeight camera.aspect = W / H; camera.updateProjectionMatrix(); renderer.setSize(W, H, true); renderer.render(scene, camera); } this.onmousemove = function(e){	mouseX = ( event.clientX - W/2 );	mouseY = ( event.clientY - H/2 ); } this.init(); this.animate();
}
var s = new Scene();
// I picked some boilerplate code from https://codepen.io/prisme/pen/wGKpe
3D Pythagoras tree II - Script Codes
3D Pythagoras tree II - Script Codes
Home Page Home
Developer Josep Llodrà
Username jllodra
Uploaded January 19, 2023
Rating 4
Size 3,941 Kb
Views 6,072
Do you need developer help for 3D Pythagoras tree II?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josep Llodrà (jllodra) Script Codes
Name
Hypnotic animation
CSS Loading text
Classic text scroller
Drawing a tree
Boxes with css arrows
UTF-8 Recycle animation
Designed by Apple in California
Mesmerizing octopus
3D Pythagoras tree
Dielectric breakdown model
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!