Three.js学习总结

待我称王封你为后i 2022-04-03 09:10 220阅读 0赞

一、Three.js基础学习

(1)学习网站：[http://www.hewebgl.com][http_www.hewebgl.com]

[http://techbrood.com/threejs/docs/][http_techbrood.com_threejs_docs]

官方文档学习：[https://threejs.org/examples/][https_threejs.org_examples]

(2)three.js是WebGL的开源框架

*  three.js代码下载：[https://github.com/mrdoob/three.js][https_github.com_mrdoob_three.js]
 *  在Three.js中，需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。
 *  拿电影来类比的话，场景对应于整个布景空间，相机是拍摄镜头，渲染器用来把拍摄好的场景转换成胶卷（对于网页来讲，是电脑屏幕）。 场景和相机代表了3D观察空间和数据模型，渲染器则包含了WebGL绘图上下文和着色器。

let camera, scene, renderer;
    scene = new THREE.Scene();//场景
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );;//设置相机
    renderer = new THREE.WebGLRenderer();//渲染器
    renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染器的宽高

*  上面的代码构建了scene, camera 和 renderer。Three.js的架构支持多种camera，这里使用最常见的远景相机（PerspectiveCamera），也就是类似于人眼观察的方式。第一个属性75设置的是视角（field of view）。
 *  第二个属性设置的是相机拍摄面的长宽比（aspect ratio）。我们几乎总是会使用元素的宽除以高，否则会出现挤压变形。
 *  添加物体到场景中

几何模型（Geometry）有很多种，具体通过链接查看：

geometry = new THREE.CubeGeometry(3,3,3);

[http://techbrood.com/threejs/docs/\#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E6%A0%B8%E5%BF%83%E6%A8%A1%E5%9D%97(Core)/%E5%87%A0%E4%BD%95%E6%A8%A1%E5%9E%8B(Geometry)][http_techbrood.com_threejs_docs_E5_8F_82_E8_80_83_E6_89_8B_E5_86_8C_E6_A0_B8_E5_BF_83_E6_A8_A1_E5_9D_97_Core_E5_87_A0_E4_BD_95_E6_A8_A1_E5_9E_8B_Geometry]

材料有很多种，具体通过链接查看：

material = new THREE.MeshBasicMaterial({color: 0x00ff00});

[http://techbrood.com/threejs/docs/\#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E6%9D%90%E6%96%99(Materials)/%E6%9D%90%E6%96%99(Material)][http_techbrood.com_threejs_docs_E5_8F_82_E8_80_83_E6_89_8B_E5_86_8C_E6_9D_90_E6_96_99_Materials_E6_9D_90_E6_96_99_Material]

最常见的材质之一就是Lambert材质(MeshLambertMaterial)，Lambert材质会受环境光的影响，物体是白色的情况下，颜色是随着环境光改变。物体自带颜色的话，就不一定和环境光一样了，是共同作用的结果。结论：呈现颜色=材质颜色+光源颜色的并集（即取小），即FF0000 U 888888 = 880000

（3）light有很多种，具体通过链接查看：

[http://techbrood.com/threejs/docs/\#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E8%BE%85%E5%8A%A9%E5%AF%B9%E8%B1%A1(Helpers)/%E5%B9%B3%E8%A1%8C%E5%85%89%E8%BE%85%E5%8A%A9(DirectionalLightHelper)][http_techbrood.com_threejs_docs_E5_8F_82_E8_80_83_E6_89_8B_E5_86_8C_E8_BE_85_E5_8A_A9_E5_AF_B9_E8_B1_A1_Helpers_E5_B9_B3_E8_A1_8C_E5_85_89_E8_BE_85_E5_8A_A9_DirectionalLightHelper]

1.环境光和方向光

方向光只与方向有关，与离物体的远近无关

方向光才有阴影

当方向光(DirectionalLight)照射过来的时候，被照射的表面呈现光的颜色，而由于是方向光，没有照射到的表面，就呈现暗色，一般是黑色，表示没有任何光源照到该表面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

light = new THREE.DirectionalLight(0xFF0000);
    light.position.set(0,0,1);
    scene.add(light);

只有环境光，渲染的结果是:物体所有表面都是呈现光的颜色

环境光不会随着距离衰减，所以位置对齐是没有意义的，不用设置位置。但是都是集成Light对象，所以有position这个属性。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

light = new THREE.AmbientLight(0x00FF00);
    scene.add(light);

将环境光和方向光都加上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

图中绿色的部分，是由环境光造成的。由于方向光根本照射不到绿色的部分，所以，这部分只有环境光对其影响。

图中黄色的部分是由环境光和方向光共同作用而成的，其实是两种光源颜色的简单相加，0x00FF00 + 0xFF0000 = 0xFFFF00，oxFFFF00 就是黄色。

2.点光源

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3][]

light = new THREE.PointLight(0xFF0000);
    light.position.set(0,0,50);
    scene.add(light);

（4）纹理THREE.Texture

学习网站链接：[http://techbrood.com/threejs/docs/\#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E7%BA%B9%E7%90%86(Textures)/%E7%BA%B9%E7%90%86(Texture)][http_techbrood.com_threejs_docs_E5_8F_82_E8_80_83_E6_89_8B_E5_86_8C_E7_BA_B9_E7_90_86_Textures_E7_BA_B9_E7_90_86_Texture]

THREE.Texture( image, mapping, wrapS, wrapT, magFilter,
                 minFilter, format, type, anisotropy )

// url 是一个http://xxxx/aaa.jpg 的类似地址，javascript没有从本地加载数据的能力，
    // 所以没有办法从您电脑的C盘加载数据。
    var image = THREE.ImageUtils.loadTexture(url);

纹理作为一张图片，可以来源于互联网，或者本地服务器，但是就是不能来源于类似C:\\pic\\a.jpg这样的本地路径。因为javascript没有加载本地路径文件的权限，会报错。

所以需要在电脑上搭建一个tomcat，apache，iis等服务器中的一种，并把图片资源放到服务器中，并通过http://localhost:3000/img/view.jpg这样的方式去访问它。

（5）在google的3D模型库找到更多的模型，网址是：http://sketchup.google.com/3dwarehouse/

下载一个ParaView，查看3D模型。

ParaView的使用，地址如下：http://wenku.baidu.com/view/f360cc7102768e9951e7386a.html

（6）通过Mesh的rotation属性来旋转物体

mesh.rotation.y +=0.01;

*  通过rotateX、rotateY、rotateZ函数来旋转物体

mesh.rotateY(0.01);

二、案例

（1）按照教程制作一个立方体

1.效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4][]

2.代码如下：

App.js

import React, { Component } from 'react';
    import './App.css';
    import ThreeMap from './ThreeMap';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <ThreeMap/>
          </div>
        );
      }
    }
    
    export default App;

ThreeMap.js

ThreeMap.css

#WebGL-output{
    
        width: 100%;
    
        height: 700px;
    
    }

(4)按照教程画一条线

three.js 相机camera位置属性设置详解：[http://www.cnblogs.com/v-weiwang/p/6072235.html][http_www.cnblogs.com_v-weiwang_p_6072235.html]

threejs Light属性设置详解：[https://github.com/lishengzxc/bblog/issues/37][https_github.com_lishengzxc_bblog_issues_37]

1.效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5][]

2.代码如下：

App.js：同上一个文件

ThreeMap.js

import './ThreeMap.css';
    import React, { Component } from 'react';
    import * as THREE from 'three';
    class ThreeMap extends Component {
    	componentDidMount() {
    		this.initThree();
    	}
    	initThree() {
    		let camera, scene, renderer, light;
    		let container = document.getElementById('WebGL-output');
    		let width = (container.clientWidth) / 2;
    		let height = (container.clientHeight) / 2;
    		let geometry, material, line;
    		initCamera();
    		initScene();
    		initLight();
    		initObject();
    		renderer = new THREE.WebGLRenderer({
    			antialias: true
    		});
    		renderer.setSize(width, height);
    		renderer.setClearColor(0xFFFFFF, 1.0);
    		container.appendChild(renderer.domElement);
    		render();
    		function initCamera() {
    			camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    			camera.position.x = 0;//相机的位置
    			camera.position.y = 1000;
    			camera.position.z = 0;
    			camera.up.x = 0;//相机以哪个方向为上方
    			camera.up.y = 0;
    			camera.up.z = 1;
    			camera.lookAt(0, 0, 0)//相机看向哪个坐标,(0,0,0)是原点
    		}
    		function initScene() {
    			scene = new THREE.Scene();
    		}
    		function initLight() {
    			light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
    			light.position.set(100, 100, 200);
    			scene.add(light);
    		}
    		function initObject() {
    			geometry = new THREE.Geometry();
    			material = new THREE.LineBasicMaterial({ vertexColors: true });
    			let color1 = new THREE.Color(0x444444), color2 = new THREE.Color(0xFF0000);
    			// 线的材质可以由2点的颜色决定
    			let p1 = new THREE.Vector3(-200, 0, 200);
    			let p2 = new THREE.Vector3(200, 0, -200);
    			geometry.vertices.push(p1);
    			geometry.vertices.push(p2);
    			geometry.colors.push(color1, color2);
    
    			line = new THREE.Line(geometry, material, THREE.LineSegments);
    			scene.add(line);
    		}
    		function render() {
    			renderer.render(scene, camera);
    		}
    	}
    	render() {
    		return (
    			<div id='WebGL-output'></div>
    		)
    	}
    }
    export default ThreeMap;

(5)按照教程画一个网格

1.效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6][]

2.代码如下：

App.js：同第一个教程

ThreeMap.js

import React, { Component } from 'react';
    import * as THREE from 'three';
    const style = {
    	border: 'none',
    	cursor: 'pointer',
    	width: '100%',
    	height: '600px',
    	backgroundColor: '#EEEEEE'
    }
    class ThreeMap extends Component {
    	componentDidMount() {
    		this.initThree();
    	}
    	initThree() {
    		let camera, scene, renderer, light;
    		let container = document.getElementById('WebGL-output');
    		let width = (container.clientWidth);
    		let height = (container.clientHeight);
    		let geometry,line;
    		renderer = new THREE.WebGLRenderer({
    			antialias: true
    		});
    		renderer.setSize(width, height);
    		renderer.setClearColor(0xFFFFFF, 1.0);
    		container.appendChild(renderer.domElement);
    		initCamera();
    		initScene();
    		initLight();
    		initObject();
    		render();
    		function initCamera() {
    			camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    			camera.position.x = 0;//相机的位置
    			camera.position.y = 1000;
    			camera.position.z = 0;
    			camera.up.x = 0;//相机以哪个方向为上方
    			camera.up.y = 0;
    			camera.up.z = 1;
    			camera.lookAt(0, 0, 0)//相机看向哪个坐标,(0,0,0)是原点
    		}
    		function initScene() {
    			scene = new THREE.Scene();
    		}
    		function initLight() {
    			light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
    			light.position.set(100, 100, 200);
    			scene.add(light);
    		}
    		function initObject() {
    			geometry = new THREE.Geometry();
    			geometry.vertices.push(new THREE.Vector3(- 500, 0, 0));
    			geometry.vertices.push(new THREE.Vector3(500, 0, 0));
    			for (var i = 0; i <= 20; i++) {
    				line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }));
    				line.position.z = (i * 50) - 500;
    				scene.add(line);
    				line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }));
    				line.position.x = (i * 50) - 500;
    				line.rotation.y = 90 * Math.PI / 180;
    				scene.add(line);
    			}
    		}
    		function render() {
    			renderer.render(scene, camera);
    		}
    	}
    	render() {
    		return (
    			<div id='WebGL-output' style={style}></div>
    		)
    	}
    }
    export default ThreeMap;

