Three.js
_人间清醒
岁月静好
展开
-
Three.js--5.用动画扩展你的首个场景
如果要在场景中加入动画,那么首先要找到一种方法,使得场景可以以一定的时间间隔进行渲染;在HTML5和JavaScript API(应用开发接口)出来之前,这个方法是使用setInterval(function,interval)方法;虽然,我们可以通过setInterval() 方法指定函数每100毫秒调用一次,但是,这个函数的问题是它并不考虑浏览器中发生的事情;如果...原创 2019-02-01 05:44:49 · 491 阅读 · 0 评论 -
Three.js--6.使用dat.GUI库添加一个用户界面
使用dat.GUI 很容易可以创建一个简单的页面组件,用以修改代码中的变量; 示例中: 控制球体弹跳的速度 控制方块的旋转 首先,先引入库<script src="./libs/dat.gui.js"></script> 接下来,我们定义一个JavaScript 对象,用来保存我们想要通过dat.GUI 库来修改的那些变量;在...原创 2019-02-01 15:34:34 · 1455 阅读 · 0 评论 -
Three.js--1.学前准备先了解下哈
1.首先介绍下支持Three.js的浏览器Mozilla Firefox: 4.0版以后支持Google Chorme: 第9版以后开始支持(推荐)Safari: 5.1版开始支持Opera: 12.00版以后开始支持Internet Explorer: IE11开始支持2.获取源代码地址: https://github.com/mrdoob/three.js你可以...原创 2019-01-30 00:13:18 · 276 阅读 · 0 评论 -
Three.js--2.用Three.js 创建你的第一个三维场景
1.了解场景的三大组件在Three.js 中,要渲染物体到网页中,我们需要3个组件:场景(scene) 相机(camera) 渲染器(renderer)有了这3样东西,才能将物体渲染到网页中去。创建三要素的代码如下:2.添加辅助的坐标轴和平面// 创建一个场景,该场景将保存所有的元素,如对象,相机和灯光 var scene = new THREE.Scene();...原创 2019-01-30 01:01:28 · 864 阅读 · 0 评论 -
Three.js--3.在场景中添加方块和球体
1.创建一个立方体(cube)//创建并设置大小var cubeGeometry = new THREE.BoxGeometry(4,4,4);//设置颜色线框显示否var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});var cube = new THREE.Mesh(cub...原创 2019-01-30 09:04:11 · 3952 阅读 · 1 评论 -
Three.js--4.添加材质,灯光和阴影
在Three.js 里添加新的材质和灯光非常简单,首先需要在场景中添加一个光源;var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, -10);scene.add(spotLight);如果我们现在渲染场景呢,跟之前是没有什么区别的,原因是不同的材质对光源的反应并不是相同的;...原创 2019-01-31 06:50:05 · 1781 阅读 · 0 评论 -
Three.js--7.Three.js 中常用的4种光源
如果没有光源,就不可能看到任何渲染结果;现实环境中,人们之所以能看得到物体,是因为有光,物体的材质反射光到人眼中;在Three.js中有几种光源,去模拟现实环境。最常见的四种为:环境光( AmbientLight ):基础光源,笼罩在整个空间无处不在的光,它的颜色会被加载到整个场景和所有对象的当前颜色上; 点光源( PointLight ):向四面八方发射的单点光源; 聚光灯(...原创 2019-02-14 13:56:55 · 1844 阅读 · 3 评论