Three.js 入门示例

Three.js是基于原生WebGL封装运行的三维引擎。
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

先做一个基本示例；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>第一个three.js 示例</title><style>body {margin: 0;overflow: hidden;}</style><script src="three.js-master/build/three.js"></script>
</head><body><script>var scene = new THREE.Scene();var geometry = new THREE.SphereGeometry(80, 60, 60); //创建一个球体几何对象var material = new THREE.MeshLambertMaterial({color: 0x0000ff}); //材质var mesh = new THREE.Mesh(geometry, material); //网格模型对象scene.add(mesh); //网格模型添加到场景中//点光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300); //点光源位置scene.add(point); //点光源添加到场景中/*** 相机*/var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var k = width / height; //窗口宽高比var s = 200; //三维场景显示范围控制系数//创建相机var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(200, 300, 200); //相机位置camera.lookAt(scene.position); //相机方向/*** 渲染器*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width*1/4, height*1/4);//设置渲染区域尺寸renderer.setClearColor(0xffff00, 1); //设置背景颜色document.body.appendChild(renderer.domElement); //body元素中插入canvas对象//执行渲染操作   指定场景、相机作为参数renderer.render(scene, camera);</script>
</body>
</html>

运行之后效果如下；

下载three.js；目录结构如下；包含下载的 three.js-master/build/three.js；即可使用；

代码大致分为以下几个部分；

创建球体几何对象，添加到场景对象；

场景中添加光源；

创建相机；三维对象是从相机中看到的；

创建渲染器执行渲染操作，以场景和相机为参数；

Three.js 入门示例相关推荐

js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
Ember.js入门教程、博文汇总
第一章对象模型 Ember.js 入门指南--类的定义.初始化.继承 Ember.js 入门指南--类的扩展(reopen) Ember.js 入门指南--计算属性(compute properti ...
android应用案例开发大全_vue.js入门及经典应用案例总结（前端开发必看）
<大数据和人工智能交流>头条号向广大初学者新增C .Java .Python .Scala.javascript 等目前流行的计算机.大数据编程语言,希望大家以后关注本头条号更多的内容. ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
react.js app_如何创建Next.js入门程序以轻松引导新的React App
react.js app Getting started with a new React app is easier than ever with frameworks like Next.js. ...
express-cli入门_使用Express.js入门
express-cli入门 by Victor Ofoegbu 由Victor Ofoegbu 使用Express.js入门 (Getting off the ground with Express. ...
vis.js入门_使用TensorBoard数据Vis的TensorFlow手术分类器入门
vis.js入门深度学习中最具挑战性的部分是标签,这将在由两部分组成的系列文章的第1部分中看到, 了解如何使用TensorFlow对图像进行分类 . 正确的培训对于将来进行有效分类至关重要,而要进行 ...
【带着canvas去流浪（11）】Three.js入门学习笔记
[摘要] three.js 入门学习笔记示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档很详细,但是API部分单独 ...
js读取http chunk流_极简 Node.js入门教程双工流
点击上方蓝字关注我们小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读双工流就是同时实现了 Readab ...

Three.js 入门示例

Three.js 入门示例相关推荐

最新文章

热门文章