(6)按照教程制作移动的物体

方法一：改变相机的位置，让物体移动

camera.position.x = camera.position.x + 1;

方法二：改变物体自身的位置，让物体移动

mesh.position.x-=1

1.效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7][]

2.代码如下：

App.js：同第一个教程

ThreeMap.js

(7)按照教程做出多个物体块，这个案例主要是学习light

1.效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 8][]

2.代码如下：

App.js：同第一个教程

ThreeMap.js

import React, { Component } from 'react';
    import * as THREE from 'three';
    const style = {
    	border: 'none',
    	cursor: 'pointer',
    	width: '100%',
    	height: '600px',
    	backgroundColor: '#EEEEEE'
    }
    class ThreeMap extends Component {
    	componentDidMount() {
    		this.initThree();
    	}
    	initThree() {
    		let camera, scene, renderer, light;
    		let container = document.getElementById('WebGL-output');
    		let width = (container.clientWidth);
    		let height = (container.clientHeight);
    		let geometry, mesh, material,
    			geometry2, mesh2, material2,
    			geometry3, mesh3, material3,mesh4,mesh5,mesh6;
    		renderer = new THREE.WebGLRenderer({
    			antialias: true
    		});
    		renderer.setSize(width, height);
    		renderer.setClearColor(0xFFFFFF, 1.0);
    		container.appendChild(renderer.domElement);
    		initCamera();
    		initScene();
    		initLight();
    		initObject();
    		render();
    		function initCamera() {
    			camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    			camera.position.x = 600;//相机的位置
    			camera.position.y = 0;
    			camera.position.z = 600;
    			camera.up.x = 0;//相机以哪个方向为上方
    			camera.up.y = 1;
    			camera.up.z = 0;
    			camera.lookAt(0, 0, 0)//相机看向哪个坐标,(0,0,0)是原点
    		}
    		function initScene() {
    			scene = new THREE.Scene();
    		}
    		function initLight() {
    			// light = new THREE.AmbientLight(0xFFFFFF);
    			// light.position.set(100, 100, 200);
    			// scene.add(light);
    			// light = new THREE.PointLight(0x00FF00);
    			// light.position.set(0, 0, 300);
    			// 第二个参数是光源强度，你可以改变它试一下
    			light = new THREE.DirectionalLight(0xFF0000, 1);
    			// 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不一样
    			light.position.set(0, 0, 1);
    			scene.add(light);
    		}
    		function initObject() {
    			geometry = new THREE.CubeGeometry(200, 100, 50, 4, 4);
    			material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
    			mesh = new THREE.Mesh(geometry, material);
    			scene.add(mesh);
    			
    			geometry2 = new THREE.CubeGeometry(200, 100, 50, 4, 4);
    			material2 = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
    			mesh2 = new THREE.Mesh(geometry2, material2);
    			mesh2.position.set(-300, 0, 0);
    			scene.add(mesh2);
    
    			geometry3 = new THREE.CubeGeometry(200, 100, 50, 4, 4);
    			material3 = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
    			mesh3 = new THREE.Mesh(geometry3, material3);
    			mesh3.position.set(0, -150, 0);
    			scene.add(mesh3);
    
    			mesh4 = new THREE.Mesh(geometry3, material3);
    			mesh4.position.set(0, 150, 0);
    			scene.add(mesh4);
    
    			mesh5 = new THREE.Mesh(geometry3, material3);
    			mesh5.position.set(300, 0, 0);
    			scene.add(mesh5);
    
    			mesh6 = new THREE.Mesh(geometry3, material3);
    			mesh6.position.set(0, 0, -100);
    			scene.add(mesh6);
    		}
    		function render(){
    			renderer.clear();
    			renderer.render(scene, camera);
    		}
    	}
    	render() {
    		return (
    			<div id='WebGL-output' style={style}></div>
    		)
    	}
    }
    export default ThreeMap;

