基于web创建逼真的3D图形

【沙龙】51CTO诚邀您9月23号和多位技巧大年夜咖一路聊智能CDN的优化之路，抓紧时光哦！

在成为一名web开辟者之前，我大年夜事于视觉设计行业，创造屡获殊荣，片子和电视节目等高端3D效不雅，例如 Tron, The Thing, Resident Evil,和 Vikings 。为了可以或许创造这些效不雅，我们须要应用高度复杂的动画软件，例如 Maya , 3Ds Max 或者 Houdini ，包含应用数以百计的机械衬着机械来做长时光的离线衬着。正因为我工作以来一向应用这些对象，以至于我对如今的web技巧认为很惊奇。我们可以创造和显示高质量的3D内容在浏览器琅绫擎，实际上，就是应用webGL和Three.js。

然后，你须要告诉光线投射暗影。在 getSpotLight 函数琅绫擎进行。

这个项目例子是应用这些技巧创建的。在他们的网站里,你可以发明更多thress.js的项目。

应用three.js的一些项目

这些由three.js构建的网站注解，3D可视化在贸易，零售，娱乐和告白范畴拥有巨大年夜的潜力。

WebGL是比较初级的JavaScript的API，它可以或许经由过程应用GPU，来创造并将3D的内容显示在浏览器琅绫擎。不幸地是，既然WebGL是比较低的API，意味着它加倍艰苦被应用。你须要编写上百行代率攀来运行，即使是很简单的义务。three.js，另一方面来说，是一个开放的JavaScript库，抽象了WebGL的复杂性，同时许可你以更简单的方法，创造及时的3D内容。

在本教程中，我将介绍基本的three.js库。在介绍一个新的法度榜样库时，先举一个简单的例子来更好地表达基来源基本理，但我想进一步解释这一点。同时，我还将建立一个场景，加倍高兴和逼真。

我们就开端了一个简单的平面和球面但最终它会看起来像如许：

See the Pen learning-threejs-final by Engin Arslan ( @enginarslan )>

逼真的3D图像 by Ian Spriggs

您将在这里进修的根本3D道理和技巧在任何其他3D内容创建情况中都是相干的，无论是混淆机、Unity、玛雅照样3ds max。

当应用three.js时，如不雅你在本地工作，它有助于经由过程本地办事器办事HTML文件，以便加载像外部三维几何图形、图像等应用处景。如不雅你在寻找一个很轻易建立的办事，你可以应用python来运内行单的HTTP办事器。python在很多操作体系上都有安装。

您不必担心设置本地开辟办事器来履行本教程。相反，您将依附于数据URL来加载像图片如许的资本，以清除设置办事器的开销。应用线上代码编辑器像 CodePen ，你可以很轻松的运行你的Three.js代码场景。

让我们开端在Web上建立3D图形！

入门

我已经预备了 prepared a Pen 你可以跟随本教程进行操作。

您将应用的HTML代码将是超等简单的。它只须要有一个div元素来承载正在显示3D图形的画布。它大年夜CDN上加载Three.js库（版本86）。

<div id="webgl"></div>``<script src=http://news.51cto.com/art/201709/"https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js">``

为了您的便利，CodeOpen隐蔽了HTML构造。如不雅内涵其它在线编辑器或本地站点上构建此场景，那么您的HTML将须要类似于下面代码的内容，个中 main.js 将是保存JavaScript代码的文件。

<!DOCTYPE html><html><head>    <title>Three.js</title>    <style type="text/css">        html, body {            margin: 0;            padding: 0;            overflow: hidden;        }    </style></head><body>    <div id="webgl"></div>    ``<script src=http://news.51cto.com/art/201709/"https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js">``    ``

请留意html中的简单CSS声明。这就是你在CodePen里的CSS标签：

html, body {  margin: 0;  padding: 0;  overflow: hidden;}

当我们平常用three.js和3D来工作时，这里有几个您须要控制的对象。它们是场景 , 相机以及衬着。

起首，您须要创造一个场景。您可以把一个场景对象看作是您要处理的每一个3D对象的容器。它代表了您将要创造的3D世界。您可以像如许来创造场景对象：

var scene = new THREE.Scene();`

别的一件事就是当你应用3D工作时，你须要相机。想象相机就像眼睛一样，你会看到这个3D世界。当应用2D可视化时，相机的概念平日是不存在的。你看到什么就是什么。然则在3D的世界，你须要一个相机来定义你的不雅点，因为你可以年腋荷琐场景中看到很多的地位和角度。相机不决定义了地位，并且还定义了其他的信息，如视野或纵横比。

var camera = new THREE.PerspectiveCamera(    45, // field of view    window.innerWidth / window.innerHeight, // aspect ratio    1, // near clipping plane (beyond which nothing is visible)    1000 // far clipping plane (beyond which nothing is visible));

相机捕获场景以显示目标，但我们实际上可以看到任何器械，3D数据须要转换为2D图像。这个过程称为正在衬着，同时你须要用衬着器在three.js的场景中来进行衬着。你可以初始化衬着像如许的:

var renderer = new THREE.WebGLRenderer();`

之后设置衬着器的大年夜小。这将决定输出图像的大年夜小。

renderer.setSize(window.innerWidth, window.innerHeight);`

1/5 1 2 3 4 5 下一页尾页

　　推荐阅读

　　微服务后如何做一次系统梳理

【沙龙】51CTO诚邀您9月23号和多位技巧大年夜咖一路聊智能CDN的优化之路，抓紧时光哦！微办事的重要目标是将本>>>详细阅读

本文标题：基于web创建逼真的3D图形 | CSS技巧

地址：http://www.17bianji.com/lsqh/37523.html

1/2 1