Three js
How do I make an three js?
Example camera controlls. What is a three js? How do you make a three js? This script and codes were developed by Paul on 27 October 2022, Thursday.
Three js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>three js</title>
</head>
<body> <div id="container"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Three js - Script Codes JS Codes
//if(!Detector.webgl) Detector.addGetWebMessage(); var container; var width = window.innerWidth; var height = window.innerHeight; var camera, controls, scene, renderer; var axes; // aufruf der functionen init(); render(); // function animate(){ requestAnimationFrame(animate); controls.update(); } // hauptteil function init(){ //camera camera = new THREE.PerspectiveCamera(60, width / height, 1, 4000); camera.position.z = 4000; //controls !! controls = new THREE.OrbitControls(camera); //what does this? controls.damping = 0.2; //controls.addEventListener ('change', render); //fix ?? //controls.target.set(0, 4, 0); //camera.lookAt(controls.target); //scene scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0xcccccc, 0.0002 ); //scene.fog = new THREE.FogExp2( 0x9999ff, 0.0001 ); //creating a world var geometry = new THREE.CylinderGeometry(0,20,50,5,1); var material = new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading }); //define random number of objects for( var i = 0;i<10000;i++){ var mesh = new THREE.Mesh(geometry, material); mesh.position.x = (Math.random() -0.5) * 10000; mesh.position.y = (Math.random() -0.5) * 10000; mesh.position.z = (Math.random() -0.5) * 10000; //check updateMatrix mehtod!!!! mesh.updateMatrix(); mesh.matrixAutoUpdate = false; scene.add(mesh); } //(lights) //multiple erstmal rauslassen light = new THREE.DirectionalLight(0xffffff); light.position.set(1,1,1); scene.add(light); light = new THREE.DirectionalLight( 0x002288 ); light.position.set( -1, -1, -1 ); scene.add( light ); light = new THREE.AmbientLight(0x222222); scene.add(light); //..helper axes = new THREE.AxisHelper(4000); scene.add(axes); //renderer renderer = new THREE.WebGLRenderer({ antialias: false}); renderer.setClearColor(scene.fog.color, 1); renderer.setSize(width, height); container = document.getElementById('container'); container.appendChild(renderer.domElement); //rest window.addEventListener('resize', onWindowResize, false); controls.addEventListener('change', render);; animate(); } function onWindowResize(){ camera.aspect = width/height; camera.updateProjectionMatrix(); renderer.setSize(width, height); render(); } function render(){ renderer.render(scene, camera); }
Developer | Paul |
Username | paulq |
Uploaded | October 27, 2022 |
Rating | 3 |
Size | 2,353 Kb |
Views | 14,168 |
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!
Name | Size |
Setter getter closure functions | 1,662 Kb |
A Pen by paul | 1,441 Kb |
Callback function | 2,939 Kb |
Dropdow | 2,466 Kb |
Keyframes and Webkits with LESS | 2,630 Kb |
Canvas tutorial | 2,043 Kb |
Parallax on scrollevent | 2,386 Kb |
TabContainer pure css3 | 2,769 Kb |
Input tabcontainer | 4,390 Kb |
Sitemap getter | 1,823 Kb |
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!
Name | Username | Size |
Social.svg.min | Larsenwork | 13,849 Kb |
Map Controls | Iliadraznin | 3,721 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
Click handler test | Snapson | 2,329 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
3D-box | Parthviroja | 2,346 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!