WebGL Template for ThreeJS

Developer
Michaela
Size
2,713 Kb
Views
42,504
  1. WebGL Template for ThreeJS Previews
  2. WebGL Template for ThreeJS HTML Codes
  3. WebGL Template for ThreeJS CSS Codes
  4. WebGL Template for ThreeJS JS Codes

How do I make an webgl template for threejs?

Basic template for a WebGL scene with ThreeJS. Includes a scene, camera, axis helper, window resize listener, orbit controls and a render loop.. What is a webgl template for threejs? How do you make a webgl template for threejs? This script and codes were developed by Michaela on 27 July 2022, Wednesday.

WebGL Template for ThreeJS Previews
IQ Test

WebGL Template for ThreeJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WebGL Template for ThreeJS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,
body,
#container { overflow: hidden; width: 100%; height: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="container"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/26757/OrbitControls.js'></script> <script src="js/index.js"></script>
</body>
</html>

WebGL Template for ThreeJS - Script Codes CSS Codes

html,
body,
#container { overflow: hidden; width: 100%; height: 100%;
}

WebGL Template for ThreeJS - Script Codes JS Codes

var axisHelper = {}, camera = {}, $container = {}, controls = {}, containerWidth = 0, containerHeight = 0, globalRenderID = {}, renderer = {}, scene = {};
function addListeners () { window.addEventListener( 'resize', onWindowResize );
}
function createCamera () { camera = new THREE.PerspectiveCamera( 45, containerWidth / containerHeight, 1, 2000 ); camera.position.set( 0, 0, 1000 );
}
function createControls () { controls = new THREE.OrbitControls( camera, $container.get( 0 ) ); controls.autoRotate = true; controls.autoRotateSpeed = 0.125; controls.enablePan = false; controls.maxDistance = 800; controls.minDistance = 500; controls.zoomSpeed = 0.125; controls.rotateSpeed = 0.125;
}
function createHelper () { axisHelper = new THREE.AxisHelper( 1000 );
}
function createRenderer () { $container = $( '#container' ); containerWidth = $container.innerWidth(); containerHeight = $container.innerHeight(); renderer = new THREE.WebGLRenderer(); renderer.setSize( containerWidth, containerHeight ); renderer.antialias = true; renderer.setClearColor(0xffffff, 1); $container.get( 0 ).appendChild( renderer.domElement );
}
function createScene () { scene = new THREE.Scene(); scene.add( camera, axisHelper );
}
function onWindowResize () { containerWidth = $container.innerWidth(); containerHeight = $container.innerHeight(); camera.aspect = containerWidth / containerHeight; camera.updateProjectionMatrix(); renderer.clear(); renderer.setSize( containerWidth, containerHeight );
}
function render () { globalRenderID = requestAnimationFrame( render ); controls.update(); renderer.render( scene, camera );
}
function setThreeJSSettings () { THREE.ImageUtils.crossOrigin = '';
}
setThreeJSSettings();
createRenderer();
createHelper();
createCamera();
createScene();
createControls();
addListeners();
render();
onWindowResize();
WebGL Template for ThreeJS - Script Codes
WebGL Template for ThreeJS - Script Codes
Home Page Home
Developer Michaela
Username Fischaela
Uploaded July 27, 2022
Rating 3
Size 2,713 Kb
Views 42,504
Do you need developer help for WebGL Template for ThreeJS?

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!

Michaela (Fischaela) Script Codes
Name
Profile page scibble
WebGL Wood with Sun Animation
Timeline scribble
Geildanke products
IPad app prototype template
Geildanke buttons
WebGL Game Endless Runner
Figure caption hover effect
WebGL OpenGL GLSL Shader Tests
Animation tests
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!