• Write in front, refer to the link:
  • Website document links: www.webgl3d.cn/threejs/doc… (The following is a good way to get familiar with the basic API.)

The basic building blocks (main elements) of a scene

  • Here’s a demo: A not-so-perfect Earth
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="style "href=".. /.. /css/common.css"> <style> body{ width:100%; height:100%; } #divEarth{ width:100%; height:100%; } </style> </head> <body> <div id="divEarth"></div> </body> </html> <script src="./three.min.js"></script><! Core -- -- -- > < script SRC = "js/controls/OrbitControls. Js" > < / script > <! -- controller --> <script> var handle; var scene = new THREE.Scene(); // scene scene.add(new THREE.HemisphereLight('#ffffff', '#ffffff', 1)); . / var/light camera = new THREE PerspectiveCamera (20, window. InnerWidth/window. InnerHeight, 1, 10000); / / camera camera. The position. The set (0,0,200); Var renderer = new THREE.WebGLRenderer({// renderer alpha: true, // antialias: true, // antialiases) renderer.autoClear = false; renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); Orbitcontrols (camera, renderer.domElement); // Initialize orbitControls = new THREE. orbitcontrols.enableDamping = true; Var earthTexture = new three.textureLoader ().load("images/earth.jpg"); Mesh(new THREE.SphereGeometry(30,50,50), new THREE.MeshBasicMaterial({map: earthTexture})); earthBall.layers.set(0); scene.add(earthBall); // Render (); function render(){ if(handle){ cancelAnimationFrame(handle); } renderer.clearDepth(); Rotation (positive from west to east) scene.rotation. Y +=0.01; renderer.render(scene, camera); orbitcontrols.update(); handle = requestAnimationFrame(render); } </script>Copy the code

Effect:

  • Some questions:

1.Q: Where does the earth picture come from? Q: Image load failed and Threejs cannot access local texture images by defaultvar earthTexture = new THREE.TextureLoader().load("images/earth.jpg");A: the referencewww.webgl3d.cn/threejs/doc…Run files from a local server to access files running on the local server. Node Server: NPM install http-server -g After installing node, run http-server. -p 8000. Python2. x Server: python -m SimpleHTTPServer after starting the local service, accesshttp://localhost:8000; Python3. x Server: python -m http. Server 8000. I select python3, run the above command in the current demo directory, start the local service, browser access:http://localhost:8000/,My directory structure:Just click on the demoearth. HTML file. over…