Three js

Developer
Size
2,353 Kb
Views
14,168

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 Previews

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);	}
Three js - Script Codes
Three js - Script Codes
Home Page Home
Developer Paul
Username paulq
Uploaded October 27, 2022
Rating 3
Size 2,353 Kb
Views 14,168
Do you need developer help for Three js?

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!

Paul (paulq) Script Codes
Create amazing love letters 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!