(8)按照教程将3D模型加载与使用(这里目前只能实现vtk这种简单的3D文件格式)

1.效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 9][]

2.代码如下：

按照我之前的文章配置好tomcat，然后修改examples文件夹下面的index.html文件，examples文件夹下面新增js文件夹放置js，examples文件夹下面新增models文件夹放置3dmodel

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 10][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 11][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 12][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 13][]

index.html

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title></title>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    	</head>
    	<body>
    		<div id="info"></div>
    		<script src="http://localhost:8080/examples/js/three.js"></script>
    		<script src="http://localhost:8080/examples/js/controls/TrackballControls.js"></script>
    		<script src="http://localhost:8080/examples/js/loaders/VTKLoader.js"></script>
    		<script src="http://localhost:8080/examples/js/Detector.js"></script>
    		<script src="http://localhost:8080/examples/js/Stats.js"></script>
    		<script>
    			if (!Detector.webgl) Detector.addGetWebGLMessage();
    			var container, stats;
    			var camera, controls, scene, renderer;
    			var cross;
    			init();
    			animate();
    			function init() {
    				camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e10);
    				camera.position.z = 0.2;
    				controls = new THREE.TrackballControls(camera);
    				controls.rotateSpeed = 5.0;
    				controls.zoomSpeed = 5;
    				controls.panSpeed = 2;
    				controls.noZoom = false;
    				controls.noPan = false;
    				controls.staticMoving = false;
    				controls.dynamicDampingFactor = 0.3;
    				scene = new THREE.Scene();
    				scene.add(camera);
    				// light
    				var dirLight = new THREE.DirectionalLight(0xffffff);
    				dirLight.position.set(200, 200, 1000).normalize();
    				camera.add(dirLight);
    				camera.add(dirLight.target);
    				var material = new THREE.MeshLambertMaterial({ color: 0xffffff, side: THREE.DoubleSide });
    				var loader = new THREE.VTKLoader();
    				loader.addEventListener('load', function (event) {
    					var geometry = event.content;
    					var mesh = new THREE.Mesh(geometry, material);
    					mesh.position.setY(- 0.09);
    					scene.add(mesh);
    				});
    				loader.load("http://localhost:8080/examples/models/vtk/bunny.vtk");
    				// renderer
    				renderer = new THREE.WebGLRenderer({ antialias: false });
    				renderer.setClearColorHex(0x000000, 1);
    				renderer.setSize(window.innerWidth, window.innerHeight);
    				container = document.createElement('div');
    				document.body.appendChild(container);
    				container.appendChild(renderer.domElement);
    				stats = new Stats();
    				stats.domElement.style.position = 'absolute';
    				stats.domElement.style.top = '0px';
    				container.appendChild(stats.domElement);
    				window.addEventListener('resize', onWindowResize, false);
    			}
    			function onWindowResize() {
    				camera.aspect = window.innerWidth / window.innerHeight;
    				camera.updateProjectionMatrix();
    				renderer.setSize(window.innerWidth, window.innerHeight);
    				controls.handleResize();
    			}
    			function animate() {
    				requestAnimationFrame(animate);
    				controls.update();
    				renderer.render(scene, camera);
    				stats.update();
    			}
    		</script>
    	</body>
    </html>

