Learn threeJs -- the first threeJs

Reference: threeJS Development Guide

Three basic elements of threeJs

1. scene: a container to save and track the objects we want to render

2. camera: define what can be seen in the scene

3. rederer: calculate the appearance of the scene under the specified camera angle -- what kind of rendering method is used (usually rendering with video card)

html: introduce jQuery-1.9.0, threeJS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Add light source</title>
  <style>
      body {
          margin: 0;
          overflow: hidden;
      }
  <style/>
</head>
<body>
<div id="WebGl-output"></div>
<script type="text/javascript" src="../../build/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../../build/three.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

js:

1. To initialize the three elements scene, camera and rederer

// Define scene,camera,renderer
// scene is a container that holds and tracks the objects we want to render
var scene = new THREE.Scene();
// Define what you can see in the scene
var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1, 1000);
// Calculate the appearance of scene under the specified camera angle -- rendering with video card
var renderer = new THREE.WebGLRenderer();
// background color
renderer.setClearColorHex(0xEEEEEE);
// Background size
renderer.setSize(window.innerWidth, window.innerHeight);

2. Add coordinate axis

// Create axis
var axes = new THREE.AxisHelper(20);
scene.add(axes);

3. Add a gray plane

// Create plane
// Define plane dimensions - width 60, height 20
var planeGeometry = new THREE.PlaneGeometry(60, 20);
// colour
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
// Combine size and color
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// Define location
// Rotate 90 degrees around the x-axis
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);

4. Add a cube

  // Create Box
  var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
  var cubeMaterial = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true
  });
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = -4;
  cube.position.y = 3;
  cube.position.z = 0;
  scene.add(cube);

5. Add a sphere

  // Create sphere
  var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
  var sphereMaterial = new THREE.MeshBasicMaterial({
    color: 0x7777ff,
    wireframe: true
  });
  var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.x = 20;
  sphere.position.y = 4;
  sphere.position.z = 2;
  scene.add(sphere);

6. Specify the camera position and suspension angle

  // Specify the position of the camera and hang it above the scene
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  // Point to the center of the scene
  camera.lookAt(scene.position);

7. Attach scene and camera to html

  // Mount to html
  $("#WebGl-output").append(renderer.domElement);
  renderer.render(scene, camera);

The result is shown in Fig.

Posted by jcm93 on Sat, 09 Nov 2019 12:18:34 -0800

Programmer Group

Learn threeJs -- the first threeJs

Hot Keywords