Prueba three.js
How do I make an prueba three.js?
What is a prueba three.js? How do you make a prueba three.js? This script and codes were developed by Juan Manuel on 18 October 2022, Tuesday.
Prueba three.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Prueba three.js</title>
</head>
<body> <div id="container"></div> <script src='https://threejs.org/build/three.min.js'></script>
<script src='https://threejs.org/examples/js/Detector.js'></script>
<script src='https://threejs.org/examples/js/libs/stats.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Prueba three.js - Script Codes JS Codes
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container,stats; var camera, scene, sceneAnimationClip; var renderer; var mesh, helper; var mixer; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var clock = new THREE.Clock(); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); init(); animate(); function init() { container = document.getElementById( 'container' ); camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 ); camera.position.z = 150; scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 ); //scene.add( camera ); // GROUND var geometry = new THREE.PlaneBufferGeometry( 16000, 16000 ); var material = new THREE.MeshPhongMaterial( { emissive: 0x000000 } ); var ground = new THREE.Mesh( geometry, material ); ground.position.set( 0, FLOOR, 0 ); ground.rotation.x = -Math.PI/2; /*scene.add( ground );*/ ground.receiveShadow = true; // RENDERER renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setClearColor( scene.fog.color ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); renderer.domElement.style.position = "relative"; container.appendChild( renderer.domElement ); renderer.gammaInput = true; renderer.gammaOutput = true; renderer.shadowMap.enabled = true; // STATS stats = new Stats(); container.appendChild( stats.domElement ); // var loader = new THREE.ObjectLoader(); loader.load( "models/json/scene-animation.json", function ( loadedScene ) { sceneAnimationClip = loadedScene.animations[0]; scene = loadedScene; scene.add( camera ); scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 ); mixer = new THREE.AnimationMixer( scene ); mixer.addAction( new THREE.AnimationAction( sceneAnimationClip ) ); } ); window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ); mouseY = ( event.clientY - windowHalfY ); } // function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { var delta = 0.75 * clock.getDelta(); camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y = THREE.Math.clamp( camera.position.y + ( - mouseY - camera.position.y ) * .05, 0, 1000 ); camera.lookAt( scene.position ); if( mixer ) { //console.log( "updating mixer by " + delta ); mixer.update( delta ); } renderer.render( scene, camera ); }
Developer | Juan Manuel |
Username | juanmanuelcarnerero |
Uploaded | October 18, 2022 |
Rating | 3 |
Size | 2,513 Kb |
Views | 12,144 |
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 |
Pruebas con Three.js | 2,288 Kb |
Drag an drop d3.js que no funciona | 1,803 Kb |
Ejemplo drag and drop simple | 2,347 Kb |
Sodoku1 | 5,413 Kb |
Barra izquierda | 1,796 Kb |
Ejemplo de formateo de formulario | 2,063 Kb |
Example of layout force | 4,074 Kb |
Coat.pug | 1,501 Kb |
Lista de datos y enlace | 2,080 Kb |
Pruebas input | 1,270 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 |
Degree Picker | Idered | 4,307 Kb |
Minimelephant | Smashlee | 2,507 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 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!