ThreeJS系列教程-Lesson1

程序员文章站 2022-05-23 14:04:13

...

效果：

代码：

<!DOCTYPE html> 
<!-- The previous line tells the browser, that the page uses the HTML5 standard. --> 
<html>
	<head>
		<meta charset="utf-8"/>
        <title>Three.js tutorial - Lesson 01</title>
        <!-- The following meta line optimizes the site for mobile devices. It sets the viewport size 
        to the screen size, so it will be displayed maximized, but unscaled. --> 
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> 
        <style type="text/css"> 
            body { 
                /* Set the background color of the HTML page to black */ 
                background: #eeeeee;
				
                /* Hide oversized content. This prevents the scroll bars. */ 
                overflow: hidden;
            }
        </style>
        <!-- Include Three.js libraries -->
        <script src="js/r69/three.js"></script>
        <script src="js/r69/Detector.js"></script>
        <script src="js/r69/CanvasRenderer.js"></script>
        <script src="js/r69/Projector.js"></script>
    </head> 
    <body>
        <!-- This is the DIV element which will contain the WebGL canvas. To be identifiable lateron, 
        the id 'WebGLCanvas' is applied to it. --> 
        <div id="WebGLCanvas"></div>
		
        <!-- This JavaScript block encloses the Three.js commands --> 
        <script>
			// Create the scene, in which all objects are stored (e. g. camera, lights, 
            // geometries, ...) 
            var scene = new THREE.Scene();
			
			// Get the size of the inner window (content area) to create a full size renderer 
            var canvasWidth = window.innerWidth;
            var canvasHeight = window.innerHeight;
			
			// Now that we have a scene, we want to look into it. Therefore we need a camera. 
            // Three.js offers three camera types: 
            //  - PerspectiveCamera (perspective projection) 
            //  - OrthographicCamera (parallel projection) 
            //  - CombinedCamera (allows to switch between perspective / parallel projection 
            //    during runtime) 
            // In this example we create a perspective camera. Parameters for the perspective 
            // camera are ... 
            // ... field of view (FOV), 
            // ... aspect ratio (usually set to the quotient of canvas width to canvas height) 
            // ... near and 
            // ... far. 
            // Near and far define the cliping planes of the view frustum. Three.js provides an 
            // example (http://mrdoob.github.com/three.js/examples/ 
            // -> canvas_camera_orthographic2.html), which allows to play around with these 
            // parameters. 
            // The camera is moved 10 units towards the z axis to allow looking to the center of 
            // the scene. 
            // After definition, the camera has to be added to the scene. 
            var camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100); 
            camera.position.set(0, 0, 10); 
            camera.lookAt(scene.position);	//相机聚焦于场景中心
            scene.add(camera);
			
			// Global renderer object 
            var renderer;
			
			if(Detector.webgl){ 
                renderer = new THREE.WebGLRenderer({antialias:true});	//创建一个渲染器（具有抗锯齿效果）
                // If its not supported, instantiate the canvas renderer to support all non WebGL browsers 
                } else { 
                    renderer = new THREE.CanvasRenderer(); 
                }
            // Set the background color of the renderer to black, with full opacity 
            renderer.setClearColor(0xeeeeee, 1);
			// Set the renderers size to the content areas size 
			renderer.setSize(canvasWidth, canvasHeight);
			
			// Get the DIV element from the HTML document by its ID and append the renderers DOM 
			// object to it 
			document.getElementById("WebGLCanvas").appendChild(renderer.domElement);
			
            // Create the triangle (or any arbitrary geometry). 
            // 1. Instantiate the geometry object 
            // 2. Add the vertices 
            // 3. Define the faces by setting the vertices indices 
            var triangleGeometry = new THREE.Geometry();
            triangleGeometry.vertices.push(new THREE.Vector3( 0.0,  1.0, 0.0)); 
            triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0)); 
            triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0)); 
            triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
			
            // Create a white basic material and activate the 'doubleSided' attribute to force the 
            // rendering of both sides of each face (front and back). This prevents the so called 
            // 'backface culling'. Usually, only the side is rendered, whose normal vector points 
            // towards the camera. The other side is not rendered (backface culling). But this 
            // performance optimization sometimes leads to wholes in the surface. When this happens 
            // in your surface, simply set 'doubleSided' to 'true'. 
            var triangleMaterial = new THREE.MeshBasicMaterial({ 
                color:0xFFFFFF,
                side:THREE.DoubleSide 
            }); 
  
            // Create a mesh and insert the geometry and the material. Translate the whole mesh 
            // by -1.5 on the x axis and by 4 on the z axis. Finally add the mesh to the scene. 
            var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial); 
            triangleMesh.position.set(-1.5, 0.0, 4.0); 
            scene.add(triangleMesh);
			
            // The creation of the square is done in the same way as the triangle, except of the 
            // face definition. Instead of using one THREE.Face3, we have to define two 
            // THREE.Face3 objects. 
			// 1. Instantiate the geometry object 
            // 2. Add the vertices 
            // 3. Define the faces by setting the vertices indices 
            var squareGeometry = new THREE.Geometry();
            squareGeometry.vertices.push(new THREE.Vector3(-1.0,  1.0, 0.0));
            squareGeometry.vertices.push(new THREE.Vector3( 1.0,  1.0, 0.0));
            squareGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0));
            squareGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0));
            squareGeometry.faces.push(new THREE.Face3(0, 1, 2));
            squareGeometry.faces.push(new THREE.Face3(0, 2, 3));
            
			// Create a white basic material and activate the 'doubleSided' attribute. 
            var squareMaterial = new THREE.MeshBasicMaterial({ 
                color:0xFFFFFF,
                side:THREE.DoubleSide
            });
			
            // Create a mesh and insert the geometry and the material. Translate the whole mesh 
            // by 1.5 on the x axis and by 4 on the z axis and add the mesh to the scene. 
            var squareMesh = new THREE.Mesh(squareGeometry, squareMaterial); 
            squareMesh.position.set(1.5, 0.0, 4.0); 
            scene.add(squareMesh);
  
            /** 
              * Render the scene. Map the 3D world to the 2D screen.
              */ 
            function render(){
				renderer.render(scene, camera);
            }
			render();
         </script> 
     </body> 
</html>

附注：当前笔者使用的three.js版本是r69

ThreeJS系列教程-Lesson1

Mongodb教程系列

cocos2d-x系列教程

实战SpringCloud响应式微服务系列教程（第九章）使用Spring WebFlux构建响应式RESTful服务

互联网并发与安全系列教程（10） -基于URL转码方式实现API设计

[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

PHP 系列：PHP Web 开发基础，phpweb_PHP教程

java面试系列视频教程（48集）

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_html/css_WEB-ITnose

Linux Shell脚本系列教程（二）：终端打印命令详解

[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)