js/three.js

js/controls/TrackballControls.js

js/loaders/VTKLoader.js

js/Detector.js

js/Stats.js

如上代码可以通过链接[https://gitee.com/meijunna/react-chart-line/tree/master/examples][https_gitee.com_meijunna_react-chart-line_tree_master_examples]下载

(9)按照教程实现旋转

1.效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 14][]

2.代码如下：

App.js：同第一个教程

ThreeMap.js

import React, { Component } from 'react';
    import * as THREE from 'three';
    const style = {
        border: 'none',
        cursor: 'pointer',
        width: '100%',
        height: '600px',
        backgroundColor: '#EEEEEE'
    }
    class ThreeMap extends Component {
        componentDidMount() {
            this.initThree();
        }
        initThree() {
            let camera, scene, renderer, light;
            let container = document.getElementById('WebGL-output');
            let width = (container.clientWidth);
            let height = (container.clientHeight);
            let geometry, mesh, material;
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(width, height);
            renderer.setClearColor(0xFFFFFF, 1.0);
            container.appendChild(renderer.domElement);
            initCamera();
            initScene();
            initLight();
            initObject();
            initGrid();
            animation();
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 100;//相机的位置
                camera.position.y = 300;
                camera.position.z = 600;
                camera.up.x = 0;//相机以哪个方向为上方
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt(0, 0, 0)//相机看向哪个坐标,(0,0,0)是原点
            }
            function initScene() {
                scene = new THREE.Scene();
            }
            function initLight() {
                light = new THREE.AmbientLight(0xFF0000);
                light.position.set(100, 100, 200);
                scene.add(light);
            }
            function initObject() {
                geometry = new THREE.BoxGeometry(100, 100, 100);
                for (let i = 0; i < geometry.faces.length; i += 2) {
                    let hex = Math.random() * 0xffffff;
                    geometry.faces[i].color.setHex(hex);
                    geometry.faces[i + 1].color.setHex(hex);
                }
                material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors });
                mesh = new THREE.Mesh(geometry, material);
                // mesh.position = new THREE.Vector3(0, 0, 0);
                scene.add(mesh);
            }
            function initGrid() {
                // 网格的边长是1000，每个小网格的边长是50
                let helper = new THREE.GridHelper(1000, 50);
                helper.setColors(0x0000ff, 0x808080);
                scene.add(helper);
            }
            function animation() {
                //移动位置
                // camera.position.x = camera.position.x + 1;
                //旋转
                // mesh.position.x -= 1
                // mesh.rotation.y+=0.01;
                mesh.rotateZ(0.01);
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
            }
        }
        render() {
            return (
                <div id='WebGL-output' style={style}></div>
            )
        }
    }
    export default ThreeMap;

