Basic Threejs Scene

Developer
Omar Shehata
Size
2,188 Kb
Views
26,312
  1. Basic Threejs Scene Previews
  2. Basic Threejs Scene HTML Codes
  3. Basic Threejs Scene CSS Codes
  4. Basic Threejs Scene JS Codes

How do I make an basic threejs scene?

A simple set up to follow along with the Tutsplus guide on graphics shaders. What is a basic threejs scene? How do you make a basic threejs scene? This script and codes were developed by Omar Shehata on 13 August 2022, Saturday.

Basic Threejs Scene Previews
IQ Test

Basic Threejs Scene - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic Threejs Scene</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Basic Threejs Scene - Script Codes CSS Codes

/* We want our scene to span the entire window */
body { margin: 0; }

Basic Threejs Scene - Script Codes JS Codes

//@author Omar Shehata. 2015.	//We are loading the Three.js library from the cdn here: http://cdnjs.com/libraries/three.js/	var scene;	var camera;	var renderer;	function scene_setup(){	//This is all code needed to set up a basic ThreeJS scene	//First we initialize the scene and our camera	scene = new THREE.Scene();	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );	//We create the WebGL renderer and add it to the document	renderer = new THREE.WebGLRenderer();	renderer.setSize( window.innerWidth, window.innerHeight );	document.body.appendChild( renderer.domElement );	}	scene_setup();	//Add your code here!	var geometry = new THREE.BoxGeometry( 1, 1, 1 );	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );//We make it green	var cube = new THREE.Mesh( geometry, material );	//Add it to the screen	scene.add( cube );	cube.position.z = -3;//Shift the cube back so we can see it	//Render everything!	function render() { cube.rotation.y += 0.05;	requestAnimationFrame( render );	renderer.render( scene, camera );	}	render();
Basic Threejs Scene - Script Codes
Basic Threejs Scene - Script Codes
Home Page Home
Developer Omar Shehata
Username omarshe7ta
Uploaded August 13, 2022
Rating 3
Size 2,188 Kb
Views 26,312
Do you need developer help for Basic Threejs Scene?

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!

Omar Shehata (omarshe7ta) Script Codes
Name
Simple Lighting Model
Framebuffer - Final
Cube Sides
Framebuffer - Basic Scene
ACM Drawing Practice
Ball Demo
Pixijs.v3 Sending Data to Shader
Buggy Smoke
Framebuffer - Texture Render
Rotating Cube
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!