探索Three.js：Javascript的3D图形引擎

发表时间: 2019-05-18 12:35

介绍

Three.js的目的是是使用默认的WebGL渲染器创建一个易于使用，轻量级的3D库。该库还在示例中提供了Canvas 2D，SVG和CSS3D渲染器。下面是来自于官网的截图，提供了大量的示例。

官方和Github

官网：https://threejs.org/
Github：https://github.com/mrdoob/three.js

安装

直接引入js，这种就是引入速度快，但是相对于项目开发来说不够友好

<script src="js/three.min.js"></script>

npm安装

npm install three

模块化

var THREE = require('three');

var scene = new THREE.Scene();

ES6 import（在ES6标准中新增的import语句）

import * as THREE from 'three';

const scene = new THREE.Scene();

只导入three.js库中的特定部分，例如Scene：

import { Scene } from 'three';

const scene = new Scene();

浏览器兼容性

目前支持的浏览器有：

Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge

完整示例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script> <title>Three.js</title> <style> *{ margin: 0%; padding: 0%; } </style></head><body> <script> var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10); camera.position.z = 1; scene = new THREE.Scene(); geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2); material = new THREE.MeshNormalMaterial(); mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera); } </script></body></html>

注意：需要在服务器环境下运行，本地安装Live Server插件即可运行，下面是效果图

总结

ThreeJS是一个非常强大的JavaScript插件库，官网提供了大量的实例，在Github star数达到51k+,适用场景很多，用途就不多说了，很多3D的效果都可以用它来实现，期待你的尝试！

探索Three.js：Javascript的3D图形引擎

介绍

官方和Github

安装

浏览器兼容性

完整示例

总结

热门阅读

推荐阅读