(10)按照教程实现物体跟随鼠标移动而转换视角

1.效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 15][]

2.代码如下：

App.js：同第一个教程

ThreeMap.js

import React, { Component } from 'react';
    import * as THREE from 'three';
    const style1 = {
        position: 'relative',
        display: 'block',
        border: '1px solid red',  // 边框红色
        width: '300px',
        height: '200px'
    }
    const style2 = {
        position: 'relative',
        display: 'block',
        border: '1px solid red',  // 边框红色
        width: '400px',
        height: '100px',
        left: '150px'
    }
    const style3 = {
        position: 'relative',
        display: 'block',
        border: '1px solid red',  // 边框红色
        width: '200px',
        height: '300px',
        left: '75px'
    }
    let scene, renderer, mesh, wireframe;
    let mouseX = 0, mouseY = 0;
    //View类将相机，视图、灯光、等场景封装到了一个类里面，这是为了重用的需要。
    function View(canvas, fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight) {
        canvas.width = viewWidth * window.devicePixelRatio;
        canvas.height = viewHeight * window.devicePixelRatio;
        const context = canvas.getContext('2d');
        const camera = new THREE.PerspectiveCamera(20, viewWidth / viewHeight, 1, 10000);
        camera.setViewOffset(fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight);
        camera.position.z = 1800;
        this.render = function () {
            camera.position.x += (mouseX - camera.position.x) * 0.05;
            camera.position.y += (- mouseY - camera.position.y) * 0.05;
            camera.lookAt(scene.position);
            renderer.setViewport(0, 0, viewWidth, viewHeight);
            renderer.render(scene, camera);
            context.drawImage(renderer.domElement, 0, 0);
        };
    }
    class ThreeMap extends Component {
        componentDidMount() {
            this.initThree();
        }
        initThree() {
            let views = [];
            const windowHalfX = window.innerWidth / 2;
            const windowHalfY = window.innerHeight / 2;
            init();
            animate();
            function init() {
                //使用document.getElementById函数得到了3个div容器，他们将作为画布使用。
                let canvas1 = document.getElementById('canvas1');
                let canvas2 = document.getElementById('canvas2');
                let canvas3 = document.getElementById('canvas3');
                //定义了一个宽度和高度的变量,刚好是包含了3个div的大小
                let fullWidth = 550;
                let fullHeight = 600;
                views.push(new View(canvas1, fullWidth, fullHeight, 0, 0, canvas1.clientWidth, canvas1.clientHeight));
                views.push(new View(canvas2, fullWidth, fullHeight, 150, 200, canvas2.clientWidth, canvas2.clientHeight));
                views.push(new View(canvas3, fullWidth, fullHeight, 75, 300, canvas3.clientWidth, canvas3.clientHeight));
                scene = new THREE.Scene();
                scene.background = new THREE.Color(0xffffff);
                let light = new THREE.DirectionalLight(0xffffff);
                light.position.set(0, 0, 1).normalize();
                scene.add(light);
                // shadow定义阴影面
                let canvas = document.createElement('canvas');
                canvas.width = 128;
                canvas.height = 128;
                let context = canvas.getContext('2d');
                let gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
                gradient.addColorStop(0.1, 'rgba(210,210,210,1)');
                gradient.addColorStop(1, 'rgba(255,255,255,1)');
                context.fillStyle = gradient;
                context.fillRect(0, 0, canvas.width, canvas.height);
                //画布做好了，然后我们将画布转化为纹理
                let shadowTexture = new THREE.CanvasTexture(canvas);
                let shadowMaterial = new THREE.MeshBasicMaterial({ map: shadowTexture });
                let shadowGeo = new THREE.PlaneBufferGeometry(300, 300, 1, 1);
                //材质定义好后，就把它赋给阴影平面吧，我们有三个球，所以有三个阴影
                let shadowMesh;
                shadowMesh = new THREE.Mesh(shadowGeo, shadowMaterial);
                shadowMesh.position.y = - 250;
                shadowMesh.rotation.x = - Math.PI / 2;
                scene.add(shadowMesh);
                shadowMesh = new THREE.Mesh(shadowGeo, shadowMaterial);
                shadowMesh.position.x = - 400;
                shadowMesh.position.y = - 250;
                shadowMesh.rotation.x = - Math.PI / 2;
                scene.add(shadowMesh);
                shadowMesh = new THREE.Mesh(shadowGeo, shadowMaterial);
                shadowMesh.position.x = 400;
                shadowMesh.position.y = - 250;
                shadowMesh.rotation.x = - Math.PI / 2;
                scene.add(shadowMesh);
                const radius = 200;
                const geometry1 = new THREE.IcosahedronBufferGeometry(radius, 1);
                const count = geometry1.attributes.position.count;
                geometry1.addAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3));
                const geometry2 = geometry1.clone();
                const geometry3 = geometry1.clone();
                const color = new THREE.Color();
                const positions1 = geometry1.attributes.position;
                const positions2 = geometry2.attributes.position;
                const positions3 = geometry3.attributes.position;
                const colors1 = geometry1.attributes.color;
                const colors2 = geometry2.attributes.color;
                const colors3 = geometry3.attributes.color;
                for (let i = 0; i < count; i++) {
                    color.setHSL((positions1.getY(i) / radius + 1) / 2, 1.0, 0.5);
                    colors1.setXYZ(i, color.r, color.g, color.b);
                    color.setHSL(0, (positions2.getY(i) / radius + 1) / 2, 0.5);
                    colors2.setXYZ(i, color.r, color.g, color.b);
                    color.setRGB(1, 0.8 - (positions3.getY(i) / radius + 1) / 2, 0);
                    colors3.setXYZ(i, color.r, color.g, color.b);
                }
                const material = new THREE.MeshPhongMaterial({
                    color: 0xffffff,
                    flatShading: true,
                    vertexColors: THREE.VertexColors,
                    shininess: 0
                });
                let wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true, transparent: true });
                mesh = new THREE.Mesh(geometry1, material);
                wireframe = new THREE.Mesh(geometry1, wireframeMaterial);
                mesh.add(wireframe);
                mesh.position.x = - 400;
                mesh.rotation.x = - 1.87;
                scene.add(mesh);
                mesh = new THREE.Mesh(geometry2, material);
                wireframe = new THREE.Mesh(geometry2, wireframeMaterial);
                mesh.add(wireframe);
                mesh.position.x = 400;
                scene.add(mesh);
                mesh = new THREE.Mesh(geometry3, material);
                wireframe = new THREE.Mesh(geometry3, wireframeMaterial);
                mesh.add(wireframe);
                scene.add(mesh);
                renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(fullWidth, fullHeight);
                document.addEventListener('mousemove', onDocumentMouseMove, false);
            }
            function onDocumentMouseMove(event) {
                mouseX = event.clientX - windowHalfX;
                mouseY = event.clientY - windowHalfY;
            }
            function animate() {
                for (let i = 0; i < views.length; ++i) {
                    views[i].render();
                }
                requestAnimationFrame(animate);
            }
        }
        render() {
            return (
                <div>
                    <div id='container'>
                        <canvas id="canvas1" style={style1}></canvas>
                        <canvas id="canvas2" style={style2}></canvas>
                        <canvas id="canvas3" style={style3}></canvas>
                    </div>
                </div>
            )
        }
    }
    export default ThreeMap;

