Prueba three.js

Developer
Size
2,513 Kb
Views
12,144

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 Previews

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 );	}
Prueba three.js - Script Codes
Prueba three.js - Script Codes
Home Page Home
Developer Juan Manuel
Username juanmanuelcarnerero
Uploaded October 18, 2022
Rating 3
Size 2,513 Kb
Views 12,144
Do you need developer help for Prueba 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!

Juan Manuel (juanmanuelcarnerero) Script Codes
Create amazing Facebook ads 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!