Webgl之three.js

最新推荐文章于 2024-06-04 21:10:06 发布

fangchuawei

最新推荐文章于 2024-06-04 21:10:06 发布

阅读量3.4k

点赞数 1

分类专栏： webgl three.js

本文链接：https://blog.csdn.net/fangchuawei/article/details/42687097

版权

webgl 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

three.js

1 篇文章 0 订阅

订阅专栏

有个入门的网站。以下是学习摘要。

第1章开启three.js之旅（一）

原文点这里

里面提到了【初级教程\chapter1\1-1.html】。源码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
</body>
</html>

但是实际运行时有问题，报错： Refused to execute script from 'https://raw.github.com/mrdoob/three.js/master/build/three.js'because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

网上对该问题的解答：Chrome refused to execute this JavaScript file，真的是说了很多东西，不过都不太懂，以后可以再回头看一看。其中有一个解决这个问题的简单方法，去掉源码中<script>的src中的网址的第一个小数点，即：

https://raw.github.com/mrdoob/three.js/master/build/three.js
change to

https://rawgithub.com/mrdoob/three.js/master/build/three.js，验证OK。

另外，在chrome中调试javascript代码。没搞通。

第1章开启Threejs之旅(二)

原文点这里

介绍了一个简单的代码框架。

1.初始化renderer对象

            var renderer;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColorHex(0xFFFFFF, 1.0);
            }

2.初始化camera对象

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//视角，aspect，near，far
                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({
                    x : 0,
                    y : 0,
                    z : 0
                });
            }

3.初始化scene对象

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

4.初始化简单的light

            var light;
            function initLight() {
                light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);//平行光
                light.position.set(100, 100, 200);
                scene.add(light);
            }

5.添加渲染对象

            var xxx;
            function initObject() {
                ...
                scene.add( xxx );
            }

6.设置渲染入口

            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                renderer.clear();
                renderer.render(scene, camera);
            }

注：关于“ canvas-frame”和渲染入口的定义

<pre name="code" class="html"><style type="text/css">
div#canvas-frame{
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>

<body οnlοad="threeStart();">
<div id="canvas-frame"></div>
</body>

第2章还记得点、线、面吗(一）

原文在这里

下面简单的介绍一下通过两个点来绘制一条直线的过程

1.首先声明一个几何体geometry

            var geometry = new THREE.Geometry();

2.定义一种材质material

            var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} );

注：

定义材质的时候可以传入若干属性的参数，如LineBasicMaterial就有如下属性

color 线条的颜色，用16进制来表示，默认的颜色是白色。
linewidth 线条的宽度，默认时候1个单位宽度。
linecap 线条两端的外观，默认是圆角端点。
linejoin 两个线条的连接点处的外观，默认是“round”，表示圆角。
vertexColors 定义线条材质是否使用顶点颜色。这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。
fog 定义材质的颜色是否受全局雾效的影响。;

3.定义两个点及两个颜色

            var p1 = new THREE.Vector3( -100, 0, 100 );
            var p2 = new THREE.Vector3(  100, 0, -100 );
            var color1 = new THREE.Color( 0x444444 );
            var color2 = new THREE.Color( 0xFF0000 );

4.把顶点push到几何体中，并给其设置颜色

            geometry.vertices.push(p1);
            geometry.vertices.push(p2);
            geometry.colors.push( color1, color2 );

5.定义一条line，并把这个line添加到scene中即可

            var line = new THREE.Line( geometry, material, THREE.LinePieces );
            scene.add(line);

第2章还记得点、线、面吗(二)

原文在这里

坐标系：

<点 --- 线 --- 面 --- 鸡蛋>

画鸡蛋：

1.鸡蛋对象

            var cube;
            function initObject() {
var geometry = new THREE.SphereGeometry( 130, 50, 50);
var mesh2 = new THREE.Mesh(geometry,new THREE.MeshBasicMaterial( { color: 0xA1634E} ) );
mesh2.scale.x = 0.75;
scene.add( mesh2 );
            }

2.增加控制

    var controls;
    function setControl() {
controls = new THREE.TrackballControls( camera );
    }

第3章让场景动起来

原文在这里

动画方式：

1.移动render object

2.移动camera

设置循环的动画：

function animate() {
// do something， move render object or move camera
render();
requestAnimationFrame( animate );
}

视觉残留：

当物体在快速运动时,当人眼所看到的影像消失后，人眼仍能继续保留其影像1/24秒左右的图像，这种现象被称为视觉暂留现象。

性能监视器Stats

在Three.js中，性能由一个性能监视器来管理，它的介绍在 stats.js 可以看到。性能监视器的截图如下所示:

其中FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。点击上面的图，就会变成下面的另一个视图。

MS表示渲染一帧需要的毫秒数，这个数字是越小越好。再次点击又可以回到FPS视图中。

性能监视器的启用：

            var renderer;
            var stats;
            function initThree() {
                // init renderer
...
// init stats
                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';
                document.getElementById('canvas-frame').appendChild(stats.domElement);
            }

记得在渲染函数里面调用stats.update();来实时刷新

动画引擎Tween.js

定义Tween对象

function initTween() {
new TWEEN.Tween( mesh.position)
.to( { x: -400 }, 3000 ).repeat( Infinity ).start();
}

记得在渲染函数里面调用TWEEN.update();来实时刷新

TODO ：制作Demo（点在曲线上运动）

1.Linear

2.Bezier wiki

3.CatmullRom wik

可以参看tween.js-master/examples/06_array_interpolation.html中的实现。提示：

TWEEN.Interpolation.Linear

TWEEN.Interpolation.Bezier

TWEEN.Interpolation.CatmullRom

第4章三维空间的观察

原文在这里

在Threejs中相机的表示是THREE.Camera，它是相机的抽象基类，其子类有两种相机，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。类图如下所示：

正投影：
OrthographicCamera( left, right, top, bottom, near, far )，例如：
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );将浏览器的宽高设置为视景体的宽高，相机正好在窗口中心
透视投影：
PerspectiveCamera( fov, aspect, near, far )，例如：
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

第5章五彩的光源

THREE.Light是所有光源的基类。构造方式THREE.Light ( hex )，其中hex是一个16进制的数，代表光源的color

环境光
THREE.AmbientLight( hex )
点光源
THREE.PointLight( color, intensity, distance )，其中
color：光的颜色
intensity：光的强度，默认是1.0,就是说是100%强度的灯光。
distance：光的距离，从光源所在的位置，经过distance这段距离之后，光的强度将从intensity衰减为0。默认情况下，这个值为0.0，表示光源强度不衰减。
聚光灯
THREE.SpotLight( hex, intensity, distance, angle, exponent )
hex：聚光灯发出的颜色
intensity：同点光源
distance：同点光源
angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度
exponent：光源模型中，衰减的一个参数，越大衰减约快
方向光
THREE.DirectionalLight( hex, intensity )
hex：光的颜色
intensity：光的强度

第6章纹理，不一样的皮肤(一)

原文在这里

第6章将canvas作为纹理，将动画作为纹理（二）

原文在这里
第7章 3D模型的加载与使用

原文在这里

fangchuawei

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Webgl之three.js

有个网站，有些入门教程可看。‘第1章开启three.js之旅（一）里面提到了【初级教程\chapter1\1-1.html】。源码： canvas { width: 100%; height: 100% } 但是实际运行时有问题。报错：即： Refused to execute script from 'https://raw
复制链接

扫一扫