二、案例

博客地址：[https://zrysmt.github.io/2017/09/23/%E4%BD%BF%E7%94%A8React+Three.js%E5%B0%81%E8%A3%85%E4%B8%80%E4%B8%AA%E4%B8%89%E7%BB%B4%E5%9C%B0%E7%90%83/][https_zrysmt.github.io_2017_09_23_E4_BD_BF_E7_94_A8React_Three.js_E5_B0_81_E8_A3_85_E4_B8_80_E4_B8_AA_E4_B8_89_E7_BB_B4_E5_9C_B0_E7_90_83]

源码下载地址：[https://github.com/zrysmt/react-threejs-app][https_github.com_zrysmt_react-threejs-app]

[http_www.hewebgl.com]: http://www.hewebgl.com/
[http_techbrood.com_threejs_docs]: http://techbrood.com/threejs/docs/
[https_threejs.org_examples]: https://threejs.org/examples/
[https_github.com_mrdoob_three.js]: https://github.com/mrdoob/three.js
[http_techbrood.com_threejs_docs_E5_8F_82_E8_80_83_E6_89_8B_E5_86_8C_E6_A0_B8_E5_BF_83_E6_A8_A1_E5_9D_97_Core_E5_87_A0_E4_BD_95_E6_A8_A1_E5_9E_8B_Geometry]: http://techbrood.com/threejs/docs/#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E6%A0%B8%E5%BF%83%E6%A8%A1%E5%9D%97%28Core%29/%E5%87%A0%E4%BD%95%E6%A8%A1%E5%9E%8B%28Geometry%29
[http_techbrood.com_threejs_docs_E5_8F_82_E8_80_83_E6_89_8B_E5_86_8C_E6_9D_90_E6_96_99_Materials_E6_9D_90_E6_96_99_Material]: http://techbrood.com/threejs/docs/#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E6%9D%90%E6%96%99%28Materials%29/%E6%9D%90%E6%96%99%28Material%29
[http_techbrood.com_threejs_docs_E5_8F_82_E8_80_83_E6_89_8B_E5_86_8C_E8_BE_85_E5_8A_A9_E5_AF_B9_E8_B1_A1_Helpers_E5_B9_B3_E8_A1_8C_E5_85_89_E8_BE_85_E5_8A_A9_DirectionalLightHelper]: http://techbrood.com/threejs/docs/#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E8%BE%85%E5%8A%A9%E5%AF%B9%E8%B1%A1%28Helpers%29/%E5%B9%B3%E8%A1%8C%E5%85%89%E8%BE%85%E5%8A%A9%28DirectionalLightHelper%29
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220403/99abe22d6ef94e15adb0814e65c3b5a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220403/33bbb030392046fda68fe791bbf39cf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220403/2c30d5bff7164793b063d1f6bc172718.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3]: /images/20220403/4135d7652f6d4d2ea7f00181d43f7811.png
[http_techbrood.com_threejs_docs_E5_8F_82_E8_80_83_E6_89_8B_E5_86_8C_E7_BA_B9_E7_90_86_Textures_E7_BA_B9_E7_90_86_Texture]: http://techbrood.com/threejs/docs/#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E7%BA%B9%E7%90%86%28Textures%29/%E7%BA%B9%E7%90%86%28Texture%29
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4]: /images/20220403/9ec713efd5bc465a800ad10f5a815de7.png
[http_www.cnblogs.com_v-weiwang_p_6072235.html]: http://www.cnblogs.com/v-weiwang/p/6072235.html
[https_github.com_lishengzxc_bblog_issues_37]: https://github.com/lishengzxc/bblog/issues/37
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5]: /images/20220403/72de20fc272d48939732d936c4ad1369.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6]: /images/20220403/96f00a362fee4d32953ea95413c9f21f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7]: /images/20220403/81cf65d2cbaa4105aa84a5af1716ee76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 8]: /images/20220403/8f4be9214a1348748723557dfb9054c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 9]: /images/20220403/85096267cdf348659ad07e41934cc20a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20181227132029513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2018122713210155.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20181227132123136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 13]: /images/20220403/66295d1e9ded4274a19d46219d9389a3.png
[https_gitee.com_meijunna_react-chart-line_tree_master_examples]: https://gitee.com/meijunna/react-chart-line/tree/master/examples
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 14]: /images/20220403/2e27b5f4eb5b471aa27de514cf3fa6e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 15]: /images/20220403/cc1239cad1f24b319ed1aae42c347e02.png
[https_zrysmt.github.io_2017_09_23_E4_BD_BF_E7_94_A8React_Three.js_E5_B0_81_E8_A3_85_E4_B8_80_E4_B8_AA_E4_B8_89_E7_BB_B4_E5_9C_B0_E7_90_83]: https://zrysmt.github.io/2017/09/23/%E4%BD%BF%E7%94%A8React+Three.js%E5%B0%81%E8%A3%85%E4%B8%80%E4%B8%AA%E4%B8%89%E7%BB%B4%E5%9C%B0%E7%90%83/
[https_github.com_zrysmt_react-threejs-app]: https://github.com/zrysmt/react-threejs-app