Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
  • Sign in
  • V Visualization
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Jobs
  • Commits
Collapse sidebar
  • Volker Coors
  • Visualization
  • Wiki
  • Three.js 101 : Hello World!
"...serene.git" did not exist on "485270fe4dd67e6102216b638b4f3fc07ce06dc5"

Three.js 101 : Hello World! · Changes

Page history
Update Three.js 101 : Hello World! authored May 29, 2023 by Alfakhori's avatar Alfakhori
Hide whitespace changes
Inline Side-by-side
Three.js-101-:-Hello-World!.md
View page @ 2a75898d
...@@ -48,7 +48,33 @@ The renderer is the place where we are going to put the result of our scene. In ...@@ -48,7 +48,33 @@ The renderer is the place where we are going to put the result of our scene. In
![image](uploads/d21895e6a5457bebfc3ded3e5b5b652c/image.png) ![image](uploads/d21895e6a5457bebfc3ded3e5b5b652c/image.png)
Here we create our WebGLRenderer, we pass it the size of the window as a parameter and then append it to the DOM. Here we create our WebGLRenderer, we pass it the size of the window as a parameter and then append it to the DOM.
```
// BASIC SETUP
// ------------------------------------------------
// Create an empty scene
var scene = new THREE.Scene();
// Create a basic perspective camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 4;
// Create a renderer with Antialiasing
var renderer = new THREE.WebGLRenderer({antialias:true});
// Configure renderer clear color
renderer.setClearColor("#ff0000");
// Configure renderer size
renderer.setSize( window.innerWidth, window.innerHeight );
// Append Renderer to DOM
document.body.appendChild( renderer.domElement );
```
Here we create our WebGLRenderer, we pass it the size of the window as a parameter and then append it to the DOM. The **empty scene** is where we are going to add our objects. And by last we create a camera, passing as parameters the FOV, the Aspect ratio and the near plane and far plan.
Once this is done we have the 3 fundamental elements of a Three.js application.
Clone repository
  • Create a simple web AR application [De]
  • Create a simple web AR application
  • Exercise for Multiresolution Models
    • Feature manipulation engine (FME)
    • Introduction
    • Open source datasets
    • Visualization with ArcGIS
    • Visualization with CesiumJS
    • Visualization with Deck.gl
  • FME
  • OGC API 3D GeoVolume
  • Project_1
  • Styling of 3D building models by Attributes
  • Three.js 101 : Hello World!
  • Useful tools
  • Visualization of Bike Sharing Data
View All Pages

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal